Skip to content

Line

绘制横线、斜线、竖线、折线、平滑曲线。

关键属性

width: number

直线的长度。

rotation: number

旋转角度, 取值范围: -180 ~ 180。

ts
// 竖线
width: 100
rotation: 90

计算属性

toPoint: IPointData

目标点(相对元素 起点 的坐标), 自动换算出 widthrotation

ts
line.toPoint = { x: 0, y: 100 }

console.log(line.toPoint) // {x: 0, y: 100})  会根据 width 与 rotation 自动换算

路径模式

可通过 points 定义折线。

points: number[]

通过坐标组 [ x1,y1, x2,y2, ...] 绘制折线。

curve: boolean | number

是否转换为平滑路径,默认为 false。

可设置 0 ~ 1 控制曲率,默认为 0.5。

圆角属性

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)

Released under the MIT License.