Skip to content

Arrow 组件 API 文档

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


核心特性

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

Props 属性说明

属性名类型默认值描述
arrow[number, number, number, number]必填箭头坐标 [起点 x, 起点 y, 终点 x, 终点 y]
headnumber8箭头头部尺寸(像素)
colorCanvasStyle#fff箭头颜色

使用示例

基础箭头

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

定制样式

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

虚线箭头

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