WPF中绘制自定义箭头的实现方案及路径生成工具问询

手动编写Path路径方法 #

你可以直接通过定义坐标点的方式编写符合需求的箭头Path路径，无需适配现有第三方方案，以下是SVG场景的示例代码：

<!-- 右向实心箭头示例 -->
<svg width="200" height="100" viewBox="0 0 200 100">
  <path d="M20 50 L150 50 L130 30 L180 50 L130 70 Z" fill="#222" stroke="#222" stroke-width="2"/>
</svg>

路径参数说明：

• M 后接的数值为箭身的起点坐标
• 后续L后接的坐标依次对应箭身末端、箭头左翼顶点、箭头尖端、箭头右翼顶点
• 末尾Z代表路径闭合，形成实心箭头样式
• 你可以自行调整各坐标数值，修改箭头的长度、两翼张开角度、箭身粗细等属性，匹配你需要的样式。如果需要空心箭头，只需调整fill属性为none，保留stroke配置即可。

自动生成路径的工具方案 #

如果你不想手动计算坐标，可以使用以下方式快速生成目标箭头的Path代码：

• 矢量设计软件导出：在Figma、Adobe Illustrator等工具中直接绘制好你需要的箭头样式，导出为SVG格式后，提取导出文件内path标签的d属性值即可直接使用
• SVG在线编辑器：使用在线SVG路径编辑工具，拖拽调整箭头形状到符合要求后，直接复制工具生成的Path代码即可

动态场景适配建议 #

如果需要在Canvas、自定义渲染引擎等场景动态生成不同朝向、不同尺寸的箭头：

• 可以先按1:1比例绘制一套基准箭头路径，后续通过矩阵变换对路径做缩放、旋转、平移操作，适配不同的使用位置，无需重复编写路径
• 只需通过三角函数对基准路径的坐标点做转换，即可生成任意朝向的箭头路径

内容的提问来源于stack exchange，提问作者Ganapati Bhat