AnimationTool/app/canvas_handler.ts

61 lines
2.0 KiB
TypeScript
Raw Normal View History

2019-09-27 23:45:52 +00:00
import { IAnimationData } from './Interfaces/IAnimationData';
import { ICanvasData } from './Interfaces/ICanvasData';
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 {
private currentImageDiv: HTMLElement;
2019-09-27 23:45:52 +00:00
private canvasImage: HTMLCanvasElement;
private imageElement: HTMLImageElement;
private animationData: IAnimationData;
private canvasData: ICanvasData;
private orginInfo: HTMLElement;
2019-09-26 01:59:16 +00:00
2019-09-27 23:45:52 +00:00
constructor(
animationData: IAnimationData,
canvasData: ICanvasData,
canvasImage: HTMLCanvasElement,
currentImageDiv: HTMLElement,
imageElement: HTMLImageElement,
originInfo: HTMLElement
) {
this.animationData = animationData;
this.canvasData = canvasData;
this.canvasImage = canvasImage;
2019-09-26 01:59:16 +00:00
this.currentImageDiv = currentImageDiv;
2019-09-27 23:45:52 +00:00
this.imageElement = imageElement;
this.orginInfo = originInfo;
2019-09-26 22:36:27 +00:00
2019-09-27 23:45:52 +00:00
//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);
2019-09-26 22:05:37 +00:00
2019-09-27 23:45:52 +00:00
this.currentImageDiv.addEventListener('click', this.mouseDown);
2019-09-26 22:05:37 +00:00
}
2019-09-27 23:45:52 +00:00
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;
};
2019-09-26 01:59:16 +00:00
}