AnimationTool/app/canvas_handler.ts

86 lines
2.7 KiB
TypeScript

import { IAnimationData } from './Interfaces/IAnimationData';
import { IFramePinData } from './Interfaces/IFramePinData';
import { IProjectData } from './Interfaces/IProjectData';
// I display the canvas and am clickable
export class CanvasHandler {
private canvasImage: HTMLCanvasElement;
private imageElement: HTMLImageElement;
private animationData: IAnimationData;
private projectData: IProjectData;
private orginInfo: HTMLElement;
private targetImageSize: number = 256;
constructor(
animationData: IAnimationData,
canvasData: IProjectData,
canvasImage: HTMLCanvasElement,
imageElement: HTMLImageElement,
originInfo: HTMLElement
) {
this.animationData = animationData;
this.projectData = canvasData;
this.canvasImage = canvasImage;
this.imageElement = imageElement;
this.orginInfo = originInfo;
this.ResizeCanvas(256, 256);
this.UpdateCanvasDataSize();
const canvasContext: CanvasRenderingContext2D = this.canvasImage.getContext('2d')!;
canvasContext.clearRect(0, 0, this.targetImageSize, this.targetImageSize);
canvasContext.imageSmoothingEnabled = false;
}
public ResizeCanvas(width: number, height: number) {
// get image ratio, then scale default width by it
const hwratio = height / width;
let newWidth = this.targetImageSize / hwratio;
let newHeight = this.targetImageSize;
if (newWidth > 600) {
newWidth = 600;
newHeight = 600 * hwratio;
}
this.canvasImage.width = newWidth;
this.canvasImage.height = newHeight;
this.UpdateCanvasDataSize();
}
public CanvasMouseDown = (offsetX: number, offsetY: number) => {
// 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(offsetX / ratioWidth);
const pixelY: number = Math.floor(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;
}
// update canvas data
this.projectData.widthRatio = ratioWidth;
this.projectData.heightRatio = ratioHeight;
};
private UpdateCanvasDataSize() {
this.projectData.width = this.canvasImage.width;
this.projectData.height = this.canvasImage.height;
}
}