From 7d4c5ab749111d9038ddadc18512547d293e639b Mon Sep 17 00:00:00 2001 From: Beau Blyth Date: Fri, 27 Sep 2019 16:45:52 -0700 Subject: [PATCH] click to set origin --- app/Interfaces/ICanvasData.ts | 6 ++++ app/canvas_handler.ts | 59 ++++++++++++++++++++++++++++++----- app/frame_handler.ts | 38 +++++++++++++++++----- app/page.ts | 49 ++++++++++++++++++++--------- dist/index.html | 3 +- 5 files changed, 123 insertions(+), 32 deletions(-) create mode 100644 app/Interfaces/ICanvasData.ts diff --git a/app/Interfaces/ICanvasData.ts b/app/Interfaces/ICanvasData.ts new file mode 100644 index 0000000..1891558 --- /dev/null +++ b/app/Interfaces/ICanvasData.ts @@ -0,0 +1,6 @@ +export interface ICanvasData { + width: number; + height: number; + widthRatio: number; + heightRatio: number; +} diff --git a/app/canvas_handler.ts b/app/canvas_handler.ts index 0b77a53..218297b 100644 --- a/app/canvas_handler.ts +++ b/app/canvas_handler.ts @@ -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); - }; - - this.currentImageDiv.addEventListener('mousedown', mouseDown); + 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; + }; } diff --git a/app/frame_handler.ts b/app/frame_handler.ts index 50b058b..a9067d6 100644 --- a/app/frame_handler.ts +++ b/app/frame_handler.ts @@ -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(); diff --git a/app/page.ts b/app/page.ts index 79798da..d707eb9 100644 --- a/app/page.ts +++ b/app/page.ts @@ -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,26 +40,39 @@ 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.frameHandler = new FrameHandler( + this.canvasHandler = new CanvasHandler( this.animationData, - this.canvasImage, - canvasContext, - document.getElementById('frameNumber') as HTMLElement + this.canvasData, + canvasElement, + document.getElementById('currentImage') as HTMLElement, + imageElement, + document.getElementById('originInfo') as HTMLElement ); - //input elements + // setup frame handler + this.frameHandler = new FrameHandler( + this.animationData, + this.canvasData, + canvasElement, + canvasElement.getContext('2d')!, + document.getElementById('frameNumber') as HTMLElement, + imageElement + ); + + // input elements this.frameRateInput = document.getElementById('framerate') as HTMLInputElement; this.frameRateInput.addEventListener('change', this.updateFrameRate); this.frameRateInput.value = this.animationData.frameRate.toString(); @@ -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); }; diff --git a/dist/index.html b/dist/index.html index 87f36ae..49a654b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -23,8 +23,7 @@
- Origin X: - Y:
+
Click image to set Origin
Fps:
Looping