我有一个基于单个文件组件的vuejs项目。我想添加一个画布,并根据我的组件数据用paperjs动态绘制事物。正确的做法是什么?
自我反应。运作中的证监会。
<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()。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句