HarmonyOS 鸿蒙Next openharmony实现点击屏幕就能跳出弹窗从而显示点击位置的坐标

HarmonyOS 鸿蒙Next openharmony实现点击屏幕就能跳出弹窗从而显示点击位置的坐标

openharmony实现点击屏幕就能跳出弹窗从而显示点击位置的坐标，一直点击的不放手的话弹窗就一直显示屏幕坐标

5 回复 
简单写了个警告弹框的，点击一下出弹框，再点一下弹框消失
@Entry
@Componentstruct
TestClick {
  build(){
    Column(){
    }
    .height('100%')
    .width('100%')
    .onClick((event?:ClickEvent)=>{
      console.info('鼠标点击事件坐标')
      console.info('X' + event.x)
      console.info('Y' + event.y)
      AlertDialog.show({
        title:'鼠标点击事件坐标',
        message:'x坐标 ==> ' + event.screenX + '\n y坐标 ==> ' + event.screenY,
      })
    })
  }
}

更多关于HarmonyOS 鸿蒙Next openharmony实现点击屏幕就能跳出弹窗从而显示点击位置的坐标的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的谢谢，大佬指点，

我感觉要是能做一个绘画板一样的界面，然后再把上面的点的坐标显示出来就更好了，

@Entry
@Componentstruct
TestClick {
  @State customPopup: boolean = false
  @State x: number = 0
  @State y: number = 0
  build() {
    Column() {
      Column(){
        Text('x==' + this.x)
        Text('y==' + this.y)
      }
      .width(200).height(50).padding(5)
    }
    .backgroundColor(Color.Orange)
    .height('50%')
    .width('50%')
    .onMouse((event?: MouseEvent) => {
      this.x = event.screenX
      this.y = event.screenY
      console.info('mouse  event ' +'x ==> '+ this.x + ' -- y==> '+ this.y )
    })
    .onHover((event) =>{
      this.x = undefined
      this.y = undefined
    })
  }

在HarmonyOS（鸿蒙Next）或OpenHarmony中，实现点击屏幕跳出弹窗并显示点击位置的坐标，可以通过监听屏幕点击事件并获取点击坐标来实现。首先，使用onTouchEvent方法监听屏幕点击事件，获取点击的x和y坐标。然后，使用Dialog组件创建一个弹窗，并将获取的坐标显示在弹窗中。以下是简要的实现步骤：

  1. 监听屏幕点击事件： 在UI组件的onTouchEvent方法中监听屏幕点击事件，获取点击的x和y坐标。

  2. 创建弹窗： 使用Dialog组件创建一个弹窗，并在弹窗中显示获取的点击坐标。

  3. 显示坐标： 将获取的x和y坐标作为字符串显示在弹窗的TextView或其他UI组件中。

示例代码如下：

import { Dialog, Text, TouchEvent } from '@ohos.arkui';

class MainPage {
  private dialog: Dialog = new Dialog();

  onTouchEvent(event: TouchEvent) {
    const x = event.getX();
    const y = event.getY();
    this.showCoordinates(x, y);
  }

  showCoordinates(x: number, y: number) {
    const content = \`点击位置：(\${x}, \${y})\`;
    this.dialog.setContent(new Text({ text: content }));
    this.dialog.show();
  }
}

这段代码监听屏幕点击事件，获取点击坐标，并在弹窗中显示坐标信息。

回到顶部