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