【fabrc.js】 操作鼠标自由绘制图形:矩形、圆形、直线等图形【画图功能】

前言:

        在图形编辑器类型的项目当中,通过键盘触发想要绘制的图形类型,然后通过鼠标在fabric画布上自由绘制你想需要的内容。从画基本的矩形、圆形、直线、文本、三角形、折线等功能中,可以扩展出“钢笔path贝塞尔路径”、“多图形组合”、图形合并、图形拆分、解析svg文件(符合要求的文件皆可)进行导入等较为复杂的功能等。

        虽然上述介绍了很多各个不同的功能,但本篇写的内容仅限于文章标题范围!
        其他提到的本文肯定不可能都写出来,实际写出来代码就太多了。但是所有的功能都离不开核心的基础地基,打好地基,扩展出对应的功能便轻而易举。

主要涉及功能:

功能对应的全局键盘快捷键、监听画布事件(鼠标按下、鼠标移动、鼠标松开)、初始化图形相关数据并添加进画布、更新画布、计算并更新图形坐标、画布框选功能启用/关闭;

相关要求:

  1. 通过界面按钮或键盘快捷键启用对应图形的绘画模式;(本文所使用的快捷键库若有了解的需要自行搜索我对应文章即可;)
  2. 监听fabric鼠标按下事件、移动事件、弹起事件;
  3. 在鼠标按下事件中创建图形根据不同图形类型声明对应的初始数据
  4. 在鼠标移动事件中实时更新对应图形的相关坐标
  5. 在鼠标弹起事件中结束绘画,恢复相关数据初始值,并根据自身业务需求进行额外操作即可。

其他注意事项:绘画过程中按其他相关键盘快捷键则结束当前图形绘画。当然也不一定都是结束当前绘画执行新快捷键的功能,例如有辅助画正圆 正方的需求处理。所以这些都是根据自身业务需求进行定制功能,思维要灵活。

PS: 本文不对相关功能进行拆分,一个文件里展示完,自己写业务的时候进行相关拆分、封装即可;







你可能感兴趣的:(fabric.js,javascript,前端,前端,javascript,vue.js,html,fabric)