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

add canvas zoom

Browse source
This commit is contained in:
Tomáš Mládek 2018-01-25 14:22:56 +01:00 committed by Tomáš Mládek
parent 8c97483c3e
commit a715d2a381
1 changed files with 48 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/components/Player.vue
View file

@ -1,14 +1,21 @@
<template> <template>
<div id="player"> <div id="player" :class="{fullscreen: fullscreen}">
<div id="player-canvas-container"> <div>
<canvas ref="canvas" id="player-canvas" :height="height" :width="width"></canvas> <label for="zoom">Zoom:</label>
</div> <input type="number" min="1" :max="50" value="1" class="slider" v-model.number="zoom" id="zoom">
</div>
<div id="player-canvas-container">
<canvas ref="canvas" id="player-canvas"
:height="canvas_height" :width="canvas_width">
</canvas>
</div>
<div id="controls" class="{'fullscreen-controls': fullscreen}">
<div> <div>
<!--suppress HtmlFormInputWithoutLabel -->
<input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position"> <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
</div> </div>
<button @click="playPause">{{buttonLabel}}</button> <button @click="playPause">{{buttonLabel}}</button>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -23,6 +30,8 @@
image: null, image: null,
buttonLabel: 'PLAY', buttonLabel: 'PLAY',
playing: false, playing: false,
zoom: 1,
fullscreen: false,
position: 0, position: 0,
tmp_ctx: null, tmp_ctx: null,
animation_id: null animation_id: null
@ -33,6 +42,12 @@
if (this.image === null) return 0 if (this.image === null) return 0
return Math.ceil(this.image.width / this.width) * return Math.ceil(this.image.width / this.width) *
Math.ceil(this.image.height / this.height) Math.ceil(this.image.height / this.height)
},
canvas_height: function () {
return this.height * this.zoom
},
canvas_width: function () {
return this.width * this.zoom
} }
}, },
mounted: function () { mounted: function () {
@ -42,12 +57,12 @@
this.clear('red') this.clear('red')
}, },
watch: { watch: {
width: function () { canvas_width: function () {
setTimeout(() => { setTimeout(() => {
this.clear('red') this.clear('red')
}, 0) }, 0)
}, },
height: function () { canvas_height: function () {
setTimeout(() => { setTimeout(() => {
this.clear('red') this.clear('red')
}, 0) }, 0)
@ -76,7 +91,7 @@
clear: function (style) { clear: function (style) {
let ctx = this.$refs.canvas.getContext('2d') let ctx = this.$refs.canvas.getContext('2d')
ctx.fillStyle = style ctx.fillStyle = style
ctx.fillRect(0, 0, parseInt(this.width), parseInt(this.height)) ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height))
}, },
$render: function () { $render: function () {
let wb = Math.ceil(this.image.width / this.width) let wb = Math.ceil(this.image.width / this.width)
@ -85,7 +100,9 @@
let y = Math.floor(this.position / wb) * this.height let y = Math.floor(this.position / wb) * this.height
let h = y + this.height < this.image.height ? this.height : this.image.height - y let h = y + this.height < this.image.height ? this.height : this.image.height - y
if (w !== this.width || h !== this.height) this.clear('black') if (w !== this.width || h !== this.height) this.clear('black')
this.tmp_ctx.drawImage(this.image, x, y, w, h, 0, 0, w, h) this.tmp_ctx.drawImage(this.image,
x, y, w, h,
0, 0, w * this.zoom, h * this.zoom)
}, },
$render_advance: function () { $render_advance: function () {
this.$render() this.$render()
@ -102,5 +119,25 @@
</script> </script>
<style scoped> <style scoped>
#player {
text-align: center;
}
.fullscreen {
position: absolute;
top: 0;
left: 0;
background-color: rgba(1, 1, 1, .9);
width: 100%;
height: 100%;
}
.fullscreen-controls {
position: absolute;
bottom: 0;
}
#zoom {
width: 3em;
}
</style> </style>