I have an Image to show in my nativescript(with Angular2) app, where I want to make different part of image clickable. For example a human body image and I just want to know which part is clicked by the user.
Is there any way to create image-map just like html???
<CardView height="450" width="350" marginTop="10">
<Image src="res://nerves" height="304" width="114" horizontalAlignment="center" verticalAlignment="center"></Image>
</CardView>
Use the (touch) event binding on your Image element.
Here's an example that prints a console message when you click in the fourth quadrant of the 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.');
}
}
}
}