CODEWITHSUNDEEP
angularsignatureangular9electronic-signature
TheJonz
TheJonz

Reputation: 414

Signature Capture on Mobile in Angular 9

I'm new to Angular and I need help to implement a Signature Capture in Angular 9 with Typescript. This has to work on a mobile device and a computer.

I've looked at this example but it doesn't support touch https://stackblitz.com/edit/angular-rxjs-canvas?file=src%2Fapp%2Fcanvas.component.ts

I modified the CaptureEvents method to this but it doesn't work - Any ideas?

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

Upvotes: 0

Views: 1593

Answers (1)

TheJonz
TheJonz

Reputation: 414

Ferhado should get credit for posting this answer, thanks!

Try ngx-signaturepad: npmjs.com/package/ngx-signaturepad – Ferhado Aug 20 at 0:35

Upvotes: 3

Related Questions