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

当前代码应该重新渲染canvas组件，但不是。

Answer 1

您可以在vue中使用一种方法来清除画布

所以而不是：

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

您需要访问上下文的引用并按如下所示进行调用：

clearCanvas () {
  this.context.clearRect(0, 0, canvas.width, canvas.height)
}

您可以在Vue数据内创建一个空变量

data: () => ({
    mouse: {
        current: {
            x: 0,
            y: 0
        },
        previous: {
            x: 0,
            y: 0
        },
        down: false
    },

    canvas_width: '',
    canvas_height: '',

    modal_state: false,
    context: null
})

，然后在准备好的功能上，将上下文设置为您为画布创建的引用：

ready: function () {
    let c = document.getElementById("canvas");
    this.context = c.getContext("2d");
    this.context.translate(0.5, 0.5);
    this.context.imageSmoothingEnabled = false;
}

我还建议将ready函数更改为已安装的VueJS生命周期挂钩，该挂钩基本上会在文档准备就绪时触发。

希望有帮助

Answer 2

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

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

如何通过单击VueJS刷新画布？

2 个答案: