为什么选择fabricjs
canvas画布由于本身提供的api使用上并不是很便捷，所以一般在进行canvas画布使用的时候，我们会选用一些三方库。这些三方库对一些常用api进行了聚合和封装改进，更进一步的会在上层在做一些其他的处理，这里面做的比较好的有fabricjs、pixi,其中fabricjs相对来说时间更久，类似于jquery在js中的地位
画布需求分析
我们实现一个画布前，首先得清楚画布需要实现的基本功能。这里我们梳理一下一个画布必须包含的基础能力。
基础功能
- 无限画布 这应该是先有canvas画布插件统一提供的基础能力
- 本地上传 本地资源可以上传到画布实现渲染
- 画布操作
- 画布平移
- 画布缩放(鼠标位置作为中心点)
- 图片操作
- 图片拖动
- 图片缩放
- 画笔 画笔的基础参数修改，画笔粗细、颜色
- 橡皮擦 也是基础配置的修改，橡皮擦的大小
- 下载画布 如何可以完整的下载整张画布上的所有资源，包括不在屏幕内但处于画布上的元素
搭建画布
fabric创建画布
fabric创建画布其实很简单，接下来我们就通过fabric先来创建一个画布
<script src="/src/assets/js/fabric.min.js"></script>
<canvas id="c"></canvas>
new fabric.Canvas('c', {})
首先引入fabricjs，在html中创建一个canvas标签用来作为我们的目标画布。接下来要通过fabric创建一个画布，我们只需要new一个fabric.Canvas对象就可以了 此处可以有一些参数，常见的比如width、height
new fabric.Canvas('c', {
width: '800px',
height: '500px'
})
类封装
为了方便后面维护以及调用，我们在此处可以针对需求的画布进行对象封装,然后在对外暴露出画布操作需要的api
Stage类
提供基础的Stage类作为我们的画布对象, 在new 时调用我们上面new fabric.Canvas('c', {})方法来创建一个画布
通过 innerWidth``innerHeight将画布的大小设置为全屏
class Stage {
constructor(el){
this.el = el;
this.canvas = null;
this.init();
}
init() {
if (!this.el) throw "缺少el元素";
this.canvas = new fabric.Canvas(this.el, {
width: innerWidth,
height: innerHeight,
});
}
}
此时我们再创建一个画布，通过一下方式
new Stage(c)
基本的页面布局
画布的功能比如上传、画笔、橡皮擦等都需要页面上有固定的按钮来触发，所以我们的页面需要有一个简单的布局，也就是需要一个toolbar来安置这些按钮。
so我们写一个简单的toolbar组件放在我们画布的顶部 仓库地址
