TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
365
1.4m

ICanvas - 图形系统 ​

ICircle ​

圆形图形类，用于绘制完美的圆形。

属性 ​

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

属性名类型默认值说明
radiusnumber30圆形半径
typestring"ICircle"图形类型标识

方法 ​

构造函数 ​

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

设置方法 ​

setRadius(value: number): ICircle ​

设置圆形半径

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

setWidth(value: number): ICircle ​

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

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

setHeight(value: number): ICircle ​

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

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

继承方法 ​

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

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

使用示例 ​

typescript
// 创建一个圆形
const circle = new ICircle({
    x: 100,
    y: 100,
    radius: 50,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改圆形属性
circle.setRadius(60)
    .setFill("#00ff00")
    .setStroke("#ff0000")
    .setStrokeWidth(3);

// 设置圆形为可拖拽
circle.setDraggable(true);

注意事项 ​

  1. 圆形始终保持完美的圆形，设置宽度或高度会自动更新半径
  2. 支持填充和描边两种渲染模式
  3. 点击检测会考虑旋转和缩放变换
  4. 边界矩形计算基于直径（半径 × 2）
最近更新