HarmonyOS 鸿蒙Next openharmony怎么做一个绘画板一样的界面，然后把上面手触碰过的点的坐标显示出来

HarmonyOS 鸿蒙Next openharmony怎么做一个绘画板一样的界面，然后把上面手触碰过的点的坐标显示出来

就是在这个基础上把这个界面做成一个绘画板，然后手触摸过的地方的坐标就会显示出来，再在这个基础上加个清屏或者回到上一步就更好了

5 回复

可以参考
https://developer.huawei.com/consumer/cn/forum/topic/0203718600132550166?fid=0101587866109860105

更多关于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('100%') .width('100%') .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 = 0 this.y = 0 }) }

我触摸之前改出来了，就是想把触摸的轨迹显示出来，用画布组件结果和我预想有点不一样，画布组件是从起点到终点的时候画线才会显示出来，不是实时的，

在HarmonyOS中实现一个绘画板界面并显示手触碰过的点的坐标，可以通过以下步骤完成：

  1. 创建自定义组件：使用Canvas组件作为绘画板的基础，Canvas是鸿蒙中用于绘制图形的核心组件。

  2. 监听触摸事件：通过onTouchEvent方法监听用户的触摸事件，获取触摸点的坐标。鸿蒙提供了TouchEvent对象，可以从中获取x和y坐标。

  3. 绘制触摸点：在Canvas上使用Path或Point类来绘制用户触摸的点。可以使用Canvas的drawPath或drawPoint方法来实现。

  4. 显示坐标：可以在界面中添加一个Text组件，用于实时显示触摸点的坐标。每次触摸事件触发时，更新Text组件的内容。

  5. 代码示例：

import { Canvas, TouchEvent, Path, Text } from '@ohos.graphics';

class DrawingBoard extends Canvas {
  private path: Path = new Path();
  private text: Text = new Text();

  constructor() {
    super();
    this.onTouchEvent(this.handleTouch);
  }

  private handleTouch(event: TouchEvent): void {
    const x = event.getX();
    const y = event.getY();
    this.path.moveTo(x, y);
    this.drawPath(this.path);
    this.text.setText(`X: ${x}, Y: ${y}`);
  }
}
  1. 布局文件：在布局文件中将Canvas和Text组件进行布局，确保绘画板和坐标显示区域在界面上正确显示。

通过以上步骤，可以在鸿蒙Next或OpenHarmony中实现一个简单的绘画板，并显示用户触摸点的坐标。

回到顶部