AnimationTool/app/canvas_handler.ts

84 lines
2.8 KiB
TypeScript
Raw Normal View History

2019-09-27 23:45:52 +00:00
import { IAnimationData } from './Interfaces/IAnimationData';
import { IProjectData } from './Interfaces/IProjectData';
import { IFramePinData } from './Interfaces/IFramePinData';
2019-09-27 23:45:52 +00:00
2019-09-27 00:45:28 +00:00
// I display the canvas and am clickable
2019-09-26 01:59:16 +00:00
export class CanvasHandler {
2019-09-27 23:45:52 +00:00
private canvasImage: HTMLCanvasElement;
private imageElement: HTMLImageElement;
private animationData: IAnimationData;
private projectData: IProjectData;
2019-09-27 23:45:52 +00:00
private orginInfo: HTMLElement;
2019-09-26 01:59:16 +00:00
2019-09-28 01:35:27 +00:00
private targetImageSize: number = 256;
2019-09-27 23:45:52 +00:00
constructor(
animationData: IAnimationData,
canvasData: IProjectData,
2019-09-27 23:45:52 +00:00
canvasImage: HTMLCanvasElement,
imageElement: HTMLImageElement,
originInfo: HTMLElement
) {
this.animationData = animationData;
this.projectData = canvasData;
2019-09-27 23:45:52 +00:00
this.canvasImage = canvasImage;
this.imageElement = imageElement;
this.orginInfo = originInfo;
2019-09-26 22:36:27 +00:00
2019-09-28 01:35:27 +00:00
this.ResizeCanvas();
2019-09-27 23:45:52 +00:00
this.UpdateCanvasDataSize();
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
2019-09-28 01:35:27 +00:00
canvasContext.fillRect(0, 0, this.targetImageSize, this.targetImageSize);
canvasContext.imageSmoothingEnabled = false;
this.canvasImage.addEventListener('click', this.mouseDown);
}
2019-09-26 22:05:37 +00:00
2019-09-28 01:35:27 +00:00
public ResizeCanvas() {
// get image ratio, then scale default width by it
const hwratio = this.imageElement.height / this.imageElement.width;
const newWidth = this.targetImageSize / hwratio;
const newHeight = this.targetImageSize;
console.log('hwratio = ' + hwratio);
this.canvasImage.width = newWidth;
this.canvasImage.height = newHeight;
this.UpdateCanvasDataSize();
2019-09-26 22:05:37 +00:00
}
2019-09-27 23:45:52 +00:00
private UpdateCanvasDataSize() {
this.projectData.width = this.canvasImage.width;
this.projectData.height = this.canvasImage.height;
2019-09-27 23:45:52 +00:00
}
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);
if (this.projectData.currentlySelectedPin === 0) {
// update animation data
this.animationData.originX = pixelX;
this.animationData.originY = pixelY;
} else {
console.log('current pin id = ' + this.projectData.currentlySelectedPin);
const newPinData: IFramePinData = {
id: this.projectData.currentlySelectedPin,
x: pixelX,
y: pixelY
};
this.animationData.frames[this.projectData.currentFrame][
this.projectData.currentlySelectedPin
] = newPinData;
}
2019-09-27 23:45:52 +00:00
// update canvas data
this.projectData.widthRatio = ratioWidth;
this.projectData.heightRatio = ratioHeight;
2019-09-27 23:45:52 +00:00
// update origin number display
this.orginInfo.innerText = 'Origin X: ' + this.animationData.originX + ' Y: ' + this.animationData.originY;
};
2019-09-26 01:59:16 +00:00
}