Comment puis-je obtenir les coordonnées de l'image dans Nativescript avec Angular2

Question

J'ai une image à afficher dans mon application nativescript (avec Angular2), où je veux rendre une partie de l'image cliquable. Par exemple une image de corps humain et je veux juste savoir quelle partie est cliquée par l'utilisateur.

Y a-t-il un moyen de créer une image-map comme le html ???

<CardView height="450" width="350" marginTop="10"> 
    <Image src="res://nerves" height="304" width="114" horizontalAlignment="center" verticalAlignment="center"></Image> 
</CardView> 

Answer 1

Utilisez l'événement (touch) obligatoire pour votre élément Image.

Voici un exemple qui imprime un message de console lorsque vous cliquez dans le quatrième quadrant de l'image.

import { 
 
    Component 
 
} from '@angular/core'; 
 
import * as platform from 'platform'; 
 
import { 
 
    TouchGestureEventData 
 
} from 'tns-core-modules/ui/gestures'; 
 

 
@Component({ 
 
    moduleId: module.id, 
 
    selector: 'your-component', 
 
    template: ` 
 
    <GridLayout> 
 
     <Image src="res://your_image" width="128" height="128" 
 
      (touch)="touchImage($event)" 
 
      verticalAlignment="middle" horizontalAlignment="center"></Image> 
 
    </GridLayout> 
 
    ` 
 
}) 
 
export class YourComponent { 
 
    touchImage(event: TouchGestureEventData) { 
 
    // This is the density of your screen, so we can divide the measured width/height by it. 
 
    const scale: number = platform.screen.mainScreen.scale; 
 
    if (event.action === 'down') { 
 
     // this is the point that the user just clicked on, expressed as x/y 
 
     // values between 0 and 1. 
 
     const point = { 
 
     y: event.getY()/(event.view.getMeasuredHeight()/scale), 
 
     x: event.getX()/(event.view.getMeasuredWidth()/scale) 
 
     }; 
 

 
     // add custom code to figure out if something significant was "hit" 
 
     if (point.x > 0.5 && point.y > 0.5) { 
 
     console.log('you clicked on the lower right part of the image.'); 
 
     } 
 
    } 
 
    } 
 
}