HarmonyOS 鸿蒙Next 获取组件图形变换之后的真实坐标

发布于 1周前 作者 htzhanglong 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 获取组件图形变换之后的真实坐标

使用componentUtils.getRectangleById(‘item1’)无法直接获取item1的真实坐标，只能获取组件大小、位置、平移缩放旋转及仿射矩阵属性信息，是否有方法能够获取或者计算item1旋转之后的真实坐标

//# 示例代码如下
build() {
NavDestination() {
RelativeContainer() {
Circle()
.width(50)
.height(50)
.fill(Color.Green)
.id('center')
.alignRules({
'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
'center': { 'anchor': '__container__', 'align': VerticalAlign.Center }
})

Text('1')
.width(50)
.height(50)
.backgroundColor(Color.Green)
.alignRules({
'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top }
})
.id('item1')

RelativeContainer() {
Text('2')
.width(50)
.height(50)
.backgroundColor(Color.Yellow)
.alignRules({
'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top }
})
.rotate({
angle: '-90deg'
})
.id('item2')
}.width('100%').height('100%')
.rotate({
angle: '90deg'
})
.hitTestBehavior(HitTestMode.None)

RelativeContainer() {
Text('3')
.width(50)
.height(50)
.backgroundColor(Color.Green)
.alignRules({
'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top }
})
.rotate({
angle: '-180deg'
})
}.width('100%').height('100%')
.rotate({
angle: '180deg'
})
.hitTestBehavior(HitTestMode.None)

RelativeContainer() {
Text('4')
.width(50)
.height(50)
.backgroundColor(Color.Green)
.alignRules({
'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top }
})
.rotate({
angle: '-270deg'
})
}.width('100%').height('100%')
.rotate({
angle: '270deg'
})
.hitTestBehavior(HitTestMode.None)

}.width(300).height(300)
.backgroundColor(Color.Red)
.onAppear(() => {
setTimeout(() => {
this.runTest();
}, 1000);
})
.hitTestBehavior(HitTestMode.None)
}
}
Harmonyos Next教程
2 回复
参考如下demo，其中设置旋转角度rotate不影响screenOffset 
import { componentUtils } from '@kit.ArkUI'

@Entry
@Component
struct Index {
build() {
Row() {
RelativeContainer() {
Row(){Text(‘row1’)}
.width(50).height(50)
.backgroundColor("#FF3333")
.alignRules({
top: {anchor: “container”, align: VerticalAlign.Top},
left: {anchor: “container”, align: HorizontalAlign.Center}
})
.margin({left: -25})
.id(“row1”)
.onClick(()=>{
let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById(“row1”);
console.log(‘坐标11’);
console.log(JSON.stringify(modePosition))
})
Row(){Text(‘row2’)}
.width(50).height(50)
.backgroundColor("#FFCC00")
.alignRules({
top: {anchor: “container”, align: VerticalAlign.Center},
right: {anchor: “container”, align: HorizontalAlign.End}
})
.rotate({
angle: ‘-90deg’
})
.onClick(()=>{
let modePosition:componentUtils.ComponentInfo = componentUtils.getRectangleById(“row2”);
console.log(‘坐标22’);
console.log(JSON.stringify(modePosition))
})
.margin({top:-25})
.id(“row2”)


    Row(){Text(<span class="hljs-string">'row3'</span>)}.justifyContent(FlexAlign.Center)
    .width(<span class="hljs-number">50</span>).height(<span class="hljs-number">50</span>)
    .backgroundColor(<span class="hljs-string">"#FF6633"</span>)
    .alignRules({
      top: {anchor: <span class="hljs-string">"row2"</span>, align: VerticalAlign.Top},
      left: {anchor: <span class="hljs-string">"__container__"</span>, align: HorizontalAlign.Center},
      <span class="hljs-comment">// right: {anchor: "row2", align: HorizontalAlign.Start}</span>
    })
    .margin({left: -<span class="hljs-number">25</span>})
    .id(<span class="hljs-string">"row3"</span>)

    Row(){Text(<span class="hljs-string">'row4'</span>)}
    .width(<span class="hljs-number">50</span>).height(<span class="hljs-number">50</span>)
    .backgroundColor(<span class="hljs-string">"#FF9966"</span>)
    .alignRules({
      <span class="hljs-comment">// top: {anchor: "__container__", align: VerticalAlign.Bottom},</span>
      bottom: {anchor: <span class="hljs-string">"__container__"</span>, align: VerticalAlign.Bottom},
      left: {anchor: <span class="hljs-string">"__container__"</span>, align: HorizontalAlign.Center},
      <span class="hljs-comment">// right: {anchor: "row1", align: HorizontalAlign.End}</span>
    })
    .margin({left: -<span class="hljs-number">25</span>})
    .id(<span class="hljs-string">"row4"</span>)

    Row(){Text(<span class="hljs-string">'row5'</span>)}
    .width(<span class="hljs-number">50</span>).height(<span class="hljs-number">50</span>)
    .backgroundColor(<span class="hljs-string">"#FF66FF"</span>)
    .alignRules({
      top: {anchor: <span class="hljs-string">"__container__"</span>, align: VerticalAlign.Center},
      <span class="hljs-comment">// bottom: {anchor: "__container__", align: VerticalAlign.Bottom},</span>
      left: {anchor: <span class="hljs-string">"__container__"</span>, align: HorizontalAlign.Start},
      <span class="hljs-comment">// right: {anchor: "__container__", align: HorizontalAlign.End}</span>
    })
    .margin({top: -<span class="hljs-number">25</span>})
    .id(<span class="hljs-string">"row5"</span>)
  }
  .width(<span class="hljs-number">300</span>).height(<span class="hljs-number">300</span>)
  <span class="hljs-comment">// .padding({left: 10,right: 10})</span>
  .border({width:<span class="hljs-number">2</span>, color: <span class="hljs-string">"#6699FF"</span>})
}
.height(<span class="hljs-string">'100%'</span>)

}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

在HarmonyOS（鸿蒙）系统中，获取组件图形变换后的真实坐标涉及到对组件的视图树和变换矩阵的理解。以下是一个简要的实现思路：

  1. 获取组件的视图对象：首先，你需要获取到目标组件的视图对象（如Component或View）。

  2. 获取变换矩阵：组件的图形变换（如旋转、缩放、平移）通常由变换矩阵（如Matrix）表示。你需要获取这个变换矩阵。

  3. 计算真实坐标：利用组件的原始位置和变换矩阵，你可以计算出变换后的真实坐标。这通常涉及到矩阵运算，将原始坐标（通常是组件的左上角或中心点）乘以变换矩阵。

  4. 考虑父视图的影响：如果组件有父视图，并且父视图也进行了变换，你需要将父视图的变换也考虑在内。这通常意味着你需要将组件的变换矩阵与父视图的变换矩阵相乘。

  5. 应用API：HarmonyOS提供了一系列API来操作视图和变换矩阵，确保你使用了正确的API来获取和计算这些值。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。在这个页面上，你可以找到更详细的文档、示例代码以及客服支持。

回到顶部