Question

我正在创建一个显示人体图的模块，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设备上，坐标就会显着关闭。

如何从画布上的点击事件获取准确一致的坐标？

0 个答案: