基于fabricjs搭建canvas画布 - 创建画布

259 阅读2分钟

为什么选择fabricjs

canvas画布由于本身提供的api使用上并不是很便捷,所以一般在进行canvas画布使用的时候,我们会选用一些三方库。这些三方库对一些常用api进行了聚合和封装改进,更进一步的会在上层在做一些其他的处理,这里面做的比较好的有fabricjspixi,其中fabricjs相对来说时间更久,类似于jquery在js中的地位

画布需求分析

我们实现一个画布前,首先得清楚画布需要实现的基本功能。这里我们梳理一下一个画布必须包含的基础能力。

基础功能

  1. 无限画布 这应该是先有canvas画布插件统一提供的基础能力
  2. 本地上传 本地资源可以上传到画布实现渲染
  3. 画布操作
    1. 画布平移
    2. 画布缩放(鼠标位置作为中心点)
  4. 图片操作
    1. 图片拖动
    2. 图片缩放
  5. 画笔 画笔的基础参数修改,画笔粗细、颜色
  6. 橡皮擦 也是基础配置的修改,橡皮擦的大小
  7. 下载画布 如何可以完整的下载整张画布上的所有资源,包括不在屏幕内但处于画布上的元素

搭建画布

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组件放在我们画布的顶部 仓库地址

page.png

下一篇: # 基于fabricjs搭建canvas画布 - 画布渲染图片