Skip to content

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 模式

通过 path 定义路径。

path: IPathStringIPathCommandData

路径数据,支持 SVG 与 Cavnas 绘图命令

可通过 PathCreator 绘制路径数据。

圆角属性

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.