爲什麼touchmove不能在html canvas上觸發？

-1

我正在使用角度應用程序，其中用戶有一個畫布，並可以在該畫布上繪製矩形。爲什麼touchmove不能在html canvas上觸發？

我的touchstart和touchend正在發射，但touchmove不是。我不確定是否我不瞭解touchmove的工作原理。我假設它將相當於mousemove。

self.canvas.addEventListener('touchmove', (e) => { self.touchMove(e); }); 
    self.canvas.addEventListener('touchstart', (e) => { self.touchStart(e); }); // touch down event 
    self.canvas.addEventListener('touchend', (e) => { self.touchEnd(e); }); // 



    touchStart(e) { 
    e.preventDefault(); 
    const self = this; 
    const activeTag = self.TagService.activeTags[0]; 
    this.canvasState.doTouchStart(e, activeTag, (shape) => { 
     self.selection = shape; 
    }); 
    } 


    touchEnd(e) { 
    const self = this; 
    // console.log(this);//is the controller 
    const activeTag = self.TagService.activeTags[0]; 
    self.canvasState.doTouchEnd(e, activeTag, function doTouchUp(shape) { 
     self.selection = shape; 
     self.addShape(shape); 
     // console.log(self.shapes); 
    }); 
    } 

    touchmove(e) { 
    e.preventDefault(); 
    console.log("HERE HERE HERE"); 
    const self = this; 
    const activeTag = self.TagService.activeTags[0]; 
    this.canvasState.doTouchMove(e, activeTag, (shape) => { 
     let len = self.shapes.length; 
     self.addShape(shape); 
     let len2 = self.shapes.length; 
     if (len2 - len === 1) { 
     self.draw(); 
     self.shapes.splice(-1, 1); 
     } 
    }); 
    }

touchstart和touchend的工作，但觸摸移動永遠不會觸發。我永遠無法獲得控制檯輸出。

編輯：我將第一行更改爲touchmove，因爲touchMove和touchmove（打字錯誤），但仍然不觸發touchmove。另外，當我嘗試繪製某些東西時，我會收到Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.警告。這真的很奇怪，因爲我在一個非角度的應用程序中嘗試了同樣的事情（非常簡單的畫布交互），而且我沒有得到那個錯誤。它阻止我滾動，而是在畫布上畫東西。

來源

2016-08-09 welc0meToTheMachine

如果您檢查您的代碼，當你在這一行中添加監聽器：

self.canvas.addEventListener('touchmove', (e) => { self.touchMove(e); });

你調用該函數self.touchMove(e)，並在你聲明你的功能touchmove(e)下面的代碼更多，這是一個偉大的圖書館，它可以幫助你處理觸摸事件 Hammerjs

來源

2016-08-09 21:55:42

是的我改變它在兩個地方touchmove，但它仍然沒有射擊。我甚至把'self.canvas.addEventListener（'touchmove'，（e）=> {console.log（「hi」）; self.touchMove（e）;}）;'嗨不打印出來。 – welc0meToTheMachine

@ welc0meToTheMachine你如何測試你的代碼？ –

你是什麼意思？我只是試圖通過鼠標交互來模擬我已經擁有的事件，並且測試函數是否通過控制檯日誌和調試器語句來運行。我正在使用開發工具嘗試應用程序，並將顯示更改爲平板電腦/移動設備（兩個屏幕圖標） – welc0meToTheMachine

爲什麼touchmove不能在html canvas上觸發？

回答

相關問題