Как использовать функции ontouch и onclick на холсте внутри класса, используя разные методы в Javascript - PullRequest
Новая
       42

Как использовать функции ontouch и onclick на холсте внутри класса, используя разные методы в Javascript

0 голосов
/ 12 июня 2019

У меня есть main.js, вызывающий класс CanvasConstructor, в этом я создаю свой холст и управляю мышью для подписи на холсте различными методами.Это работает!

Теперь я хотел добавить методы, чтобы использовать его на смартфонах (используя события касания).

Я могу получить только одну позицию, которая не является реальной позицией моего пальца.

Функция ontouchmove () также не меняет положение.

Я пытался получить холст с помощью getElementById (), проблема была та же.

Я предполагаю, что яУ меня есть некоторые проблемы с получением различных контекстов в моем классе, поэтому это одна часть глобальной проблемы.

Вторая проблема заключается в том, как правильно управлять событиями касания.

(Извините замои знания английского и JS, я стараюсь изо всех сил).

index.html: 

<canvas class="canvas-style" id="canvas" width="200" height="70"></canvas>

main.js: 

const canvas = new CanvasConstructor();

canvas.mouseConstructor();
canvas.touchConstructor();

/* I usually comment one of them to test each other */

canvas.js: 

class CanvasConstructor{
    constructor(){
        this.color = "#000";
        this.painting = false;
        this.started = false;
        this.width_brush = 2;
        this.canvas = $("#canvas");
        this.cursorX; this.cursorY;
        this.restoreCanvasArray = [];
        this.restoreCanvasIndex = 0;

        this.context = this.canvas[0].getContext('2d');

    this.context.lineJoin = 'round';
    this.context.lineCap = 'round';
}

    mouseConstructor(){
        var self = this;
        this.canvas.mousedown(function(e) {

            this.painting = true;

        this.cursorX = (e.pageX - this.offsetLeft); 
        this.cursorY = (e.pageY - this.offsetTop);  
    });

    this.canvas.mouseup(function() {
        this.painting = false;
        this.started = false;
    });

    this.canvas.mousemove(function(e) {

        if (this.painting) {

            this.cursorX = (e.pageX - this.offsetLeft) - 10;
            this.cursorY = (e.pageY - this.offsetTop) - 10; 

            self.drawLine(this.cursorX, this.cursorY);
        }
    });
    self.reset();
}

touchConstructor(){
    var self = this;

    this.canvas[0].addEventListener('touchstart', function(e) {
        e.preventDefault(); 
        this.painting = true;
        console.log("touchSTART!!");
        this.cursorX = (e.pageX - this.offsetLeft); 
        this.cursorY = (e.pageY - this.offsetTop);



    }, false);

    this.canvas[0].addEventListener('touchend', function(e) {
        e.preventDefault(); 

        this.painting = false;
        this.started = false;   

    }, false);

    this.canvas[0].addEventListener('touchmove', function(e) {
        if (this.painting) {
            e.preventDefault(); 

            this.cursorX = (e.pageX - this.offsetLeft); 
            this.cursorY = (e.pageY - this.offsetTop);

            self.drawLine(this.cursorX, this.cursorY);
        }
    }, false);

    self.reset();
}


    drawLine(cursorX, cursorY) {

        if (!this.started) {

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

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


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



    reset(){
        var self = this;
        $("#reset").click(function() {

        self.clear_canvas();

    });
    }
}

Когда вы касаетесь холста, вы получаете функции ontouchstart (), onctouchend () и ontouchmove (), но он не рисует, потому что я не могу получить фактическое положение касания.

Пожалуйста, объясните мне, как это сделать правильно.

1 Ответ

0 голосов
/ 12 июня 2019

Я обновил функцию touchConstructor следующим образом. 

touchConstructor(){

 var self = this;

 this.canvas[0].addEventListener('touchstart', function(e) {

    e.preventDefault(); 
    this.painting = true;
    console.log("touchSTART!!");



    var pageX = e.touches[0].pageX; //to get pageX value in touch devices
    var pageY = e.touches[0].pageY; //to get pageY value in touch devices  



    this.cursorX = (pageX - this.offsetLeft); 
    this.cursorY = (pageY - this.offsetTop);



}, false);

this.canvas[0].addEventListener('touchend', function(e) {
    e.preventDefault(); 

    this.painting = false;
    this.started = false;   

}, false);

this.canvas[0].addEventListener('touchmove', function(e) {
    if (this.painting) {
        e.preventDefault(); 



        var pageX = e.touches[0].pageX; //to get pageX value in touch devices
        var pageY = e.touches[0].pageY; //to get pageY value in touch devices  



        this.cursorX = (pageX - this.offsetLeft); 
        this.cursorY = (pageY - this.offsetTop);

        self.drawLine(this.cursorX, this.cursorY);
    }
}, false);

self.reset();
}
...