TouchStart не работает на холсте (в модальном) - PullRequest
Новая
       12

TouchStart не работает на холсте (в модальном)

1 голос
/ 04 июля 2019

Я пытаюсь рисовать линии в модале Bootstrap, используя Javascript.Мой код отлично работает на рабочем столе.Но когда я использую мобильное устройство, оно не работает.

Вот мой код: 

"use strict";
class Signature {
    constructor() {
        this.color = "#000000";
        this.sign = false;
        this.begin_sign = false;
        this.width_line = 5;
        this.canvas = document.getElementById('canvas');
        this.offsetLeft = this.canvas.offsetLeft;
        this.offsetTop = this.canvas.offsetTop;
        this.context = canvas.getContext('2d');
        this.context.lineJoin = 'round'; 
        this.context.lineCap = 'round'; 
        this.whenActionDown();
        this.whenActionUp();
        this.whenActionMove();
        this.createSignature();
        this.clearCanvas();
        this.resetCanvas();
    }

    updateMousePosition(mX, mY) {
    let rect = this.canvas.getBoundingClientRect();
    let scaleX = this.canvas.width / rect.width;
    let scaleY = this.canvas.height / rect.height;
    this.cursorX = (mX - rect.left) * scaleX;
    this.cursorY = (mY - rect.top) * scaleY;
}

    actionDown(e) {
        this.sign = true;
        this.updateMousePosition(e.clientX, e.clientY);
    }

    actionUp() {
        this.sign = false;
        this.begin_sign = false;
    }

    actionMove(e) {
        if (this.sign) {
            this.updateMousePosition(e.clientX, e.clientY);
            this.createSignature();
        }
    }



    whenActionDown() {
        document.addEventListener("mousedown", this.actionDown.bind(this));
      document.addEventListener("touchstart", this.actionDown.bind(this));
    }

    whenActionUp() {
        document.addEventListener("mouseup", this.actionUp.bind(this));
      document.addEventListener("touchend", this.actionUp.bind(this));
    }


    whenActionMove() {
        this.canvas.addEventListener('mousemove', this.actionMove.bind(this));
        this.canvas.addEventListener('touchmove', this.actionMove.bind(this));
    }


    createSignature() {

        if (!this.begin_sign) {

            this.context.beginPath();
            this.context.moveTo(this.cursorX, this.cursorY);
            this.begin_sign = true;
        }

        else {
            this.context.lineTo(this.cursorX, this.cursorY);
            this.context.strokeStyle = this.color;
            this.context.lineWidth = this.width_line;
            this.context.stroke();
        }
    }

    clearCanvas() {
        this.context.clearRect(0, 0, this.canvas.offsetWidth, this.canvas.offsetHeight);
    }
    // Reset :
    resetCanvas() {
        document.getElementById("reset").addEventListener("click", () => {
            this.clearCanvas();
        })
    }
}

document.addEventListener("DOMContentLoaded", event => {
    new Signature();
});

Я знаю, что touchstart, touchmove и touchend должны заставить мой код работать на мобильных устройствах, но это не работает.Есть идеи?

Спасибо

1 Ответ

0 голосов
/ 04 июля 2019

Поскольку на мобильном телефоне может быть несколько точек контакта, координаты отслеживаются с помощью event.touches, поэтому вы можете выполнить следующие действия: 

const coords = event.touches ? event.touches[0] : event;
console.log(coords.clientX, coords.clientY)

Подробнее здесь https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events#Basic_steps

...