TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
437
1.8m

ICanvas - 图形系统 ​

IRegularPolygon ​

正多边形图形类，用于绘制规则的正多边形。

属性 ​

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

属性名类型默认值说明
radiusnumber30外接圆半径
sidesnumber3多边形边数
typestring"IRegularPolygon"图形类型标识

方法 ​

构造函数 ​

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

设置方法 ​

setRadius(value: number): IRegularPolygon ​

设置外接圆半径

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

setSides(value: number): IRegularPolygon ​

设置多边形边数

  • value: 边数
  • 返回值: 当前IRegularPolygon实例

setWidth(value: number): IRegularPolygon ​

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

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

setHeight(value: number): IRegularPolygon ​

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

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

继承方法 ​

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

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

使用示例 ​

typescript
// 创建一个正三角形
const triangle = new IRegularPolygon({
    x: 100,
    y: 100,
    radius: 50,
    sides: 3,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改多边形属性
triangle.setRadius(60)
    .setSides(6)
    .setFill("#00ff00")
    .setStroke("#ff0000");

// 创建正六边形
const hexagon = new IRegularPolygon({
    x: 200,
    y: 100,
    radius: 40,
    sides: 6,
    fill: "#0000ff",
    stroke: "#ffffff",
    strokeWidth: 1
}, canvas);

注意事项 ​

  1. 正多边形从垂直向上开始绘制
  2. 支持填充和描边两种渲染模式
  3. 点击检测基于多边形内部区域和描边范围
  4. 边界矩形会根据所有顶点自动计算
  5. 支持旋转和缩放变换
  6. 边数必须大于等于3
最近更新