HarmonyOS 鸿蒙Next：如何使用画布绘制一个特定颜色且支持圆角的图片

使用Canvas绘制图形请参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-drawing-customization-on-canvas-V5

示例代码：

@Entry
@Component
struct test {
  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('90%')
        .height(300)
        .backgroundColor('#ffff00')
        .onReady(() => {
          let radius = 10; //圆角弧度
          let x = 40; //左上角坐标x
          let y = 40; //左上角坐标y
          let width = 100; //矩形宽
          let height = 40; //矩形高
          this.context.beginPath();
          this.context.moveTo(x + radius, y);
          this.context.lineTo(x + width - radius, y);
          this.context.arcTo(x + width, y, x + width, y + radius, radius);
          this.context.lineTo(x + width, y + height - radius);
          this.context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
          this.context.lineTo(x + radius, y + height);
          this.context.arcTo(x, y + height, x, y + height - radius, radius);
          this.context.lineTo(x, y + radius);
          this.context.arcTo(x, y, x + radius, y, radius);
          this.context.closePath();
          this.context.fill();
        })
    }
    .width('100%')
    .height('100%')
  }
}

图形绘制完毕添加 this.context.fill() 即可填充颜色

或者可以尝试下ArkTS的绘制组件：

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

在HarmonyOS（鸿蒙）系统中，使用画布绘制一个特定颜色且支持圆角的图片，可以通过Canvas和相关绘图API来实现。以下是一个简要的步骤说明：

1. 准备图片资源：确保你有一张图片资源，并将其加载到内存中，通常可以使用BitmapFactory来加载图片。

2. 创建Canvas和Paint对象：

   • 创建一个Canvas对象，它代表绘图区域。
   • 创建一个Paint对象，用于设置绘图属性，如颜色、圆角等。

3. 设置Paint属性：

   • 使用Paint.setColor()设置绘制颜色。
   • 使用Paint.setShader()结合BitmapShader来设置图片填充。
   • 使用Paint.setAntiAlias(true)来启用抗锯齿，使圆角边缘更平滑。
   • 使用Paint.setMaskFilter()结合BlurMaskFilter（如果需要模糊效果）或其他掩码过滤器。

4. 绘制圆角矩形：

   • 使用Canvas.drawRoundRect()方法，传入矩形边界、圆角半径以及Paint对象，来绘制圆角矩形并填充图片。

5. 将绘制结果输出：

   • 将绘制好的Canvas内容输出到视图或图像文件中。

请注意，上述步骤是一个高层次的概述，实际实现时需要处理图片加载、内存管理、错误处理等细节。

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