Использование paperjs в проекте vuejs на основе SFC - PullRequest
Новая
       7

Использование paperjs в проекте vuejs на основе SFC

0 голосов
/ 11 декабря 2018

У меня есть проект vuejs, основанный на отдельных файловых компонентах.Я хочу добавить холст и динамически рисовать вещи с помощью paperjs, основываясь на моих данных компонентов.Как правильно это сделать?

1 Ответ

0 голосов
/ 12 декабря 2018

Самостоятельный ответ.Работающий 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 будет отображаться вне области видимости, рисование не будет реактивным, пока вы не поместите {{circle_diameter}} в холстHTML-теги.Таким образом, вы заставляете Vue вызывать update () каждый раз, когда меняется реквизит.

...