Leafer UI

Appearance

Arrow ​

箭头元素，丰富的箭头样式，并支持自定义。

关键属性 ​

startArrow: IArrowType ​

起始箭头， 默认无。

Line / Path 等路径元素也支持此属性。

endArrow: IArrowType ​

结束箭头， 默认为 angle。

Line / Path 等路径元素也支持此属性。

ts
type IArrowType =
  | 'none'
  | 'angle' // 角度箭头（性能好）
  | 'angle-side' // 单边角度箭头
  | 'arrow' // 标准箭头
  | 'triangle' // 三角形箭头
  | 'triangle-flip' // 反向三角形箭头
  | 'circle' // 圆形箭头
  | 'circle-line' // 圆形箭头（线性）
  | 'square' // 方形箭头
  | 'square-line' // 方形箭头（线性）
  | 'diamond' // 菱形箭头
  | 'diamond-line' // 菱形箭头（线性）
  | 'mark' // 标注箭头
  | IPathDataArrow // 按照线宽为 1 自定义，箭头末端为（0，0），内部会自动处理缩放、旋转角度。

interface IPathDataArrow {
  connect?: IPathDataArrowOffset // 箭头与线条的连接点位置
  offset?: IPathDataArrowOffset // 箭头偏移距离，与末端对齐
  path: IPathCommandData // 只支持 M、L、C、Q、O 绘图命令
}

interface IPathDataArrowOffset {
  x?: number // 偏移距离（x轴）
  bevelJoin?: number // strokeJoin 为 bevel 时增加的偏移距离（x轴）
  roundJoin?: number // strokeJoin 为 round 时增加的偏移距离（x轴）
}

points 模式 ​

可通过 points 定义折线。

points: number[] ​

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

curve: boolean | number ​

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

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

路径模式 ​

path 优先模式 ​

圆角属性 ​

cornerRadius: number ​

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

继承 ​

Line ​

API ​

Arrow ​

示例 ​

角度箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({  
    y: 50,
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

箭头变得更大一些

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    strokeCap: 'square', 
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

strokeJoin 变得平滑

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    strokeCap: 'round', 
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

strokeCap 变得平滑

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    strokeJoin: 'round', 
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

strokeCap / strokeJoin 都变得平滑

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    strokeCap: 'round', 
    strokeJoin: 'round',
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

单边角度箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'angle-side',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

标准箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'arrow',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

strokeCap / strokeJoin 都变得平滑

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'arrow',  
    strokeCap: 'round',
    strokeJoin: 'round',
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

三角形箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'triangle',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

反向三角形箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'triangle-flip',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

圆形箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'circle',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

圆形箭头（线性） ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'circle-line',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

方形箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'square',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

方形箭头（线性） ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'square-line',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

菱形箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'diamond',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

菱形箭头（线性） ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    endArrow: 'diamond-line',  
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

标注箭头 ​

ts
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'

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

const arrow = new Arrow({
    y: 50,
    startArrow: 'mark',
    endArrow: 'mark',
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

leafer.add(arrow)

Released under the MIT License.

Copyright © 2023 Chao (Leafer) Wan