Arrow 元素

箭头元素，为线条添加起始/结束箭头，自带 12 种常用的箭头样式，并支持自定义。

继承

Arrow > Line > UI

安装插件

需要安装 arrow 插件才能使用，点此访问 Github 仓库。

npmpnpmyarnbun

npm install @leafer-in/arrow

pnpm add @leafer-in/arrow

yarn add @leafer-in/arrow

bun add @leafer-in/arrow

或通过 script 标签引入，使用全局变量 LeaferIN.arrow 访问插件内部功能。

arrow.minarrow

html

<script src="https://unpkg.com/@leafer-in/arrow@1.9.6/dist/arrow.min.js"></script>
<script>
  const { Arrow } = LeaferIN.arrow
</script>

html

<script src="https://unpkg.com/@leafer-in/arrow@1.9.6/dist/arrow.js"></script>
<script>
  const { Arrow } = LeaferIN.arrow
</script>

关键属性

startArrow: `IArrowType`

起始箭头，默认无。

支持自定义箭头样式，Line / Path 等路径元素也支持此属性（需引入此插件包）。

endArrow: `IArrowType`

结束箭头，默认为 angle。

支持自定义箭头样式，Line / Path 等路径元素也支持此属性（需引入此插件包）。

type IArrowType =
  | 'none'
  | 'angle' // 角度箭头（性能好）
  | 'angle-side' // 单边角度箭头
  | 'arrow' // 标准箭头
  | 'triangle' // 三角形箭头
  | 'triangle-flip' // 反向三角形箭头
  | 'circle' // 圆形箭头
  | 'circle-line' // 圆形箭头（线性）
  | 'square' // 方形箭头
  | 'square-line' // 方形箭头（线性）
  | 'diamond' // 菱形箭头
  | 'diamond-line' // 菱形箭头（线性）
  | 'mark' // 标注箭头
  | string // 自定义箭头

points 模式

可通过 points 定义折线。

points: `number`[]

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

curve: `boolean` | `number`

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

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

路径模式

path 优先模式

圆角属性

cornerRadius: `number`

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

静态方法

registerArrow ( name: `string`, data: `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轴）
}

示例

角度箭头

// #箭头样式 [角度箭头]
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: '#32cd79'
})

leafer.add(arrow)

箭头变得更大一些

// #箭头样式 [角度箭头 - 箭头变得更大一些]
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: '#32cd79'
})

leafer.add(arrow)

strokeJoin 变得平滑

// #箭头样式 [角度箭头 - strokeCap变的平滑]
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: '#32cd79'
})

leafer.add(arrow)

strokeCap 变得平滑

// #箭头样式 [角度箭头 - strokeJoin变的平滑]
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: '#32cd79'
})

leafer.add(arrow)

strokeCap / strokeJoin 都变得平滑

// #箭头样式 [角度箭头 - 箭头变得平滑]
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: '#32cd79'
})

leafer.add(arrow)

单边角度箭头

// #箭头样式 [单边角度箭头]
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: '#32cd79'
})

leafer.add(arrow)

标准箭头

// #箭头样式 [标准箭头]
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: '#32cd79'
})

leafer.add(arrow)

strokeCap / strokeJoin 都变得平滑

// #箭头样式 [标准箭头 - 箭头都变得平滑]
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: '#32cd79'
})

leafer.add(arrow)

三角形箭头

// #箭头样式 [三角形箭头]
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: '#32cd79'
})

leafer.add(arrow)

反向三角形箭头

// #箭头样式 [反向三角形箭头]
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: '#32cd79'
})

leafer.add(arrow)

圆形箭头

// #箭头样式 [圆形箭头]
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: '#32cd79'
})

leafer.add(arrow)

圆形箭头（线性）

// #箭头样式 [圆形箭头（线性）]
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: '#32cd79'
})

leafer.add(arrow)

方形箭头

// #箭头样式 [方形箭头]
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: '#32cd79'
})

leafer.add(arrow)

方形箭头（线性）

// #箭头样式 [方形箭头（线性）]
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: '#32cd79'
})

leafer.add(arrow)

菱形箭头

// #箭头样式 [菱形箭头]
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: '#32cd79'
})

leafer.add(arrow)

菱形箭头（线性）

// #箭头样式 [菱形箭头（线性）]
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: '#32cd79'
})

leafer.add(arrow)

标注箭头

// #箭头样式 [标注箭头]
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: '#32cd79'
})

leafer.add(arrow)

虚线箭头动画

// #动画样式 [虚线箭头动画]
import { Leafer } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow' // 导入箭头插件 //
import '@leafer-in/animate' // 导入动画插件

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

const arrow = new Arrow({
    x: 100,
    y: 100,
    stroke: '#32cd79',
    strokeWidth: 5,
    dashPattern: [10, 10], // 绘制虚线 //
    dashOffset: 0,
    animation: { // 虚线动画
        style: { dashOffset: -20 },
        easing: 'linear',
        duration: 0.5,
        loop: true,
    }
})

leafer.add(arrow)

注册自定义箭头样式

path() 方法创建的 PathCreator 实例，可以像 Canvas 2D API 一样快速绘制路径。

// #箭头样式 [自定义箭头样式]
import { Leafer, path } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow' // 导入箭头插件 //


// 注册自定义箭头样式 //
Arrow.registerArrow('custom-arrow', {
    // 按照线宽为 1 自定义，箭头末端为（0，0），内部会自动处理缩放、旋转角度
    connect: { x: -0.5 }, // 箭头与线条的连接点位置
    offset: {
        x: -0.71, // 偏移距离（x轴）
        bevelJoin: 0.36, // strokeJoin 为 bevel 时增加的偏移距离（x轴）
        roundJoin: 0.22 // strokeJoin 为 round 时增加的偏移距离（x轴）
    },
    // 路径数据，用线条绘制、拼凑出箭头形状（没有fill)，只用关心箭头从左往右的水平样式，仅支持 M、L、C、Q、O 绘图命令
    path: path().moveTo(-5, -5).lineTo(0, 0).lineTo(-5, 3).path // = [1, -5, -3, 2, 0, 0, 2, -5, 3] 
})


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

const arrow = new Arrow({
    y: 50,
    strokeWidth: 5,
    stroke: '#32cd79',
    endArrow: 'custom-arrow' // 使用自定义箭头 //
})

leafer.add(arrow)

leafer-draw

leafer-game

leafer-editor

leafer

前端环境

服务端渲染

组件式开发（社区提供）

Arrow 元素

安装插件

关键属性

startArrow: `IArrowType`

endArrow: `IArrowType`

points 模式

points: `number`[]

curve: `boolean` | `number`

路径模式

path 优先模式

圆角属性

cornerRadius: `number`

静态方法

registerArrow ( name: `string`, data: `IPathDataArrow` )

示例

角度箭头

单边角度箭头

标准箭头

三角形箭头

反向三角形箭头

圆形箭头

圆形箭头（线性）

方形箭头

方形箭头（线性）

菱形箭头

菱形箭头（线性）

标注箭头

虚线箭头动画

注册自定义箭头样式

Arrow 元素 ​

安装插件 ​

关键属性 ​

startArrow: IArrowType ​

endArrow: IArrowType ​

points 模式 ​

points: number[] ​

curve: boolean | number ​

路径模式 ​

path 优先模式 ​

圆角属性 ​

cornerRadius: number ​

静态方法 ​

registerArrow ( name: string, data: IPathDataArrow ) ​

示例 ​

角度箭头 ​

单边角度箭头 ​

标准箭头 ​

三角形箭头 ​

反向三角形箭头 ​

圆形箭头 ​

圆形箭头（线性） ​

方形箭头 ​

方形箭头（线性） ​

菱形箭头 ​

菱形箭头（线性） ​

标注箭头 ​

虚线箭头动画 ​

注册自定义箭头样式 ​

Arrow 元素

安装插件

关键属性

startArrow: `IArrowType`

endArrow: `IArrowType`

points 模式

points: `number`[]

curve: `boolean` | `number`

路径模式

path 优先模式

圆角属性

cornerRadius: `number`

静态方法

registerArrow ( name: `string`, data: `IPathDataArrow` )

示例

角度箭头

单边角度箭头

标准箭头

三角形箭头

反向三角形箭头

圆形箭头

圆形箭头（线性）

方形箭头

方形箭头（线性）

菱形箭头

菱形箭头（线性）

标注箭头

虚线箭头动画

注册自定义箭头样式