HarmonyOS鸿蒙Next中ArkUI如何自定义绘制组件

HarmonyOS鸿蒙Next中ArkUI如何自定义绘制组件 我们之前有一些自定义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中ArkUI如何自定义绘制组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

可以参考画布组件组件：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中ArkUI如何自定义绘制组件的实战系列教程也可以访问 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中，使用ArkUI自定义绘制组件主要通过Canvas和CustomComponent实现。Canvas提供了2D绘图能力，开发者可以使用它来绘制图形、文本、图像等。CustomComponent则允许开发者自定义组件的布局和绘制逻辑。

  1. 使用Canvas绘制：

    • 在ArkUI中，Canvas组件用于绘制2D图形。开发者可以通过CanvasRenderingContext2D接口进行绘制操作。
    • 例如，可以通过CanvasRenderingContext2D的fillRect方法绘制矩形，使用strokeText方法绘制文本。
    • Canvas组件支持事件处理，开发者可以监听触摸事件来实现交互。

  2. 自定义组件：

    • 通过继承Component类，开发者可以创建自定义组件。在Component的onDraw方法中，可以使用Canvas进行绘制。
    • 自定义组件可以定义自己的属性、状态和方法，实现复杂的UI逻辑。
    • 例如，可以创建一个自定义的CircleComponent，在onDraw方法中使用Canvas绘制圆形。

  3. 组合使用：

    • 开发者可以将Canvas和自定义组件结合使用，实现更复杂的UI效果。
    • 例如，可以在自定义组件的布局中使用多个Canvas组件，分别绘制不同的图形。

  4. 性能优化：

    • 在进行自定义绘制时，需要注意性能优化，避免不必要的重绘操作。
    • 可以使用Canvas的save和restore方法保存和恢复绘图状态，减少重复设置。

通过以上方式，开发者可以在HarmonyOS鸿蒙Next中灵活地自定义绘制组件，实现丰富的UI效果。

在HarmonyOS鸿蒙Next中，使用ArkUI自定义绘制组件可以通过CanvasRenderingContext2D实现。首先，创建一个自定义组件并重写onDraw方法，然后在该方法中使用CanvasRenderingContext2D进行绘制。例如，可以通过context.fillRect绘制矩形，context.strokeText绘制文本等。最后，将自定义组件添加到页面中即可。这种方式可以灵活实现各种复杂的UI效果。

回到顶部