触摸事件仅在 canvas 上绘制时发生一次

Question

Basically, i have to draw on a canvas in my web application based on Angular 7. Mouse drawing works just fine, while the touch part will work just for the first stroke and then never draws again.

What i have tried is binding the event on a mouse event following some guides, literally copy-pasting code and modifying just the variables names. I can currently only test the touch events on the Chromium IPadPro simulator.

the preventdefault and stopimmediatepropagation calls make no difference if there are there or not

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();
    }
  }

the drawOnCanvas function works perfectly fine with the mouse events, so i think that's not the problem. the Mouse part just works perfectly fine and doesn't fire up when the touch device is detected.

Answer 1

To event preventDefault, you need to add map into fromEvent, after takeUtil, for example, changing this:

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

to

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