我怎樣才能在Nativescript圖像座標與Angular2

Question

我有一個形象在我nativescript（與Angular2）的應用程序，在這裏我想使圖像可點擊的不同部分，以顯示。例如人體圖像，我只想知道用戶點擊了哪個部分。

有什麼方法來創建圖像映射，就像HTML ???

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

Answer 1

使用(touch)事件您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.'); 
 
     } 
 
    } 
 
    } 
 
}