I’m creating a module that displays a body diagram and the EMS tech can click on different body parts to calculate total burn area on a victim.
I’m grabbing the coordinates on the javasscript canvas based off the (click) function on the canvas and it works fine in the ionic lab.
Once I deploy to android, the coordinates seem to be off to a point where it’s unusable. Is there a way to get consistent coordinates?
Can you share your code? like what do you do exactly today and what is the method you get coordinates.
There is a big difference between various coordinates available via events (clientX, pageX etc etc)
The whole code would be too much, but here’s the excerpt that includes how I’m getting the coordinates.
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-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>
</ion-content>
ts file excerpt
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;
}
I’m then checks the tempX,tempY against coordinates I’ve mapped of the actually pieces.
Quick question - why would you need to put ion-footer inside of ion-content? can’t you place footer right after ion-content?
Originally it was, but I was playing with it to see if it was throwing off the coordinates. I just didn’t bother updating the code back to the original state.
