TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
394
1.6m

ICanvas - 图形系统 ​

IEllipse ​

椭圆图形类，用于绘制椭圆形状。

属性 ​

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

属性名类型默认值说明
radiusXnumber80椭圆水平半径
radiusYnumber20椭圆垂直半径
typestring"IEllipse"图形类型标识

方法 ​

构造函数 ​

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

设置方法 ​

setRadiusX(value: number): IEllipse ​

设置椭圆水平半径

  • value: 水平半径值
  • 返回值: 当前IEllipse实例

setRadiusY(value: number): IEllipse ​

设置椭圆垂直半径

  • value: 垂直半径值
  • 返回值: 当前IEllipse实例

setWidth(value: number): IEllipse ​

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

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

setHeight(value: number): IEllipse ​

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

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

继承方法 ​

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

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

使用示例 ​

typescript
// 创建一个椭圆
const ellipse = new IEllipse({
    x: 100,
    y: 100,
    radiusX: 60,
    radiusY: 30,
    fill: "#ff0000",
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改椭圆属性
ellipse.setRadiusX(80)
    .setRadiusY(40)
    .setFill("#00ff00")
    .setStroke("#ff0000");

注意事项 ​

  1. 椭圆由水平半径和垂直半径控制形状
  2. 支持填充和描边两种渲染模式
  3. 点击检测基于椭圆的标准方程
  4. 边界矩形计算基于直径（半径 × 2）
  5. 支持旋转和缩放变换
最近更新