vuefabriccanvas

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

预览

使用说明

1.点击自由选择按钮，可切换为选择模式

2.正圆：点击菜单栏圆形画笔，可随意画圆，按住shift键即可画正圆

3.正方形：点击菜单栏矩形画笔，可随意画矩形，按住shift键即可画正方形

4.文本：双击画板任意位置，出现光标，可输入文字。或点击菜单栏文本输入框，在画板上任意位置点击，会出现光标

5.加减字号，需选中文本对象，再点击菜单栏加减按钮

6.前置后置图层、删除按钮需选中想操作的对象，再点击菜单栏对应操作按钮

7.重置按钮会清空画布，谨慎操作

8.颜色：可更改选中对象的颜色，画笔颜色也随之改变，后续缩画对象的颜色为切换后的颜色

9.选择图片：从本地选择图片上传，如果上传的图片宽度大于画板宽，会缩小为画板宽度，高度同理

10.ctrl+c 可复制选择对象，ctrl+v 可粘贴选中对象

11.如果没有选中对象，ctrl+v 会从剪贴板中粘贴最近一张图片

12.保存按钮可将画板保存为图片

13.删除 选中对象，按delete键可删除

14.ctrl+z 可删除画板最近一次添加的对象

fabric方法

参考地址：https://www.cnblogs.com/xc-dh/p/17218482.html

https://www.cnblogs.com/xc-dh/p/17218382.html

https://www.cnblogs.com/xc-dh/p/17218233.html