HarmonyOS鸿蒙Next中DrawingRenderingContext的使用与优化

@Component
struct CanvasExample {
  private context: DrawingRenderingContext = new DrawingRenderingContext()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          let w = vp2px(this.context.size.width)
          let h = vp2px(this.context.size.height)
          let pen = new drawing.Pen()
          pen.setColor(255, 255, 0, 0)
          pen.setStrokeWidth(vp2px(3))

          this.context.canvas.attachPen(pen)
          this.context.canvas.drawCircle(w / 2, h / 2, Math.min(w, h) / 2)
          this.context.invalidate()
        })
    }
    .width('100%')
    .height('100%')
  }
}

上面这个代码画出来的圆是空心圆，大家知道怎么画实心圆吗

eggper 1楼

将Pen换成Brush即可

Pen：描边用的，相当于画了圆的轮廓

Brush：填充用的，相当于对圆内部进行填充

如果既要描边又要填充，就都创建attach进画布

let w = vp2px(this.context.size.width)
let h = vp2px(this.context.size.height)
// let pen = new drawing.Pen()
let brush = new drawing.Brush()
brush.setColor(255, 255, 0, 0)
// pen.setStrokeWidth(vp2px(3))
this.context.canvas.attachBrush(brush)
this.context.canvas.drawCircle(w / 2, h / 2, Math.min(w, h) / 2)
this.context.canvas.detachBrush()
this.context.invalidate()

更多关于HarmonyOS鸿蒙Next中DrawingRenderingContext的使用与优化的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼

在HarmonyOS鸿蒙Next中，DrawingRenderingContext是用于图形绘制和渲染的核心类之一。它提供了丰富的API来支持2D图形的绘制、变换、裁剪等操作。通过DrawingRenderingContext，开发者可以在Canvas上进行高效的图形渲染。

DrawingRenderingContext的主要功能包括：

绘制基本图形：支持绘制线条、矩形、圆形、路径等基本图形。
图形变换：提供平移、旋转、缩放等变换操作，方便对图形进行复杂处理。
裁剪与遮罩：支持通过路径或矩形进行图形裁剪，实现复杂的视觉效果。
颜色与样式：支持设置填充颜色、描边颜色、线条宽度等样式属性。
文本绘制：支持在Canvas上绘制文本，并可以设置字体、对齐方式等属性。

在优化DrawingRenderingContext的使用时，可以注意以下几点：

减少频繁的上下文切换：避免在短时间内频繁创建和销毁DrawingRenderingContext对象，以减少性能开销。
重用绘制资源：对于重复使用的图形或路径，尽量复用已有的资源，而不是每次重新创建。
批量绘制操作：将多个绘制操作合并为一个批次，减少绘制调用的次数，提高渲染效率。
合理使用硬件加速：在支持硬件加速的设备上，充分利用硬件加速功能，提升图形渲染性能。

通过合理使用和优化DrawingRenderingContext，可以在HarmonyOS鸿蒙Next中实现高效、流畅的图形渲染效果。

eggper 3楼

在HarmonyOS鸿蒙Next中，DrawingRenderingContext 是一个关键组件，用于在Canvas上进行2D图形渲染。使用时应注意以下几点：

初始化与配置：确保正确初始化DrawingRenderingContext，并根据需求配置渲染参数，如抗锯齿、画布尺寸等。
批量操作：尽量减少频繁的绘制调用，通过批量操作（如beginPath与closePath）优化性能。
硬件加速：启用硬件加速以提升渲染效率，特别是在复杂图形或动画场景中。
资源管理：及时释放不再使用的资源，避免内存泄漏。

优化策略包括使用离屏Canvas进行预渲染，以及利用WebGL进行高性能图形处理。通过这些方法，可以显著提升应用性能和用户体验。