Angular 9中的移动设备上的签名捕获

问题描述

我是Angular的新手，我需要帮助来使用Typescript在Angular 9中实现签名捕获。这必须在移动设备和计算机上工作。

我看了这个例子，但是它不支持触摸 https://stackblitz.com/edit/angular-rxjs-canvas?file=src%2Fapp%2Fcanvas.component.ts

我为此修改了CaptureEvents方法，但是它不起作用-有任何想法吗？

private captureEvents(canvasEl: HTMLCanvasElement) {
  const mouseDown = merge(fromEvent(canvasEl,'mousedown'),fromEvent(canvasEl,'touchstart'),);
  const mouseUp = merge(fromEvent(canvasEl,'mouseup'),'mouseleave'),'touchend'),'touchcancel'),);
  const mouseMove = merge(fromEvent(canvasEl,'mousemove'),'touchmove'),);

  console.log(canvasEl);

  fromEvent(canvasEl,'touchstart')
    .pipe(
      switchMap((e) => {
        // after a mouse down,we'll record all mouse moves
        return fromEvent(canvasEl,'touchmove')
          .pipe(
            // we'll stop (and unsubscribe) once the user releases the mouse
            // this will trigger a 'mouseup' event    
            takeUntil(fromEvent(canvasEl,'touchend')),// we'll also stop (and unsubscribe) once the mouse leaves the canvas (mouseleave event)
            takeUntil(fromEvent(canvasEl,'touchcancel')),// pairwise lets us get the previous value to draw a line from
            // the previous point to the current point    
            pairwise()
          )
      })
    )
    .subscribe((res: [MouseEvent,MouseEvent]) => {
      const rect = canvasEl.getBoundingClientRect();

      //previous and current position with the offset
      const prevPos = {
        x: res[0].clientX - rect.left,y: res[0].clientY - rect.top
      };

      const currentPos = {
        x: res[1].clientX - rect.left,y: res[1].clientY - rect.top
      };

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

解决方法

费哈多（Ferhado）因发布此答案而获得荣誉，谢谢！

尝试ngx-signaturepad：npmjs.com/package/ngx-signaturepad – Ferhado Aug 20在0:35