问题描述

通过子组件的点击事件获取点击位置的绝对坐标后，如何将这些坐标转换为相对于父组件的相对坐标？

背景知识

componentUtils.getRectangleById：根据组件 ID 获取组件实例对象，并通过组件实例对象将获取到的坐标和大小返回给开发者。组件的坐标指的是组件左上角顶点的坐标。

onAreaChange 回调在组件区域发生变化时触发。它返回变化后目标元素的宽度和高度，以及目标元素相对于父元素和页面左上角的坐标。

解决方案

方案一：使用 componentUtils.getRectangleById 获取的 localOffset 表示子组件在父组件中的坐标。从 onTouch 事件获取的 x、y 坐标表示触摸点在子组件中的坐标。将两者相加，即可得到触摸点在父组件中的坐标。完整代码如下：

@
Entry
@
Component
struct
Index
{
@
State
startXIn
:
number
=
0
;
@
State
startYIn
:
number
=
0
;
build
()
{
Column
()
{
Column
()
{
Image
(
$r
(
'
app.media.background
'
))
.
id
(
'
123456
'
)
.
width
(
150
)
.
height
(
200
)
.
onTouch
((
event
)
=>
{
let
modePosition
=
this
.
getUIContext
().
getComponentUtils
().
getRectangleById
(
'
123456
'
)
// Component position relative to its parent
let
imageX
=
this
.
getUIContext
().
px2vp
(
modePosition
.
localOffset
.
x
)
let
imageY
=
this
.
getUIContext
().
px2vp
(
modePosition
.
localOffset
.
y
)
console
.
info
(
'
localOffset is
'
,
`
${
imageX
}
`
,
`
${
imageY
}
`
)
// Touch offset within the child component
let
startX
=
event
.
touches
[
0
].
x
let
startY
=
event
.
touches
[
0
].
y
console
.
info
(
`touches are`
,
`
${
startX
}
`
,
`
${
startY
}
`
)
// Convert coordinates to be relative to the parent component
this
.
startXIn
=
startX
+
imageX
;
this
.
startYIn
=
startY
+
imageY
;
})
}
.
width
(
200
)
.
height
(
250
)
.
backgroundColor
(
'
#61CFBE
'
)
.
justifyContent
(
FlexAlign
.
Center
)
Text
(
`X coordinate relative to parent:
${
this
.
startXIn
}
`
)
Text
(
`Y coordinate relative to parent:
${
this
.
startYIn
}
`
)
}
.
height
(
'
100%
'
)
.
width
(
'
100%
'
)
}
}

方案二：使用 onAreaChange，可以获取子组件相对于父组件的坐标 offsetX 和 offsetY。ClickEvent 中的 x 和 y 值表示点击在子组件中的坐标。将这两组坐标相加，即可得到触摸点在父组件中的坐标。完整代码如下：

@
Entry
@
Component
struct
Index2
{
@
State
startXIn
:
number
=
0
;
@
State
startYIn
:
number
=
0
;
@
State
offsetX
:
number
=
0
@
State
offsetY
:
number
=
0
build
()
{
Column
()
{
Column
()
{
Image
(
$r
(
'
app.media.background
'
))
.
width
(
150
)
.
height
(
200
)
.
onAreaChange
((
oldValue
:
Area
,
newValue
:
Area
)
=>
{
this
.
offsetX
=
Number
(
newValue
.
position
.
x
)
this
.
offsetY
=
Number
(
newValue
.
position
.
y
)
})
.
onClick
((
event
?:
ClickEvent
)
=>
{
if
(
event
)
{
let
startX
=
event
.
x
let
startY
=
event
.
y
console
.
info
(
`touches are`
,
`
${
startX
}
`
,
`
${
startY
}
`
)
this
.
startXIn
=
startX
+
this
.
offsetX
;
this
.
startYIn
=
startY
+
this
.
offsetY
;
}
})
}
.
width
(
200
)
.
height
(
250
)
.
backgroundColor
(
'
#61CFBE
'
)
.
justifyContent
(
FlexAlign
.
Center
)
Text
(
`X coordinate relative to parent:
${
this
.
startXIn
}
`
)
Text
(
`Y coordinate relative to parent:
${
this
.
startYIn
}
`
)
}
.
height
(
'
100%
'
)
.
width
(
'
100%
'
)
}
}

两者的实现思路相同，只是使用的方法不同。都是将点击位置在子组件中的坐标与子组件在父组件中的坐标相加，从而得到点击位置相对于父组件的坐标。

代码运行效果图

相关文档或链接

https://developer.huawei.com/consumer/en/doc/harmonyos-references/arkts-apis-uicontext-componentutils#getrectanglebyid

https://developer.huawei.com/consumer/en/doc/harmonyos-references/ts-universal-component-area-change-event#onareachange

作者：Recep Sadullah Yegin

转载声明：本文为转载整理，原文版权归原作者及原站点所有。

原文来源：DEV ArkTS Feed

原创地址：https://dev.to/harmonyos/convert-the-absolute-coordinates-in-the-click-event-to-relative-coordinates-2oeo