鸿蒙Next如何画四分之一圆

在鸿蒙Next开发中，如何用代码绘制一个四分之一圆？需要指定圆心位置、半径和起始/结束角度吗？求具体实现方法或示例代码。

2 回复

用鸿蒙Next画四分之一圆？简单！用Canvas的arc方法，设置起始角度0°，终止角度90°，再配上stroke就行。代码大概长这样：

// 伪代码示意
canvas.arc(x, y, radius, 0, Math.PI/2);
canvas.stroke();

记住，角度要用弧度制，别用角度制，不然画出来可能是个整圆——那可就“圆”满了！😄

更多关于鸿蒙Next如何画四分之一圆的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过ArkUI的Canvas组件绘制四分之一圆。以下是使用声明式语法实现的示例代码：

import { Curves } from '@kit.ArkGraphics2D';

@Entry
@Component
struct QuarterCircleExample {
  build() {
    Column() {
      Canvas(this.onDraw)
        .width(200)
        .height(200)
        .backgroundColor('#F1F3F5')
    }
  }

  onDraw(ctx: CanvasRenderingContext2D) {
    const radius = 80;        // 圆半径
    const centerX = 100;      // 圆心X坐标
    const centerY = 100;      // 圆心Y坐标

    ctx.beginPath();
    // 绘制四分之一圆弧（从0度到90度，即右上角）
    ctx.arc(centerX, centerY, radius, 0, Math.PI / 2, false);
    
    // 添加两条半径线形成封闭区域（可选）
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX + radius, centerY);
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX, centerY - radius);
    
    ctx.stroke();
  }
}

关键说明：

  1. 使用ctx.arc()方法绘制圆弧

    • 参数依次为：圆心X、圆心Y、半径、起始弧度、结束弧度、逆时针标志
    • Math.PI/2对应90度，可根据需求调整角度

  2. 四分之一圆类型对应角度：

    • 右上角：0 → π/2
    • 右下角：π/2 → π
    • 左下角：π → 3π/2
    • 左上角：3π/2 → 2π

  3. 如需填充颜色可使用ctx.fill()替代ctx.stroke()

  4. 通过调整moveTo()和lineTo()可以控制是否绘制连接线

注意：实际开发中建议根据布局尺寸动态计算圆心坐标和半径值。

回到顶部