HarmonyOS 鸿蒙Next canvas画布怎么给边框加圆角，例如让这个画布四角为圆角

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

HarmonyOS 鸿蒙Next canvas画布怎么给边框加圆角，例如让这个画布四角为圆角

咨询场景描述：// xxx.ets @Entry @Component struct CanvasExample { private settings: RenderingContextSettings = new RenderingContextSettings(true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) @State bgcolor:string=’#FEEBA7’ build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width(270) .height(270) .backgroundColor(’#ffff00’) .onReady(() => { this.context.fillStyle=this.bgcolor this.context.lineWidth=1 this.context.fillRect(0,0, 270, 71) this.context.fillStyle=’#00000000’ this.context.strokeRect(0,71, 270, 270-71-43) this.context.fillStyle=this.bgcolor this.context.fillRect(0,227, 270, 43) }) } .width(‘100%’) .height(‘100%’) } }


更多关于HarmonyOS 鸿蒙Next canvas画布怎么给边框加圆角，例如让这个画布四角为圆角的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以按照前面给的demo里面的方法，将canvas画布怎么给边框加圆角，具体步骤如下：

  1. 注释掉绘制矩形的边框的方法this.context.strokeRect(0,71, 270, 270-71-43)

  2. 将strokeRect(0,71, 270, 270-71-43)的入参放入前面给的demo里面的方法中，即： this.drawRoundRect(0,71,270,270-71-43,10)

修改之后，完整demo如下：

@Entry
@Component
struct CanvasExample1 {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State bgcolor:string='#FEEBA7'
  drawRoundRect(x: number, y: number, width: number, height: number, radius: number, strokeColor?: string,
    fillColor?: string, lineDash?: []) {
    strokeColor = strokeColor || '#333';
    lineDash = lineDash || [];
    this.context.beginPath();
    this.context.setLineDash(lineDash);
    // 绘制第一段圆弧路径
    this.context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
    // 绘制第一段直线路径
    this.context.lineTo(width - radius + x, y);
    // 绘制第二段圆弧路径
    this.context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
    // 绘制第二段直线路径
    this.context.lineTo(width + x, height + y - radius);
    // 绘制第三段圆弧路径
    this.context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2);
    // 绘制第三段直线路径
    this.context.lineTo(radius + x, height + y);
    // 绘制第四段圆弧路径
    this.context.arc(radius + x, height - radius + y, radius, Math.PI / 2, Math.PI);
    // 绘制第四段直线路径
    this.context.lineTo(x, y + radius);
    // 设置画笔颜色
    this.context.strokeStyle = strokeColor;
    // 描边绘制
    this.context.stroke();
    this.context.fillStyle=this.bgcolor
    if (fillColor) {
      this.context.fillStyle = fillColor;
      this.context.fill();
    }
    this.context.closePath();
  }
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width(270)
        .height(270)
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.fillStyle=this.bgcolor
          this.context.lineWidth=1
          this.context.fillRect(0,0, 270, 71)
          this.context.fillStyle='#00000000'
          // this.context.strokeRect(0,71, 270, 270-71-43)
          this.drawRoundRect(0,71,270,270-71-43,10)
          this.context.fillStyle=this.bgcolor
          this.context.fillRect(0,227, 270, 43)
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next canvas画布怎么给边框加圆角，例如让这个画布四角为圆角的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，为Canvas画布添加圆角边框，可以通过绘制带有圆角矩形的路径，然后使用此路径进行裁剪，接着在裁剪后的区域内进行绘制。以下是一个简要的过程描述：

  1. 创建Paint对象：用于设置绘制边框的样式，包括颜色、粗细等。

  2. 创建Path对象：使用Path的addRoundRect方法添加带有圆角的矩形路径。

  3. 设置Canvas裁剪区域：调用Canvas.clipPath方法，传入之前创建的Path对象，以裁剪出圆角矩形区域。

  4. 绘制内容：在裁剪后的圆角矩形区域内进行绘制操作，如填充背景色、绘制其他图形等。

  5. 恢复Canvas状态：如果后续还需要在未被裁剪的区域绘制，可以调用Canvas.restore方法恢复Canvas到之前的状态。

示例代码片段（伪代码，具体实现需根据HarmonyOS API调整）：

Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);

Path path = new Path();
RectF rect = new RectF(10, 10, 200, 200); // 矩形区域
float[] radii = new float[8]; // 圆角半径数组，此处为四个相同圆角
Arrays.fill(radii, 20); // 设置圆角半径为20
path.addRoundRect(rect, radii, Path.Direction.CW);

canvas.clipPath(path);
// 在圆角矩形区域内进行绘制
canvas.drawRect(rect, new Paint()); // 示例：填充背景色

// 如果需要恢复Canvas状态，则调用canvas.restore();

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

回到顶部