2. Fabric 简介

1. 介绍

Fabric.js —一个功能强大的Javascript库，使使用HTML5 canvas的工作变得轻而易举。 Fabric提供了画布缺少的对象模型，以及SVG解析器，交互性层和一整套其他必不可少的工具。这是一个完全开放源代码的项目，已获得麻省理工学院（MIT）的许可，多年来有许多贡献。

在发现使用原生canvas API的烦恼之后，Fabric于2010年左右开始。最初的作者正在为printio.ru创建一个交互式设计编辑器-他的创业公司允许用户设计自己的服装。他们想要的那种交互性仅在那时存在于Flash应用程序中。即使是现在，也很少有人能接近Fabric所能提供的功能。

2. 什么是Fabric

Canvas允许我们在网络上创建一些绝对惊人的图形。但是它提供的API是极令人失望地低级。如果我们只是想在画布上绘制一些基本形状而忘记它们，那是一回事。但是，只要需要进行任何形式的交互，随时更改图片或绘制更复杂的形状，情况就会发生巨大变化。

Fabric旨在解决这个问题。

原生canvas方法仅允许我们触发简单的图形命令，盲目地修改整个画布位图。想画一个矩形吗？使用fillRect（left，top，width，height）。要画一条线吗？使用moveTo（left，top）和lineTo（x，y）的命令组合。就像我们正在用刷子画画布一样，在很少的控制下将越来越多的油层涂在上面。

Fabric没有在如此低的级别上进行操作，而是在原生canvas方法之上提供了简单但功能强大的对象模型。它负责画布的状态和渲染，并让我们直接使用“对象”。

3. 原生对比使用

原生canvans

<template>
  <div class="app">
    <canvas id="canvas" width="300" height="200"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    var canvasEl = document.getElementById("canvas");
    canvasEl.style.background = 'grey'
    var ctx = canvasEl.getContext("2d");
    ctx.fillStyle = 'red';
    ctx.fillRect(100,100,20,20);
  },
};
</script>

Fabric进行相同的操作

<template>
  <canvas id="canvas" width="800" height="400"></canvas>
</template>

<script setup lang="ts">
import * as fabric from 'fabric'
import { onMounted } from 'vue'

onMounted(() => {
  var canvas = new fabric.Canvas('canvas', { backgroundColor: 'grey' })
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20
  })
  canvas.add(rect)
})
</script>