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
示例
角度箭头
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)