在一个基于SFC的vuejs项目上使用paperjs
Using paperjs on a vuejs project based on SFC
我有一个基于单文件组件的vuejs项目。我想添加一个 canvas 并根据我的组件数据用 paperjs 动态绘制东西。正确的做法是什么?
自我回应。工作 SFC。
<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 标签之前,绘图不会反应。这样,每次 prop 更改时,您都会强制 Vue 调用 update()。
我有一个基于单文件组件的vuejs项目。我想添加一个 canvas 并根据我的组件数据用 paperjs 动态绘制东西。正确的做法是什么?
自我回应。工作 SFC。
<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 标签之前,绘图不会反应。这样,每次 prop 更改时,您都会强制 Vue 调用 update()。