HumanBreak/docs/api/user-client-modules/组件 Arrow.md

Arrow 组件 API 文档

本文档由 DeepSeek R1 模型生成并微调。

---

核心特性

• 两点连线：通过坐标点绘制任意方向箭头
• 头部定制：可调节箭头尖端大小
• 样式控制：支持颜色自定义

---

Props 属性说明

属性名	类型	默认值	描述
arrow	[number, number, number, number]	必填	箭头坐标 [起点 x, 起点 y, 终点 x, 终点 y]
head	number	8	箭头头部尺寸（像素）
color	CanvasStyle	#fff	箭头颜色

---

使用示例

基础箭头

// 从 (50, 100) 到 (200, 300) 的基础箭头
<Arrow arrow={[50, 100, 200, 300]} />

定制样式

// 红色粗箭头（头部尺寸12px）
<Arrow arrow={[120, 80, 320, 400]} head={12} color="#FF0000" lineWidth={3} />

虚线箭头

// 带虚线效果的箭头
<Arrow
    arrow={[0, 0, 400, 300]}
    lineDash={[5, 3]} // 5px实线 + 3px间隔
    color="gold"
/>