我有一个基于单一文件组件的vuejs项目。我想添加一个画布,并根据我的组件数据,用paperjs动态地绘制东西。正确的做法是什么?
发布于 2018-12-12 05:29:16
自我反应。一个运作良好的证监会。
<template>
<canvas resize id="main-canvas">{{circle_diameter}}</canvas>
</template>
<script>
import paper from 'paper'
export default {
data: () => ({ x: 20, y: 20 }),
props: ['circle_diameter'],
methods: {
updateDrawing() {
paper.setup(document.getElementById('main-canvas'))
// Now, draw your things based on component state.
const point = new paper.Point(this.x, this.y)
const circle = new paper.Path.Circle(point, this.circle_diameter/2)
circle.fillColor = 'grey'
circle.strokeColor = 'black'
},
},
updated() {
this.updateDrawing()
},
}
</script>
编辑
由于paperjs会在vue范围之外渲染,因此只有将{{circle_diameter}}
放入canvas html标记中,才能进行绘制。通过这种方式,您可以强制Vue在每次属性更改时调用update()。
https://stackoverflow.com/questions/53723660
复制相似问题