thm/kollagen
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

rerender on canvas size change

Browse source
This commit is contained in:
Tomáš Mládek 2020-07-15 22:56:48 +02:00
parent 778d8ef605
commit 5caaf81699
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Collage.vue
View file

@ -1,15 +1,15 @@
<template>
<div class="collage">
<div class="canvas">
<canvas id="canvas" ref="canvas" :width="canvas.width" :height="canvas.height"></canvas>
<canvas id="canvas" ref="canvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
<div class="canvas-size">
<label>
Width:
<input type="number" step="16" min="128" v-model="canvas.width">
<input type="number" step="16" min="128" v-model="canvasSize.width">
</label>
<label>
Height:
<input type="number" step="16" min="128" v-model="canvas.height">
<input type="number" step="16" min="128" v-model="canvasSize.height">
</label>
</div>
</div>
@ -55,7 +55,7 @@ type DisplayCollageModeType = CollageModeType | & "shuffle";
export default class Collage extends Vue {
@Prop({required: true}) private images!: ImageBitmap[];
private context!: CanvasRenderingContext2D;
private canvas = {
private canvasSize = {
width: 640,
height: 640
};
@ -113,6 +113,13 @@ export default class Collage extends Vue {
this.currentMode.place(this.context, this.images, this.collageConfig);
}
}
@Watch("canvasSize", {deep: true})
private onCanvasSizeChange() {
this.$nextTick(() => {
this.renderCollage();
});
}
}
</script>