Question

我想尽一切办法使画布具有触感：我已经添加了touch事件和e.preventdefault（以避免滚动），但是画布上什么都没有出现（该方法在桌面上可以正常使用）。当我使用google chrome响应式工具进行测试时，画布上什么都没有出现（我只能看到该数组正在填充中……这是我的代码（我错过了什么？）：

class Canvas {    
    constructor(CanvasId){        
        this.CanvasId = CanvasId;    
        this.canvas = document.getElementById(this.CanvasId);
        this.enregistrer = document.getElementById(this.saveId);
        this.context = this.canvas.getContext("2d");        
        this.radius = 2;
        this.dragging = false;/*true when clic on mouse*/ 
        this.lineWidth = this.radius*2;
        this.initCanvas();
        this.initEvent();  
    }

initCanvas(){         
        this.context.clearRect(0, 0, 250, 250);/*canvas vierge*/
        this.context.lineWidth = this.lineWidth; 
}

colorForTouch(touch) {
      var id = touch.identifier;
      id = id.toString(16); // make it a hex digit
      return "#" + id + id + id;
    }
    
    ongoingTouchIndexById(idToFind) {
      for (var i=0; i<this.ongoingTouches.length; i++) {
        var id = this.ongoingTouches[i].identifier;        
        if (id == idToFind) {
          return i;
        }
      }
      return -1;    // not found
    }
    
    handleStart(e) {
      e.preventDefault();      
      var touches = evt.changedTouches;            
      for (var i=0; i< touches.length; i++) {
        this.ongoingTouches.push(touches[i]);
        var color = this.colorForTouch(touches[i]);
        this.context.fillStyle = color;
        
        this.context.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
        this.compteur++;
        this.enregistrer.disabled = false;
      }
    }
    
    handleMove(e) {
      e.preventDefault();      
      var touches = e.changedTouches;      
      this.context.lineWidth = 4;            
      for (var i=0; i<touches.length; i++) {
        var color = this.colorForTouch(touches[i]);
        var idx = this.ongoingTouchIndexById(touches[i].identifier);
        this.context.fillStyle = color;
        this.context.beginPath();
        this.context.moveTo(this.ongoingTouches[idx].pageX, this.ongoingTouches[idx].pageY);
        this.context.lineTo(touches[i].pageX, touches[i].pageY);
        this.context.closePath();
        this.context.stroke();
        this.ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
      }
    }    
    
    handleEnd(e) {
      e.preventDefault();      
      var touches = e.changedTouches;      
      this.context.lineWidth = 4;            
      for (var i=0; i<touches.length; i++) {
        var color = this.colorForTouch(touches[i]);
        var idx = this.ongoingTouchIndexById(touches[i].identifier);        
        this.context.fillStyle = color;
        this.context.beginPath();
        this.context.moveTo(this.ongoingTouches[i].pageX, this.ongoingTouches[i].pageY);
        this.context.lineTo(touches[i].pageX, touches[i].pageY);
        this.ongoingTouches.splice(i, 1);  // remove it; we're done
      }
    }

initEvent(){
        this.canvas.addEventListener("touchstart",this.handleStart, false);
        this.canvas.addEventListener("touchmove",this.handleMove, false);
        this.canvas.addEventListener("touchleave", this.handleEnd, false);
        this.canvas.addEventListener("touchend",this.handleEnd, false);        
    }

Answer 1

最后，我找到了一个简单的解决方案。这是我添加的代码：

    getTouchPosition(e) {
        
    var rect = this.canvas.getBoundingClientRect(e);
        return {
            x: (e.touches['0'].clientX - rect.left) * (this.canvas.width / rect.width),
            y: (e.touches['0'].clientY - rect.top) * (this.canvas.height / rect.height)
        }
    }
    
    handleStart(e){
        
      var touchesPosition = this.getTouchPosition(e);
      this.dragging = true;      
      this.context.moveTo(touchesPosition.x, touchesPosition.y);
      this.context.beginPath();
      e.preventDefault();
    }
    
    handleMove(e){
      var touchesPosition = this.getTouchPosition(e);
      this.context.lineTo(touchesPosition.x, touchesPosition.y)
      this.context.stroke();
      this.compteur++;
      e.preventDefault();        
    }
    
    handleEnd(e) {
        
      this.dragging = false; // Stop le tracÃ©
      e.preventDefault();
    }        
            
            
            
            
            this.canvas.addEventListener("touchstart",function(e){
            this.handleStart(e);
        }.bind(this));
        
        this.canvas.addEventListener("touchmove",function(e){
            this.handleMove(e);
            this.enregistrer.disabled = false;
        }.bind(this));
        
        this.canvas.addEventListener("touchend",function(e){
            this.handleEnd(e);
        }.bind(this));

希望它会有所帮助;）

Javascript：画布触摸事件

1 个答案: