Line
绘制横线、斜线、竖线、折线、平滑曲线。
关键属性
width: number
直线的长度。
rotation: number
旋转角度， 取值范围: -180 ～ 180。
ts
// 竖线
width: 100
rotation: 90计算属性
toPoint: IPointData
目标点（相对元素 起点 的坐标）， 自动换算出 width 与 rotation。
ts
line.toPoint = { x: 0, y: 100 }
console.log(line.toPoint) // {x: 0, y: 100}) 会根据 width 与 rotation 自动换算points 模式
可通过 points 定义折线。
points: number[]
通过坐标组 [ x1,y1, x2,y2, ...] 绘制折线。
curve: boolean | number
是否转换为平滑路径，默认为 false。
可设置 0 ～ 1 控制曲率，默认为 0.5。
closed: boolean
是否自动闭合路径，默认为 false
路径模式
path 优先模式
圆角属性
cornerRadius: number
圆角大小，使折线拐角处变的圆滑。
继承
UI
API
Line
示例
绘制横线
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)绘制折线
ts
import { Leafer, Line } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const line = new Line({
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90], // [x,y, x,y ...]
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({
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90], // [x,y, x,y ...]
cornerRadius: 5,
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({
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90], // [x,y, x,y ...]
curve: true,
strokeWidth: 5,
stroke: 'rgb(50,205,121)'
})
leafer.add(line)绘制 0.2 曲率的曲线
ts
import { Leafer, Line } from 'leafer-ui'
const leafer = new Leafer({ view: window })
const line = new Line({
points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90], // [x,y, x,y ...]
curve: 0.2,
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({
points: [0, 90, 20, 60, 40, 80, 60, 40, 75, 50, 90, 10, 100, 90], // [x,y, x,y ...]
curve: true,
strokeWidth: 5,
stroke: 'rgb(50,205,121)'
})
leafer.add(line)