LeaferJS

简体中文

English

简体中文

English

Appearance

Line 元素 ​

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


继承

Line  >  UI

关键属性 ​

width: number ​

直线的长度。

rotation: number ​

旋转角度， 取值范围: -180 ～ 180。

ts
// 竖线
width: 100
rotation: 90

计算属性 ​

toPoint: IPointData ​

目标点 （相对 Line 元素的自身坐标计算）， 自动换算出 width 与 rotation。

注意

如发现 toPoint 不符合你的预期， 只需减去 Line 元素 x,y 坐标即可，因为 toPoint 是 内部坐标 。

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

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

points 模式 ​

可通过 points 定义折线。

points: number[] | IPointData[] ​

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

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

curve: IPointsCurve ​

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

可设置 0 ～ 1 控制曲率，默认为 0.5。

支持 自定义平滑 points 类型。

ts
type IPointsCurve = IPointsCurveValue | IPointsCurveData

type IPointsCurveValue = boolean | number

interface IPointsCurveData {
  type: IPointsCurveType
  value: IPointsCurveValue
}

type IPointsCurveType =
  | 'Q' // 使用二次贝塞尔曲线平滑 points，默认支持
  | 'C' // 使用三次贝塞尔曲线平滑 points，需扩展
  | (string & {})

// 使用布尔值
line.curve = true

// 使用数字
line.curve = 0.3

// 使用对象
line.curve = {
  type: 'Q',
  value: 0.3,
}

closed: boolean ​

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

路径模式 ​

path 优先模式 ​

圆角属性 ​

cornerRadius: number ​

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

只读属性 ​

isPointsMode: boolean ​

当前是否为 points 属性生效模式。

继承元素 ​

Line  >  UI ​

示例 ​

绘制横线 ​

ts
// #创建 Line [绘制横线 (Leafer)]
import { Leafer, Line } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const line = new Line({
    width: 100,
    strokeWidth: 5,
    stroke: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制横线 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const line = new Line({
    width: 100,
    strokeWidth: 5,
    stroke: '#32cd79',
    editable: true
})

app.tree.add(line)

绘制到目标点的直线 ​

ts
// #创建 Line [绘制到目标点的直线 (Leafer)]
import { Leafer, Line } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const line = new Line({
    toPoint: { x: 100, y: 50 },
    strokeWidth: 5,
    stroke: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制到目标点的直线 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const line = new Line({
    toPoint: { x: 100, y: 50 },
    strokeWidth: 5,
    stroke: '#32cd79',
    editable: true
})

app.tree.add(line)

绘制斜线 ​

ts
// #创建 Line [绘制斜线 (Leafer)]
import { Leafer, Line } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const line = new Line({
    width: 100,
    rotation: 45,
    strokeWidth: 5,
    stroke: '#32cd79',
    dashPattern: [10, 10] // 虚线描边属性
})

leafer.add(line)
ts
// #创建 Line [绘制斜线 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const line = new Line({
    width: 100,
    rotation: 45,
    strokeWidth: 5,
    stroke: '#32cd79',
    dashPattern: [10, 10], // 虚线描边属性
    editable: true
})

app.tree.add(line)

绘制竖线 ​

ts
// #创建 Line [绘制竖线 (Leafer)]
import { Leafer, Line } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const line = new Line({
    width: 100,
    rotation: 90,
    strokeWidth: 5,
    stroke: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制竖线 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const line = new Line({
    width: 100,
    rotation: 90,
    strokeWidth: 5,
    stroke: '#32cd79',
    editable: true
})

app.tree.add(line)

绘制折线 ​

ts
// #创建 Line [绘制折线 (Leafer)]
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: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制折线 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const line = new Line({
    points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90],  // [x,y, x,y ...]
    strokeWidth: 5,
    stroke: '#32cd79',
    editable: true
})

app.tree.add(line)

绘制圆角折线 ​

ts
// #创建 Line [绘制圆角折线 (Leafer)]
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: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制圆角折线 (Leafer)]
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: '#32cd79'
})

leafer.add(line)

绘制曲线 ​

ts
// #创建 Line [绘制曲线 (Leafer)]
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: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制曲线 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

const line = new Line({
    points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90],  // [x,y, x,y ...]
    curve: true,
    strokeWidth: 5,
    stroke: '#32cd79',
    editable: true
})

app.tree.add(line)

绘制 0.2 曲率的曲线 ​

ts
// #创建 Line [绘制 0.2 曲率的曲线 (Leafer)]
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: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制 0.2 曲率的曲线 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

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: '#32cd79',
    editable: true
})

app.tree.add(line)

绘制趋势图 ​

ts
// #创建 Line [绘制趋势图 (Leafer)]
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: '#32cd79'
})

leafer.add(line)
ts
// #创建 Line [绘制趋势图 (App)]
import { App, Line } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

const app = new App({ view: window, editor: {} })

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: '#32cd79',
    editable: true
})

app.tree.add(line)

Released under the MIT License.

Copyright © 2023-2026 Chao (Leafer) Wan