diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue index 6752af5..b545f34 100644 --- a/src/components/Canvas.vue +++ b/src/components/Canvas.vue @@ -32,7 +32,6 @@ }, methods: { loadImage: function (imageUrl) { - console.log(imageUrl + '!!!') this.image = new Image() this.image.onload = () => { this.imageLoaded = true diff --git a/src/components/Player.vue b/src/components/Player.vue index bc739f6..16172e6 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -3,6 +3,10 @@
+
+ + +
@@ -18,7 +22,17 @@ return { image: null, buttonLabel: 'PLAY', - playing: false + playing: false, + position: 0, + tmp_ctx: null, + animation_id: null + } + }, + computed: { + frames: function () { + if (this.image === null) return 0 + return Math.ceil(this.image.width / this.width) * + Math.ceil(this.image.height / this.height) } }, mounted: function () { @@ -37,14 +51,22 @@ setTimeout(() => { this.clear('red') }, 0) + }, + position: function () { + if (this.image === null) return + this.tmp_ctx = this.$refs.canvas.getContext('2d') + this.$render() } }, methods: { playPause: function () { this.playing = !this.playing if (this.playing) { + this.tmp_ctx = this.$refs.canvas.getContext('2d') + this.animation_id = requestAnimationFrame(this.$render_advance) this.buttonLabel = 'STOP' } else { + cancelAnimationFrame(this.animation_id) this.buttonLabel = 'PLAY' } }, @@ -54,7 +76,20 @@ ctx.fillRect(0, 0, parseInt(this.width), parseInt(this.height)) }, $render: function () { - + let wb = Math.ceil(this.image.width / this.width) + let x = (this.position % wb) * this.width + let w = x + this.width < this.image.width ? this.width : this.image.width - x + let y = Math.floor(this.position / wb) * this.height + let h = y + this.height < this.image.height ? this.height : this.image.height - y + if (w !== this.width || h !== this.height) this.clear('black') + this.tmp_ctx.drawImage(this.image, x, y, w, h, 0, 0, w, h) + }, + $render_advance: function () { + this.$render() + if (this.position < this.frames) { + this.position += 1 + requestAnimationFrame(this.$render_advance) + } } } } diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 416f0d0..3807306 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -35,7 +35,7 @@
- +