Как получить точные и согласованные координаты от события клика на холсте? - PullRequest
Новая
       28

Как получить точные и согласованные координаты от события клика на холсте?

0 голосов
/ 11 июня 2019

Я создаю модуль, который отображает диаграмму тела, и техник EMS может щелкать по разным частям тела, чтобы рассчитать общую площадь ожога жертвы.

Я собираю координаты на холсте JavaScript на основе функции (щелчка) на холсте, и она отлично работает в ионной лаборатории.

После того, как я развернусь на Android, координаты, кажется, смещены в точку, где это невозможно использовать. Есть ли способ получить согласованные координаты?

Я пытался переместить вещи и оставить холст в статическом размере, но координаты все еще разные.

HTML-файл 

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/burntools"></ion-back-button>
    </ion-buttons>
    <ion-title>Adult Burn Calculator</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content no-bounce>
  <canvas #canvasEl width="{{this.canvasWd}}" height="400" (touchstart)="touchStart($event)" (touchend)="touchEnd($event)" (click)="clickIt($event)"></canvas>
</ion-content>
  <ion-footer class="fixedFooter">
    <ion-toolbar>
      <ion-buttons>
        <ion-button slot="start" (click)="switchSides('front')" color="{{this.frontColor}}">
          <ion-icon name="Body"></ion-icon>
          Front
        </ion-button>
        <span style="font-weight: 700;">Burn %: {{this.theScore}}</span>
        <ion-button (click)="switchSides('back')" color="{{this.backColor}}" slot="end">
          <ion-icon name="body"></ion-icon>
          Back
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-footer>

ts из обработчика кликов 

 clickIt(ev) {
    console.log('Click It');
    const canvasPosition = this.canvasElement.getBoundingClientRect();

    console.log('x', ev.clientX - canvasPosition.x);
    console.log('y', ev.clientY - canvasPosition.y);

    const tempX = ev.clientX - canvasPosition.x;
    const tempY = ev.clientY - canvasPosition.y;
}

Результаты в ионной лаборатории согласуются, и приложение работает, как и ожидалось. Как только я разверну его на своем устройстве Android, координаты будут значительно меньше.

...