前言：
目前网络上绝大多数电子签名方案，都依赖于直接注入 JavaScript 脚本并调用 Canvas 元素来实现。这种方式虽然功能强大灵活，但对于不具备编程背景的设计师和产品经理而言，若要调整样式、交互或扩展功能，几乎无从下手。这使得本应灵活易用的签名组件，变成了一道技术鸿沟，严重限制了设计创意和产品自定义的发挥空间。
签字，是承诺的终极形态，是终结与开启的分界，是秩序与责任的铁证。
一签一诺，重若千钧。
预览：
预览地址：https://usrsky.axshare.com/#id=w2dd4f&g=1
可以看出，笔迹书写非常流畅，全程毫无卡顿与延迟，真实还原纸上书写的跟手感。线条过渡自然柔和，无生硬尖锐之感，整体视觉效果舒适优雅。
原理：
如果不借助JS和Canvas，还需要动态生成图片，那么SVG（Scalable Vector Graphics）就非常适合。
SVG基本形状中<path>元素是最强大的一个，你可以用一行代码创建任意形状（线条、曲线、弧形等等）。
准备：
我们需要准备一个动态面板。动态面板内部放一张图片，两个文本域（sign和drawing）。动态面板外面放一个“重置”按钮。
结构如下：
- 动态面板：自适应内容，如设置背景色和边框样式即为签字板的背景和边框。
- 图片：X:0 Y:0 宽度高度自己定。
- 文本域sign：X:0 Y:0 W:1 H:1 隐藏。
- 文本域drawing：X:0 Y:0 W:1 H:1 隐藏。
- 重置按钮
交互：
文件域sign的交互如下：
载入时[设置文本]的内容为：
文件域drawing的交互如下：
动态面板的交互如下：
拖动结束时[设置文本]的内容为：
重置按钮的交互为：
这样一个手写签名板就完成了。
扩展：
恭喜！你已进入Axure的「绘图新纪元」，这是一个属于创造者的新篇章，此刻起，逻辑与美学将由你定义，无限可能正待你挥洒创意。
这里不仅是原画的舞台，更是无限可能的创造工厂！这一功能可灵活扩展为多种实用场景，例如：
- 画图板：自由绘制创意灵感，轻松表达设计思路
https://usrsky.axshare.com/#id=7kgfjw&g=1 - 作业批改：直接在原型上批注反馈，沟通更直观、修改更高效
- 文档批注：像在纸上一样标记重点，让说明文档也变得生动起来
- 地图标记：快速标注动线、区域，规划用户路径一目了然
- …还有更多玩法等你发掘！
无论是流程示意、UI草图，还是互动演示，手动绘图都能成为你的得力助手。发挥创意，动手试试吧 —— 意想不到的绘图体验，正等你来探索！
如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。
转载请注明：最InのAxure » Axure中实现手写签名功能（非JS注入）