2021-08-23

这个 19.4K 的 canvas 库，功能很强大

我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas API 将会变得很困难。
而 Fabric 旨在解决这个问题
Fabric.js 是一个强大而简单的 Javascript HTML5 画布库 Fabric 在画布元素之上提供交互式对象模型 Fabric 还具有 SVG-to-canvas（和 canvas-to-SVG）解析器
安装方法

yarn add fabric -S
#or
npm i fabric -S

Fabric 提供了 7 种基础形状：
fabric.Circle (圆)
fabric.Ellipse (椭圆)
fabric.Line (线)
fabric.Polyline (多条线绘制成图形)
fabric.triangle (三角形)
fabric.Rect (矩形)
fabric.Polygon (多边形)

<canvas id="canvas" width="500" height="500"></canvas>
// js

//引入fabric
import { fabric } from "fabric";

// 创建一个fabric实例
let canvas = new fabric.Canvas("canvas"); //可以通过鼠标方法缩小,旋转
// or
// let canvas = new fabric.StaticCanvas("canvas");//没有鼠标交互的fabric对象

// 创建一个矩形对象
let rect = new fabric.Rect({
    left: 200, //距离左边的距离
    top: 200, //距离上边的距离
    fill: "green", //填充的颜色
    width: 200, //矩形宽度
    height: 200, //矩形高度
});

// 将矩形添加到canvas画布上
canvas.add(rect);