TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
417
1.7m

ICanvas - 图形系统 ​

ISector ​

扇形图形类，用于绘制扇形（从圆心到圆弧的封闭区域）。

属性 ​

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

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

方法 ​

构造函数 ​

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

设置方法 ​

setRadius(value: number): ISector ​

设置扇形半径

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

setWidth(value: number): ISector ​

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

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

setHeight(value: number): ISector ​

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

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

继承方法 ​

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

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

使用示例 ​

typescript
// 创建一个扇形
const sector = new ISector({
    x: 100,
    y: 100,
    radius: 50,
    startAngle: 0,
    endAngle: 90,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改扇形属性
sector.setRadius(60)
    .setFill("#00ff00")
    .setStroke("#ff0000");

// 创建半圆扇形
const halfCircle = new ISector({
    x: 200,
    y: 100,
    radius: 40,
    startAngle: 0,
    endAngle: 180,
    fill: "#0000ff",
    stroke: "#ffffff",
    strokeWidth: 1
}, canvas);

注意事项 ​

  1. 扇形始终从圆心开始绘制
  2. 支持填充和描边两种渲染模式
  3. 角度以度为单位，0度表示水平向右
  4. 点击检测基于角度范围和半径范围
  5. 支持旋转和缩放变换
  6. 边界矩形基于半径计算
最近更新