时间戳

首页 > 解决方案 > 在一个基于SFC的vuejs项目上使用paperjs

vue.js - 在一个基于SFC的vuejs项目上使用paperjs

问题描述

我有一个基于单文件组件的 vuejs 项目。我想根据我的组件数据添加一个画布并用 paperjs 动态地绘制东西。正确的方法是什么？

标签： vue.jspaperjs

解决方案

自我回应。一个工作的证监会。

<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>

编辑

{{circle_diameter}}由于 paperjs 将在 vue 范围之外渲染，因此在您将其放入 canvas html 标记之前，绘图不是反应性的。这样，每次 prop 更改时，您都会强制 Vue 调用 update()。

推荐阅读