Как я могу получить координату изображения в Nativescript с помощью Angular2

У меня есть изображение для отображения в моем приложении nativescript (с Angular2), где я хочу сделать другую часть изображения интерактивной. Например, изображение человеческого тела, и я просто хочу знать, какую часть нажимает пользователь.

Есть ли способ создать карту изображений так же, как html ???

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

введите описание изображения здесь


nativescript angular2-nativescript nativescript-angular
person Rahul Tiwari    schedule 29.09.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Используйте привязку события (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.');
      }
    }
  }
}

person justind    schedule 29.09.2017