HarmonyOS 鸿蒙Next 如何点击CanvasRenderingContext2D 绘制的文本fillText

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

HarmonyOS 鸿蒙Next 如何点击CanvasRenderingContext2D 绘制的文本fillText

// xxx.ets
@Entry
@Component
struct FillText {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() =>{
          this.context.font = '30px sans-serif'
          this.context.fillText("Hello World!", 120, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

想要点击用CanvasRenderingContext2D的方法fillText绘制的文本，请问如何操作？有什么属性或方法吗？ 当然在绘制的文本的地方另外添加一个text组件点击是一种比较笨拙的方法。CanvasRenderingContext2D或Canvas有没有其他更好的方法或属性呢？

Harmonyos Next教程
2 回复

在Canvas中绘制的文字上设置点击事件，可以试试以下步骤进行：
1.使用drawTextBlob接口绘制文字：
drawTextBlob(blob: TextBlob, x: number, y: number): void：用于在指定位置绘制一段文字。
确保在绘制文字时记录下每个文字的位置信息。
2.添加点击事件的监听：
使用addWatcher接口添加点击事件的监听。
addWatcher(watcher: Watcher): AppEventPackageHolder：用于添加应用事件观察者，以订阅应用事件。
通过获取每个文字的位置信息，将点击事件绑定到相应的监听器上。
3.处理点击事件：
在监听器中，处理用户点击的文字。可以通过获取点击事件的位置信息，判断用户点击的是哪个文字，并执行相应的处理逻辑。
具体步骤如下：
绘制文字：使用drawTextBlob接口在Canvas上绘制文字，并记录下每个文字的位置信息。
添加监听器：使用addWatcher接口为每个文字的位置信息添加点击事件的监听器。
处理点击事件：在监听器中，通过获取点击事件的位置信息，判断用户点击的是哪个文字，并执行相应的处理逻辑。

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-graphics-drawing-V5#drawtextblob

在HarmonyOS鸿蒙Next环境中，CanvasRenderingContext2D的fillText方法用于在画布上绘制填充文本。然而，fillText方法本身并不提供直接点击文本的功能，因为绘制到画布上的文本已经是图像的一部分，无法像HTML元素那样监听点击事件。

若要实现点击Canvas上绘制的文本的功能，通常需要通过以下步骤进行：

  1. 记录文本位置：在调用fillText时，记录文本的起始位置（x, y坐标）及其尺寸（宽度和高度）。

  2. 检测点击位置：监听Canvas的点击事件，通过事件对象获取点击的坐标。

  3. 判断点击位置：将点击的坐标与记录的文本位置进行比较，判断点击是否落在文本区域内。

  4. 执行相应操作：如果点击落在文本区域内，则执行相应的操作，如弹出提示、跳转页面等。

这种方法需要开发者自行管理文本的位置和尺寸信息，以及实现点击检测逻辑。由于fillText不直接支持点击事件，这种实现方式相对复杂，但能够满足在Canvas上实现文本点击功能的需求。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部