一个很实用的钢笔绘制工具PenTool

demo 体验一下

最近在github上闲逛的时候发现了一个不错的小插件 penTool. 这个工具支持用鼠标在canvas上绘制路径。既然是工具，当然得比canvas原生的功能要强大突出的地方，我主要总结了几点：

• 支持鼠标绘制
• 绘制完成后可随意编辑
• 对曲线的绘制很友好。bezierCurve 绘制曲线总是不那么直观，而且计算坐标是一件很头疼的事，penTool完美的解决了这个问题

准备

看完文档后，我迫不及待地准备尝试一下效果。penTool 是可以通过cdn引入的，但是如果不是纯静态页面，还需要自启服务；我想试一下penTool在模块化项目中的效果，为了偷懒，我使用vue-cli3 快速的搭建了一个新项目:

vue create demo

把新建项目的helloWorld template 删除，再加上一个 button和 canvas，然后通过npm 引入 penTool:

npm install pen-tool

App.vue 经过修改后代码如图：