vue.js - 如何通过在 VueJS 中单击来刷新画布？

Question

我需要通过单击清除画布。它是 SPA，运行 Vue CLI v.3.5.0。

$forceUpdate当我单击按钮时不会触发，但会发生其他操作（例如console.log）。

<div class="drawing__container">

        <canvas class="drawing-canvas"
                id="canvas"
                :width=canvas_width
                :height=canvas_height
                v-on:mousedown="handleMouseDown"
                v-on:mouseup="handleMouseUp"
                v-on:mousemove="handleMouseMove"></canvas>

        <!-- clear btn -->
        <div class="drawing-clear" @click="clearCanvas">
            <span class="border"></span>
            <span class="border"></span>
            <span class="arrow"><span></span></span>
            <span class="arrow"><span></span></span>
        </div>
        <!-- end -->

        <!-- open modal and share canvas -->
        <span class="drawing-share"
              @click="openModal">Share your love</span>
        <!-- end -->

    </div>

export default {
        name: "Canvas",
        data: () => ({
            mouse: {
                current: {
                    x: 0,
                    y: 0
                },
                previous: {
                    x: 0,
                    y: 0
                },
                down: false
            },

            canvas_width: '',
            canvas_height: '',

            modal_state: false
        }),
        computed: {
            currentMouse: function () {
                let c = document.getElementById("canvas");
                let rect = c.getBoundingClientRect();

                return {
                    x: this.mouse.current.x - rect.left,
                    y: this.mouse.current.y - rect.top
                }
            }
        },
        methods: {
            // basic function
            draw() {
                if (this.mouse.down) {

                    let c = document.getElementById("canvas");
                    let ctx = c.getContext("2d");

                    // get width and height of canvas
                    this.canvas_width = document.querySelector('.drawing__container').offsetWidth;
                    this.canvas_height = document.querySelector('.drawing-canvas').offsetHeight;

                    // set canvas setting
                    ctx.clearRect(0, 0, this.canvas_width, this.canvas_height);
                    ctx.lineTo(this.currentMouse.x, this.currentMouse.y);
                    ctx.strokeStyle = "#FFFFFF";
                    ctx.lineWidth = 10;
                    ctx.stroke();
                    ctx.lineCap = 'round';
                    ctx.fillStyle = '#000000';

                }
            },

            // set event, if starting drawing
            handleMouseDown(event) {

                this.mouse.down = true;
                this.mouse.current = {
                    x: event.pageX,
                    y: event.pageY
                };

                let c = document.getElementById("canvas");
                let ctx = c.getContext("2d");

                ctx.moveTo(this.currentMouse.x, this.currentMouse.y);

            },

            // set event, if ending drawing
            handleMouseUp() {
                this.mouse.down = false;
            },

            // set event, if moving cursor
            handleMouseMove(event) {

                this.mouse.current = {
                    x: event.pageX,
                    y: event.pageY
                };

                this.draw(event);
            },

            clearCanvas() {
                this.$forceUpdate(this.currentMouse);
            },

            // open modal to share canvas
            openModal() {
                this.$emit('changeStateModal', true);
            }
        },
        ready: function () {
            let c = document.getElementById("canvas");
            let ctx = c.getContext("2d");
            ctx.translate(0.5, 0.5);
            ctx.imageSmoothingEnabled = false;
        }
    }

当前代码应该重新渲染画布组件，但没有。

标签： vue.jscanvas

Answer 1

这是一个简单的解决方案：

clear() {
      this.context.clearRect(0, 0, 200, 200);
      this.context.beginPath();
      this.context.closePath();
    }