在9角移动平台上捕获签名

Question

我是新的角，我需要帮助，以实现一个签名捕获在角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'), fromEvent(canvasEl, 'mouseleave'), fromEvent(canvasEl, 'touchend'), fromEvent(canvasEl, 'touchcancel'),);
  const mouseMove = merge(fromEvent(canvasEl, 'mousemove'), fromEvent(canvasEl, '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);
    });
}

Answer 1

费哈多应该因为张贴这个答案而得到表扬，谢谢！

试用ngx-signaturepad: npmjs.com/package/ngx-signaturepad - Ferhado 8月20日0:35