Как обновить холст, кликнув в 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;
        }
    }

Текущий код должен перерисовать компонент 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;
}

Я бы также предложил изменить функцию готовности на подключенную ловушку жизненного цикла VueJS, которая обычно срабатывает, когда ваш документ готов.

Надеюсь, это поможет