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 定义折线。

points: number[] | IPointData[]

可通过坐标数组 [ x1,y1, x2,y2, ...] 绘制折线(高性能)。

或通过坐标对象数组 [ {x, y}, {x, y} ...] 绘制折线 (可读性高,性能一般)。

curve: boolean | number

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

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

closed: boolean

是否自动闭合路径,默认为 false

路径模式

path 优先模式

圆角属性

cornerRadius: number

圆角大小,使折线拐角处变的圆滑。

继承

UI

示例

绘制横线

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.