Canvas Touch Event JS - PullRequest
Новая
       28

Canvas Touch Event JS

0 голосов
/ 11 октября 2019

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

class Canvas {
  constructor(emplacement, btnEffacer, btnCroix) {
    //btn pour effacer et afficher
    this.btnCroix = document.querySelector(".fermeture")
    this.btnEffacer = document.querySelector(btnEffacer);
    // emplacement du canvas
    this.canvas = document.querySelector(emplacement);
    this.cont = this.canvas.getContext("2d");
    //quelques variables
    this.signer = false;
    this.vide = true
    this.canvas.width = 190;
    this.canvas.height = 120;
    this.cont.lineWidth = 2;
    this.cont.strokeStyle = "#000";

    //les evenements
    //comencer a dessigner
    this.canvas.addEventListener("touchstart", this.touchstart.bind(this), false);
    this.canvas.addEventListener("touchmove", this.touchmove.bind(this), false);
    this.canvas.addEventListener("touchend", this.touchend.bind(this), false);

    this.canvas.addEventListener("mousedown", this.demarrer.bind(this));
    //arreter de dessigner
    this.canvas.addEventListener("mouseup", this.arreter.bind(this));
    //le trece du dessin
    this.canvas.addEventListener("mousemove", this.dessiner.bind(this));
    //effacer le dessin
    this.btnCroix.addEventListener("click", this.effacer.bind(this));
    this.btnEffacer.addEventListener("click", this.effacer.bind(this));
  }
  //les methodes
  touchstart(e) {
    e.preventDefault()
    const touche = e.touches[0]
    this.demarrer(e)
  }

  touchmove(e) {
    e.preventDefault()
    const touche = e.touches[0]
    this.dessiner(e)
  }

  touchend(e) {
    e.preventDefault()
    this.arreter(e)
  }
  demarrer(e) {
    this.signer = true;
    this.vide = false
    this.dessiner(e);
  }

  arreter(e) {
    this.signer = false;
    this.cont.beginPath();
  }

  dessiner(e) {
    if (!this.signer) return;
    this.cont.lineTo(e.offsetX, e.offsetY);
    this.cont.stroke();
    this.cont.beginPath();
    this.cont.moveTo(e.offsetX, e.offsetY);
  }

  effacer() {
    this.cont.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.vide = true
  }

Если вы можете объяснить мне, как это работает, и помочь мне с кодом, это будет здорово.

спасибо за вашу помощь

1 Ответ

0 голосов
/ 11 октября 2019

Похоже, что вы можете быть ключевым словом "вкл" до ваших сенсорных событий.

Следующие три строки в вашем коде: 

this.canvas.addEventListener("touchstart", this.touchstart.bind(this), false);
this.canvas.addEventListener("touchmove", this.touchmove.bind(this), false);
this.canvas.addEventListener("touchend", this.touchend.bind(this), false);

Фактически должны быть: 

this.canvas.addEventListener("ontouchstart", this.touchstart.bind(this), false);
this.canvas.addEventListener("ontouchmove", this.touchmove.bind(this), false);
this.canvas.addEventListener("ontouchend", this.touchend.bind(this), false);

https://www.w3schools.com/jsref/obj_touchevent.asp

...