click to set origin

master
Beau Blyth 2019-09-27 16:45:52 -07:00
parent 0872dd9259
commit 7d4c5ab749
5 changed files with 123 additions and 32 deletions

View File

@ -0,0 +1,6 @@
export interface ICanvasData {
width: number;
height: number;
widthRatio: number;
heightRatio: number;
}

View File

@ -1,17 +1,60 @@
import { IAnimationData } from './Interfaces/IAnimationData';
import { ICanvasData } from './Interfaces/ICanvasData';
// I display the canvas and am clickable
export class CanvasHandler {
private currentImageDiv: HTMLElement;
private canvasImage: HTMLCanvasElement;
private imageElement: HTMLImageElement;
private animationData: IAnimationData;
private canvasData: ICanvasData;
private orginInfo: HTMLElement;
constructor(currentImageDiv: HTMLElement) {
constructor(
animationData: IAnimationData,
canvasData: ICanvasData,
canvasImage: HTMLCanvasElement,
currentImageDiv: HTMLElement,
imageElement: HTMLImageElement,
originInfo: HTMLElement
) {
this.animationData = animationData;
this.canvasData = canvasData;
this.canvasImage = canvasImage;
this.currentImageDiv = currentImageDiv;
console.log(this.currentImageDiv);
this.imageElement = imageElement;
this.orginInfo = originInfo;
//setup canvas
this.canvasImage.width = 256;
this.canvasImage.height = 256;
this.UpdateCanvasDataSize();
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
canvasContext.fillRect(0, 0, 256, 256);
this.currentImageDiv.addEventListener('click', this.mouseDown);
}
public Load() {
const mouseDown = (event: MouseEvent) => {
console.log(event.x + ' ' + event.y);
private UpdateCanvasDataSize() {
this.canvasData.width = this.canvasImage.width;
this.canvasData.height = this.canvasImage.height;
}
private mouseDown = (event: MouseEvent) => {
// get position
const ratioWidth: number = this.canvasImage.width / this.imageElement.width;
const ratioHeight: number = this.canvasImage.height / this.imageElement.height;
// get origin in pixels
const pixelX: number = Math.floor(event.offsetX / ratioWidth);
const pixelY: number = Math.floor(event.offsetY / ratioHeight);
console.log('CLICK X:' + pixelX + ' Y:' + pixelY);
// update animation data
this.animationData.originX = pixelX;
this.animationData.originY = pixelY;
// update canvas data
this.canvasData.widthRatio = ratioWidth;
this.canvasData.heightRatio = ratioHeight;
// update origin number display
this.orginInfo.innerText = 'Origin X: ' + this.animationData.originX + ' Y: ' + this.animationData.originY;
};
this.currentImageDiv.addEventListener('mousedown', mouseDown);
}
}

View File

@ -1,32 +1,38 @@
import { IAnimationData } from './Interfaces/IAnimationData';
import { ICanvasData } from './Interfaces/ICanvasData';
export class FrameHandler {
private start: number = 0;
private frameNumberDiv: HTMLElement;
private animationData: IAnimationData;
private canvasData: ICanvasData;
private filenames: string[] = [];
private currentFrame: number = 0;
private playingAnimation: boolean;
private canvasImage: HTMLCanvasElement;
private htmlCanvasElement: HTMLCanvasElement;
private canvasContext: CanvasRenderingContext2D;
private imageElement: HTMLImageElement;
constructor(
animationData: IAnimationData,
canvasImage: HTMLCanvasElement,
canvasData: ICanvasData,
htmlCanvasElement: HTMLCanvasElement,
canvasContext: CanvasRenderingContext2D,
frameNumberDiv: HTMLElement
frameNumberDiv: HTMLElement,
imageElement: HTMLImageElement
) {
this.animationData = animationData;
this.canvasImage = canvasImage;
this.canvasData = canvasData;
this.htmlCanvasElement = htmlCanvasElement;
this.canvasContext = canvasContext;
this.frameNumberDiv = frameNumberDiv;
window.requestAnimationFrame(this.windowAnimationUpdate);
this.imageElement = new Image();
this.imageElement = imageElement;
this.canvasContext.imageSmoothingEnabled = false;
}
@ -67,9 +73,27 @@ export class FrameHandler {
this.frameNumberDiv.className = 'warning';
this.frameNumberDiv.innerText = 'No images uploaded yet';
} else {
this.canvasContext.clearRect(0, 0, this.canvasImage.width, this.canvasImage.height);
this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
this.imageElement.src = this.filenames[this.currentFrame];
this.canvasContext.drawImage(this.imageElement, 0, 0, this.canvasImage.width, this.canvasImage.height);
// draw sprite
this.canvasContext.drawImage(
this.imageElement,
0,
0,
this.htmlCanvasElement.width,
this.htmlCanvasElement.height
);
// draw origin +
const originCursorSize: number = 500;
const originX = this.animationData.originX * this.canvasData.widthRatio;
const originY = this.animationData.originY * this.canvasData.heightRatio;
this.canvasContext.beginPath();
this.canvasContext.moveTo(originX, originY - originCursorSize);
this.canvasContext.lineTo(originX, originY + originCursorSize);
this.canvasContext.moveTo(originX - originCursorSize, originY);
this.canvasContext.lineTo(originX + originCursorSize, originY);
this.canvasContext.stroke();
this.frameNumberDiv.className = 'instruction';
this.frameNumberDiv.innerText =
'Frame ' + (this.currentFrame + 1).toString() + ' / ' + this.filenames.length.toString();

View File

@ -2,6 +2,7 @@ import { CanvasHandler } from './canvas_handler';
import { FileHandler } from './file_handler';
import { FrameHandler } from './frame_handler';
import { IAnimationData } from './Interfaces/IAnimationData';
import { ICanvasData } from './Interfaces/ICanvasData';
import { IFrame } from './Interfaces/IFrame';
export class Page {
@ -22,6 +23,8 @@ export class Page {
private canvasImage: HTMLCanvasElement;
private canvasContext: CanvasRenderingContext2DSettings;
private canvasData: ICanvasData;
public Load() {
// defining blank slate animation data
this.animationData = {
@ -37,23 +40,36 @@ export class Page {
}
]
};
//blank slate canvas data
this.canvasData = {
width: 0,
height: 0,
widthRatio: 0,
heightRatio: 0
};
const canvasElement = document.getElementById('canvasImage') as HTMLCanvasElement;
const imageElement = new Image();
// setup canvas
this.canvasImage = document.getElementById('canvasImage') as HTMLCanvasElement;
this.canvasImage.width = 256;
this.canvasImage.height = 256;
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
canvasContext.fillRect(0, 0, 256, 256);
this.canvasHandler = new CanvasHandler(document.getElementById('currentImage') as HTMLElement);
// this.canvasHandler.currentImageDiv.addEventListener('onmousedown', ClickOnCanvas);
this.canvasHandler = new CanvasHandler(
this.animationData,
this.canvasData,
canvasElement,
document.getElementById('currentImage') as HTMLElement,
imageElement,
document.getElementById('originInfo') as HTMLElement
);
// setup frame handler
this.frameHandler = new FrameHandler(
this.animationData,
this.canvasImage,
canvasContext,
document.getElementById('frameNumber') as HTMLElement
this.canvasData,
canvasElement,
canvasElement.getContext('2d')!,
document.getElementById('frameNumber') as HTMLElement,
imageElement
);
// input elements
@ -153,6 +169,7 @@ export class Page {
this.frameHandler.StopPlayingAnimation();
this.frameHandler.TogglePlayingAnimation();
console.log(this.animationData);
//set framedata initialized to true
};
private download(filename: string, text: string) {
@ -170,6 +187,8 @@ export class Page {
private updateFrameRate = () => {
this.animationData.frameRate = this.frameRateInput.valueAsNumber;
this.frameHandler.StopPlayingAnimation();
this.frameHandler.TogglePlayingAnimation();
console.log('new frame rate = ' + this.animationData.frameRate);
};

3
dist/index.html vendored
View File

@ -23,8 +23,7 @@
</div>
<div id="settings">
Origin X: <input type="number" name="originX" value="0" class="numberinput">
Y: <input type="number" name="originY" value="0" class="numberinput"><br>
<div id = "originInfo">Click image to set Origin</div>
Fps: <input type="number" id="framerate" class="numberinput"><br>
<input type="checkbox" id="looping" > Looping <br>
<button id="saveButton" type="button">export .anim with (S)</button>