HarmonyOS 鸿蒙Next 自定义绘制UI组件

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义绘制UI组件 我们之前有一些自定义UI组件，是通过Canvas创建画布，画笔，来自定义绘制的。

比如以下是我们的一些Android代码

override fun onDraw(canvas: Canvas?) {
  super.onDraw(canvas)
  drawBackground(canvas)
  drawBottomText(canvas)
  drawClickPoint(canvas)
}

在系统View的onDraw方法中去自定义绘制

通过 canvas?.drawRoundRect， canvas?.drawText， canvas?.drawLine 等方法完成绘制

鸿蒙有类似的API实现吗？


更多关于HarmonyOS 鸿蒙Next 自定义绘制UI组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

可以参考画布组件组件：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-canvas-canvas-V5

使用画布绘制自定义图形：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-drawing-customization-on-canvas-V5

这个demo也可以参考一下

@Entry
@Component
struct DrawBankCom {
  @State paintSize: number = 5 // 当前画笔大小
  @State paintColor: Color = Color.Pink // 当前画笔颜色

  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  tempPath: Path2D = new Path2D()
  @State pathArray: Array<Path2D> = [] // 所有画图路径信息
  @State text: string = ''
  @State eventType: string = ''

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Canvas(this.canvasContext)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.canvasContext.stroke(this.tempPath)
          for (let index = 0; index < this.pathArray.length; index++) {
            this.canvasContext.stroke(this.pathArray[index])
          }
        })
        .onTouch((event?: TouchEvent) => {
          if (event) {
            if (event.type === TouchType.Down) {
              this.eventType = 'Down'
              this.canvasContext.lineWidth = this.paintSize
              this.canvasContext.beginPath()
              this.tempPath = new Path2D()
              this.pathArray.push(this.tempPath)
              this.tempPath.moveTo(event.touches[0].x, event.touches[0].y)
            }
            if (event.type === TouchType.Up) {
              this.eventType = 'Up'
            }
            if (event.type === TouchType.Move) {
              this.eventType = 'Move'
              this.tempPath.lineTo(event.touches[0].x, event.touches[0].y)
              // 描边
              // this.canvasContext.strokeStyle = this.paintColor;
              // this.canvasContext.stroke(this.tempPath)

              // 填充
              this.canvasContext.fillStyle = this.paintColor;
              this.canvasContext.fill(this.tempPath)
            }

            this.text = 'TouchType:' + this.eventType + '\n touch point and touch element:\nx: '
              + event.touches[0].x + '\ny: ' + event.touches[0].y + '\nwidth:'
              + event.target.area.width + '\nheight:' + event.target.area.height + '\npathArray size:' + this.pathArray.length

          }
        })

      Text(this.text)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 自定义绘制UI组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以参考一下这里的API和示例

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-canvas-canvas-V5

在HarmonyOS鸿蒙Next系统中，自定义绘制UI组件通常涉及使用ArkUI框架中的Canvas API或自定义组件来实现。以下是如何进行自定义绘制的简要说明：

使用Canvas API：

  • 在ArkUI的页面中，可以通过重写onDraw方法或类似的生命周期回调方法，获取到Canvas对象。
  • 使用Canvas提供的绘图方法（如drawRect、drawLine、drawText等）来绘制所需的UI元素。
  • 可以设置绘制参数（如颜色、线条粗细、字体大小等）来满足具体需求。

自定义组件：

  • 创建一个新的自定义组件类，继承自现有的组件基类（如Component）。
  • 在自定义组件类中，实现绘制逻辑，通常是通过重写onDraw方法。
  • 将自定义组件注册到全局组件库中，以便在页面中引用和使用。

注意事项：

  • 确保在绘制过程中正确处理资源释放和性能优化问题。
  • 遵循HarmonyOS的UI设计规范，确保自定义组件的视觉效果和交互体验符合用户期望。

如果在使用HarmonyOS鸿蒙Next系统进行自定义绘制UI组件时遇到问题，建议检查Canvas API的使用是否正确，以及自定义组件的注册和引用是否无误。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部