觸摸事件僅在 canvas 上繪制時發生一次

Question

基本上，我必須在基於 Angular 的 web 應用程序中繪制 canvas 7. 鼠標繪圖工作正常，而觸摸部分僅適用於第一筆划，然后再也不會繪制。

我嘗試過的是按照一些指南將事件綁定到鼠標事件上，從字面上復制粘貼代碼並僅修改變量名稱。 我目前只能在 Chromium IPadPro 模擬器上測試觸摸事件。

preventdefault 和 stopimmediatepropagation 調用是否存在沒有區別

fromEvent(canvasE1, 'touchstart').pipe(switchMap(() => {
        return fromEvent(canvasE1, 'touchmove').pipe(
          takeUntil(fromEvent(canvasE1, 'touchend')),
          takeUntil(fromEvent(canvasE1, 'touchcancel')),
          pairwise()
        );
      })).subscribe((res: [TouchEvent, TouchEvent]) => {
        const rect = canvasE1.getBoundingClientRect();

        const prevPos = {
          x: res[0].touches[0].clientX - rect.left,
          y: res[0].touches[0].clientY - rect.top
        };
        res[0].preventDefault();
        res[0].stopImmediatePropagation();

        const currentPos = {
          x: res[1].touches[0].clientX - rect.left,
          y: res[1].touches[0].clientY - rect.top
        };
        res[1].preventDefault();
        res[1].stopImmediatePropagation();

        this.drawOnCanvas(prevPos, currentPos);
      });

private drawOnCanvas(prevPos: { x: number, y: number }, currentPos: { x: number, y: number }) {

    if (!this.twoDimensionalContext) {
      return;
    }
    this.twoDimensionalContext.beginPath();

    if (prevPos) {
      this.twoDimensionalContext.moveTo(prevPos.x, prevPos.y);
      this.twoDimensionalContext.lineTo(currentPos.x, currentPos.y);
      this.twoDimensionalContext.stroke();
    }
  }

drawOnCanvas function 可以很好地處理鼠標事件，所以我認為這不是問題所在。 鼠標部分工作得很好，在檢測到觸摸設備時不會啟動。

Answer 1

事件preventDefault，你需要添加map到fromEvent，在takeUtil之后，例如，改變這個：

    return fromEvent(canvasE1, 'touchmove').pipe(
        takeUntil(fromEvent(canvasE1, 'touchend')),
        takeUntil(fromEvent(canvasE1, 'touchcancel')),
        pairwise()
     );

到

        return fromEvent(canvasE1, 'touchmove').pipe(
          takeUntil(fromEvent(canvasE1, 'touchend')),
          takeUntil(fromEvent(canvasE1, 'touchcancel')),
          map( (event) => {
              event.preventDefault();
              event.stopPropagation();
              return event; 
          }),
          pairwise()
        );