Line
绘制横线、斜线、竖线， 通过 width 与 rotation 定义直线。
关键属性
width: number
线的长度
rotation: number
旋转角度， 取值范围: -180 ～ 180。
ts
// 竖线
width: 100
rotation: 90计算属性
toPoint: IPointData
画到某一点 setter， 自动换算出 width 与 rotation。
ts
line.toPoint = { x: 0, y: 100 }获取目标点坐标 getter ，根据 width 与 rotation自动换算。
ts
line.toPoint // {x: 0, y: 100}示例
绘制横线
ts
import { Leafer, Line } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const line = new Line({
width: 100,
strokeWidth: 5,
stroke: 'rgb(50,205,121)'
})
leafer.add(line)绘制到目标点的直线
ts
import { Leafer, Line } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const line = new Line({
toPoint: { x: 100, y: 50 },
strokeWidth: 5,
stroke: 'rgb(50,205,121)'
})
leafer.add(line)绘制斜线
ts
import { Leafer, Line } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const line = new Line({
width: 100,
rotation: 45,
strokeWidth: 5,
stroke: 'rgb(50,205,121)'
})
leafer.add(line)绘制竖线
ts
import { Leafer, Line } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const line = new Line({
width: 100,
rotation: 90,
strokeWidth: 5,
stroke: 'rgb(50,205,121)'
})
leafer.add(line)