NativeScript Angular - 在点击事件时获取 X 和 Y
Posted
技术标签:
【中文标题】NativeScript Angular - 在点击事件时获取 X 和 Y【英文标题】:NativeScript Angular - Get X and Y on tap event 【发布时间】:2018-01-04 09:05:58 【问题描述】:我正在做一个 Nativescript-Angular-App,但我遇到了问题。
用户必须点击图片上的正确位置。
我不明白如何获取简单点击的坐标。
我可以通过触摸手势 (TouchGestureEventData) 获取坐标,但它提供了信息流。我只想要一个数据。
GestureEventData 没有 GetX() 方法。 TouchGestureEventData 有 GetX() 方法,但我只想要第一次触摸。我尝试过触摸:
public onTouch(args: TouchGestureEventData)
console.log(args.getActivePointers()[0].getX());
但我得到的数据太多(每个动作)。
有没有一种方法可以通过简单的点击获得坐标?
谢谢!
【问题讨论】:
【参考方案1】:如果您只想获得单点触摸事件。您可以做的是检查事件操作是down
操作还是up
操作。例如,下面的代码只会为您获取触摸事件的 X 和 Y 坐标,并且每个触摸事件只会发生一次。
public onTouch(e: TouchGestureEventData)
if (e && e.action === 'down')
this.xCoord = e.getX();
this.yCoord = e.getY();
【讨论】:
这工作,谢谢!我发现了一个 hack(使用 tap 方法直接添加到 html 不可见元素上)但是这个解决方案更好。【参考方案2】:一直在研究这个问题,找到了ios中点击事件的方法:
onTap(e)
const loc = e.ios.locationInView(e.object.ios);
console.log("(x,y) in dp: " + loc.x + "," + loc.y);
我发现e.ios
是该点击事件的本机对象表示,并试图看看我能用它做什么,所以我使用了 Chrome DevTools,并开始输入e.ios.location
,并得到了locationInView()
自动完成.然后我在Apple's documentation 中搜索它,发现该函数将UIView
作为参数。所以我尝试了e.ios.locationInView(e.object);
并得到了一个异常,所以我记得UIView
是nativescript 的View
类的iOS 表示,所以我尝试了e.ios.locationInView(e.object.ios);
并得到了CGPoint
代表视图中的点击坐标。
请务必注意 loc.x
和 loc.y
以 dp
为单位。
对于 android,它要简单得多:
onTap(e)
const x = e.android.getX();
const y = e.android.getY();
console.log("(x,y) in pixels: " + x + "," + y);
重要的是要注意,在这种情况下,坐标以pixel
为单位,因此要将其转换为dp
,您首先必须在导入的位置import screen from "platform";
,然后才能获得dp
中的 x 坐标,您将:
e.android.getX() / screen.mainScreen.scale
【讨论】:
另外,如果你使用 TypeScript,e
的类型应该是 TouchGestureEventData
而不是 EventData
。以上是关于NativeScript Angular - 在点击事件时获取 X 和 Y的主要内容,如果未能解决你的问题,请参考以下文章
NativeScript/Angular - 如何导入全局样式?
透明 ActionBar:将 NativeScript 与 Angular 结合使用
如何让 Jest 正确转换 node_modules/@nativescript/core? Jest + NativeScript + Angular + Nx
在 Angular/Nativescript 中过滤 observable