TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
431
1.7m

ICanvas - 图形系统 ​

IArc ​

圆弧图形类，用于绘制指定起始角度和结束角度的圆弧。

属性 ​

继承自 Shape 的所有属性，并包含以下特定属性：

属性名类型默认值说明
radiusnumber30圆弧半径
startAnglenumber0起始角度（度）
endAnglenumber90结束角度（度）
typestring"IArc"图形类型标识

方法 ​

构造函数 ​

typescript
constructor(config: IShapeOptional, canvas: ICanvas)
  • config: 可选的配置对象
  • canvas: 画布实例

设置方法 ​

setRadius(value: number): IArc ​

设置圆弧半径

  • value: 半径值
  • 返回值: 当前IArc实例

setStartAngle(angle: number): IArc ​

设置起始角度

  • angle: 起始角度（度）
  • 返回值: 当前IArc实例

setEndAngle(angle: number): IArc ​

设置结束角度

  • angle: 结束角度（度）
  • 返回值: 当前IArc实例

setWidth(value: number): IArc ​

设置宽度（会同时更新半径）

  • value: 宽度值
  • 返回值: 当前IArc实例

setHeight(value: number): IArc ​

设置高度（会同时更新半径）

  • value: 高度值
  • 返回值: 当前IArc实例

继承方法 ​

继承自 Shape 的所有方法，包括：

  • draw(ctx: CanvasRenderingContext2D): 绘制圆弧
  • isPointInPath(x: number, y: number, shapeId: string): boolean: 检测点是否在圆弧内
  • getBoundRect(): IShapeBoundRect: 获取边界矩形

使用示例 ​

typescript
// 创建一个圆弧
const arc = new IArc({
    x: 100,
    y: 100,
    radius: 50,
    startAngle: 0,
    endAngle: 180,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

// 添加到画布
canvas.addShape(arc);

// 修改圆弧属性
arc.setRadius(60)
    .setStartAngle(45)
    .setEndAngle(270)
    .setFill("#00ff00");

注意事项 ​

  1. 角度以度为单位，0度表示水平向右，顺时针为正
  2. 如果设置了填充色，圆弧会从圆心绘制扇形
  3. 如果没有填充色，只绘制圆弧线条
  4. 点击检测会根据是否有填充来区分检测范围
最近更新