TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
537
2.2m

ICanvas - 图形系统 ​

ILine ​

线条图形类，用于绘制直线。

属性 ​

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

属性名类型默认值说明
pointStartIShapeVector2d{x: 0, y: 0}线条起点坐标
pointEndIShapeVector2d{x: 0, y: 0}线条终点坐标
typestring"ILine"图形类型标识

方法 ​

构造函数 ​

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

设置方法 ​

setStart(x: number, y: number): ILine ​

设置线条起点

  • x: 起点X坐标
  • y: 起点Y坐标
  • 返回值: 当前ILine实例

setEnd(x: number, y: number): ILine ​

设置线条终点

  • x: 终点X坐标
  • y: 终点Y坐标
  • 返回值: 当前ILine实例

rotateByPoint(isStartPoint: boolean, angle: number): ILine ​

根据参考点旋转线条

  • isStartPoint: 是否以起点为基准旋转
  • angle: 旋转角度（度）
  • 返回值: 当前ILine实例

getAngle(): number ​

获取线条角度

  • 返回值: 角度值（度）

getAngleByPoints(start: IShapeVector2d, end: IShapeVector2d): number ​

根据两点计算角度

  • start: 起点坐标
  • end: 终点坐标
  • 返回值: 角度值（度）

getAngleByAnchor(anchorX: number, anchorY: number, startX: number, startY: number, endX: number, endY: number): number ​

计算线条绕指定锚点的旋转角度

  • anchorX: 锚点X坐标
  • anchorY: 锚点Y坐标
  • startX: 起点X坐标
  • startY: 起点Y坐标
  • endX: 终点X坐标
  • endY: 终点Y坐标
  • 返回值: 角度值（度）

继承方法 ​

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

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

使用示例 ​

typescript
// 创建一条线条
const line = new ILine({
    pointStart: {x: 100, y: 100},
    pointEnd: {x: 200, y: 200},
    stroke: "#000000",
    strokeWidth: 2
}, canvas);

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

// 修改线条属性
line.setStart(50, 50)
    .setEnd(250, 250)
    .setStroke("#ff0000")
    .setStrokeWidth(3);

// 旋转线条
line.rotateByPoint(true, 45);

// 获取线条角度
const angle = line.getAngle();

注意事项 ​

  1. 线条只有描边模式，不支持填充
  2. 点击检测基于点到线段的距离计算
  3. 支持线条旋转功能
  4. 边界矩形会根据起点和终点自动计算
  5. 线条的宽度和高度设置会调整起点和终点位置
最近更新