@weraleto

Как вывести линию canvas vue.js?

Пытаюсь написать простой код, где в один из компонентов встроен canvas по которому можно рисовать мышью
Набросала простой код, который отрабатывает без использования vue.js https://codepen.io/wera-pinky/pen/zYxgNdO
Адаптировать его для vue не выходит - компонент на событие реагирует, но линию не строит
в чем может быть причина?

код компонента ниже

<template>
    <div class="app-wrapper" >
        <canvas id="canvas"
            @mouseup="finishedPosition()"
            @mousedown="startPosition()"
            @mousemove="draw($event)"
        ></canvas>
    </div>
</template>

<script>
export default {
    data() {
        return {
            painting:false
        }
    },
    methods: {
        startPosition(){
            this.painting=true;
        },
        finishedPosition(){
            this.painting=false;
            this.ctx.beginPath();
        },
        draw(event){
            if(this.painting){
                canvas.height=288;
                canvas.width=document.querySelector('.app-wrapper').clientWidth;
                this.ctx.lineWidth=5;
                this.ctx.lineCap='round';

                this.ctx.lineTo(event.clientX, event.clientY);
                this.ctx.stroke();
                this.ctx.beginPath();
                this.ctx.moveTo(event.clientX, event.clientY);
                this.ctx.fill()
            }
        }
    },
    computed: {
        ctx(){
            return document.querySelector('#canvas').getContext('2d');
        }
    },

}

</script>

<style scoped>
    .app-wrapper {
        min-height: 288px;
        max-width: 82.92%;
    }
</style>
  • Вопрос задан
  • 734 просмотра
Пригласить эксперта
Ответы на вопрос 1
@andreysuha
Что то знаю
Попробуйте к canvas обращаться через refs
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы