2 万 Star！一个强大而简单的 JS 画布库

来源于前端超人 ，作者荣顶

导语

我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas API 将会变得很困难。

而 Fabric 旨在解决这个问题。

https://github.com/fabricjs/fabric.js

Fabric.js 是一个强大而简单的 Javascript HTML5 画布库。Fabric 在画布元素之上提供交互式对象模型 Fabric 还具有 SVG-to-canvas（和 canvas-to-SVG）解析器。

为了方便,下面我将通过 vue项目 为大家讲解如何使用 Fabric

一、安装

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

也可以在 官网 下载最新 js 文件,通过 script 标签引入

二、使用

<!-- html -->
<canvas id="canvas" width="500" height="500"></canvas>

2.1 绘制一个简单的图形

Fabric 提供了 7 种基础形状：

• fabric.Circle (圆)
• fabric.Ellipse (椭圆)
• fabric.Line (线)
• fabric.Polyline (多条线绘制成图形)
• fabric.triangle (三角形)
• fabric.Rect (矩形)
• fabric.Polygon (多边形)
• 矩形

// 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);

可以看到界面中填充了一个可以通过鼠标放大缩小且可以旋转的绿色矩形 通过对象的形式配置元素样式,非常的方便!

• 圆形和三角形

// 创建一个圆形对象
let circle = new fabric.Circle({
    left: 0, //距离左边的距离
    top: 0, //距离上边的距离
    fill: "red", //填充的颜色
    radius: 50, //圆的半径
});
// 创建一个三角形对象
let triangle = new fabric.Triangle({
    left: 200, //距离左边的距离
    top: 0, //距离上边的距离
    fill: "blue", //填充的颜色
    width: 100, //宽度
    height: 100, //高度
});
// 将图形形添加到canvas画布上
canvas.add(circle, triangle);

我们可以通过以下属性设置,决定是否可以对相关元素进行交互

canvas.selection = false; // 禁止所有选中
rect.set("selectable", false); // 只是禁止这个矩形选中

2.2 绘制图片