TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
463
1.9m

ICanvas - 图形系统 ​

IStar ​

星形图形类，用于绘制星形图案。

属性 ​

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

属性名类型默认值说明
numPointsnumber5星的角数量
innerRadiusnumber16内圆半径
outerRadiusnumber30外圆半径
typestring"IStar"图形类型标识

方法 ​

构造函数 ​

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

设置方法 ​

setInnerRadius(value: number): IStar ​

设置内圆半径

  • value: 内圆半径值
  • 返回值: 当前IStar实例

setOuterRadius(value: number): IStar ​

设置外圆半径

  • value: 外圆半径值
  • 返回值: 当前IStar实例

setNumPoints(value: number): IStar ​

设置星的角数量

  • value: 角数量
  • 返回值: 当前IStar实例

setWidth(value: number): IStar ​

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

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

setHeight(value: number): IStar ​

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

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

继承方法 ​

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

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

使用示例 ​

typescript
// 创建一个五角星
const star = new IStar({
    x: 100,
    y: 100,
    numPoints: 5,
    innerRadius: 20,
    outerRadius: 40,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改星形属性
star.setNumPoints(6)
    .setInnerRadius(15)
    .setOuterRadius(50)
    .setFill("#00ff00")
    .setStroke("#ff0000");

// 创建六角星
const sixPointStar = new IStar({
    x: 200,
    y: 100,
    numPoints: 6,
    innerRadius: 25,
    outerRadius: 45,
    fill: "#0000ff",
    stroke: "#ffffff",
    strokeWidth: 1
}, canvas);

注意事项 ​

  1. 星形从垂直向上开始绘制
  2. 支持填充和描边两种渲染模式
  3. 点击检测基于星形的复杂几何形状
  4. 边界矩形基于外圆半径计算
  5. 支持旋转和缩放变换
  6. 内圆半径必须小于外圆半径
最近更新