Capture Touchevent from the device to use it on the screen

Asked

Viewed 43 times

0

I have the following Javascript code, but it does not capture touch commands, anyone knows why? If I’m using some incorrect syntax or something? 

  private capturarEventoTouch(componente: HTMLCanvasElement) {
    // Mousedown = Clique esquerdo
    fromEvent(componente, 'touchstart')
      .pipe(
        switchMap((e) => {
          return fromEvent(componente, 'touchmove')
            .pipe(
              // Mouseup = Release do clique esquerdo
              takeUntil(fromEvent(componente, 'touchend')),
              // Mouseleave = Quando o mouse sai da área do Componente
              takeUntil(fromEvent(componente, 'touchleave')),
              pairwise()
            );
        })
      )
      .subscribe((res: [TouchEvent, TouchEvent]) => {
        const rect = componente.getBoundingClientRect();

        const posicaoAnterior = {
          x: res[0].touches[0].clientX - rect.left,
          y: res[0].touches[0].clientY - rect.top
        };

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

        this.desenharNoCanvas(posicaoAnterior, posicaoAtual);
      });
  }

javascript angularjs angular
  • 1

    if you put a console log it doesn’t even enter the subscribe??

  • Edu he enters the subscribe, but now says clientX is Undefined ...

  • 1

    res is Undefined too? Tries to generate a stackblitz to be easier to answer

1 answer

0

I found the bug need to be using only index [1] only in res; And was using in touches also the corrected code was like this:

const posicaoAnterior = {
  x: res[0].touches[0].clientX - rect.left,
  y: res[0].touches[0].clientY - rect.top
};

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

Browser other questions tagged javascript angularjs angular

You are not signed in. Login or sign up in order to post.