Skip to content
Snippets Groups Projects
Commit ea1de9c1 authored by Adam Procter's avatar Adam Procter
Browse files

mixin

moved the drawing of boxes into a mixin.js as proof of approach to use mixins for rendering canvas2d
parent 6cf0dae7
No related branches found
No related tags found
No related merge requests found
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1>Welcome to Vue &amp; Canvas testing ground</h1>
<canvas ref="canvas"></canvas>
......@@ -21,13 +21,12 @@
<script>
import { mapState } from 'vuex'
import { draw } from './mixins/draw.js'
var canvas = null
export default {
name: 'HelloWorld',
props: {
msg: String
},
mixins: [draw],
computed: mapState({
configRect: state => state.configRect,
......@@ -40,33 +39,6 @@ export default {
this.draw()
},
methods: {
draw() {
this.box(this.ctx, this.x, this.y)
},
box(ctx, x, y) {
ctx.setTransform(1, 0, 0, 1, x, y)
ctx.fillStyle = this.configRect.fill
ctx.fillRect(
this.configRect.x,
this.configRect.y,
this.configRect.height,
this.configRect.width
)
ctx.fillStyle = this.configHandle.fill
ctx.fillRect(
this.configHandle.x,
this.configHandle.y,
this.configHandle.height,
this.configHandle.width
)
ctx.stroke()
ctx.setTransform(1, 0, 0, 1, 0, 0)
},
clear(ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height)
}
......
export const draw = {
methods: {
draw() {
this.box(this.ctx, this.x, this.y)
},
box(ctx, x, y) {
ctx.setTransform(1, 0, 0, 1, x, y)
ctx.fillStyle = this.configRect.fill
ctx.fillRect(
this.configRect.x,
this.configRect.y,
this.configRect.height,
this.configRect.width
)
ctx.fillStyle = this.configHandle.fill
ctx.fillRect(
this.configHandle.x,
this.configHandle.y,
this.configHandle.height,
this.configHandle.width
)
ctx.stroke()
ctx.setTransform(1, 0, 0, 1, 0, 0)
}
}
}
<template>
<div class="home">
<HelloWorld msg="Welcome to Vue &amp; Canvas testing ground" />
<HelloWorld />
</div>
</template>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment