Fabric.js 常用基本操作

Fabric.js是一个功能强大且简单的HTML5画布库，它给canvas上的元素提供了交互式对象模型。借助Fabric.js，你可以轻松地绘制各种图形线条图片，对它们进行拖拽、旋转、形变等操作，并且支持丰富的事件方法

安装

npm install fabric --save
// 或者
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/451/fabric.js"></script>

创建canvas容器

import { fabric } from 'fabric'

<canvas id="canvas" width="800" height="800"></canvas>
...
const initCanvas = () =>{
    // 画布参数
    const option = {
        width:600,// 画布宽度
        height:300,// 画布高度
        backgroundColor: '#999', // 设置画布背景色
    }
    
    // 可交互画布
    const canvas = new fabric.Canvas('canvas', option);
    
    // 不可交互画布
    const canvasStatic = new fabric.StaticCanvas('canvas', option)
}

画出图形，并加入到画布中

// 创建一个矩形
const rect = new fabric.Rect({
    top:100, // 距离容器顶部
    left:100, // 距离容器左边距
    width:100, // 高度
    height:100, // 宽度
    fill: 'red', // 填充的颜色
    rx: 20, // 画圆角矩形的时候用来设置 x轴的半径
    ry: 20 // y轴的半径
})  
canvas.add(rect); // 将矩形添加到画布上

// 创建一个圆形
const circle = new fabric.Circle({
    redius:30,// 圆的半径
})

// 创建一个椭圆
const ellipse = new fabric.Ellipse({
    rx: 20, // rx > ry 椭圆是横着的，rx < ry 椭圆是竖着的，rx = ry 就是一个标准圆形
    ry: 20, // 
    top: 20,
    left: 20,
    fill: 'red',
})

// 三角形
const triangle = new fabric.Triangle({
    width: 200, // *必填
    height: 200, // *必填
    fill: 'red',
})

// 线段
const line = new fabric.Line({
    [10,10,20,20], // 起始点坐标，结束点坐标
    {
        stroke: ‘red’ // 笔触颜色
    }
})

// 折线
const polyline = new fabric.Polyline([
    {x:10,y:10},
    {x:20,y:20},
    {x:30,y:30},
    {x:40,y:40},
],{
    fill:'#000' // 填充颜色
    stroke:'#fff', // 线段颜色
    strokeWidth:10, // 线段粗细
})

// 多边型
const polygon = new fabric.Polygon([
    {x:10,y:10},
    {x:20,y:20},
    {x:30,y:30},
    {x:40,y:40},
],{
    fill:'#000' // 填充颜色
    stroke:'#fff', // 线段颜色
    strokeWidth:10, // 描边粗细 px
})

// 绘制路径
const path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({
    top:50,
    left:50,
    fill:"#fff",
    opacity: 0.5,// 不透明度
    stroke: '#000', 
    strokeWidth:10
})

M：可以理解为新的起始点 x, y 坐标
L：每个折线点的坐标
z：自动闭合(自动把结束点和起始点连起来)

注意：需要在页面容器加载完才能开始初始化(页面加载完成之后才有canvas元素)

使用图片

背景图

// 背景图基础参数
const option = {
    angle: 15, // 旋转背景图
    scaleX: 10, // x轴缩放图片
    scaleY: 10, // y轴缩放图片
}
// 注意：如果图片的尺寸没有canvas容器大就填不满，否则就会显示局部图片
canvas.setBackgroundImage('xxx.png', canvas.renderAll.bind(canvas), option);

注意：在Fabric.js里使用gif只会渲染第一帧

加载图片

// 第一个参数：图片地址
// 第二个参数：图片加载完成之后的回调函数
fabric.Image.fromURL('xxx.png',()=>{
    // 计算出缩放比。填充满容器背景
    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas),{
        scaleX: canvas.width / img.width , // 计算出x轴缩放比
        scaleY: canvas.height / img.height, // 计算出y轴缩放比
    })
})

重复展示图片

canvas.setBackgroundImage({
    source:'xxx.png', // 图片地址
    repeat: 'repeat' // 图片重复展示 
    },canvas.renderAll.bind(canvas))

重叠图像

const circle = new fabric.Circle({
    redius:30,// 圆的半径
})
canvas.add(circle);
// 设置覆盖图像的画布
canvas.setOverlayImage('xxx.png',canvas.renderAll.bind(canvas));
// 注意：使用的图片最好是透明的png,不然看不到下面的图形

使用HTML图片

const imgElement = document.getElementById("xxx");
imgElement.onload = function(){
    let imgInstance = new fabric.Image(imgElement,{
        left:100,
        top:100,
        width:100,
        height:100,
        angle:50,
    })
}

注意：图片由于文件较大，需要onload来监听图片是否加载完成，只有加载完成之后才能添加到画布中。

图片滤镜

// 单个滤镜
fabric.Image.fromURL('xxx.png',img=>{
    img.filters.push(new fabric.Image.filters.Grayscale()); // 添加滤镜
    img.applyFilters() // 图片加载完成之后使用滤镜效果
})

// 叠加滤镜
fabric.Image.fromURL('xxx.png',img=>{
// filters是一个数组，可以用数组方法执行任何所需的操作，
    img.filters.push(
        new fabric.Image.filters.Grayscale(), // 滤镜
        new fabric.Image.filters.Sepia(), // 色偏
        new fabric.image.filters.Brightness({brightness:0.3}) // 亮度
    )
    img.applyFilters()
})

fabric内置滤镜

• BaseFIlter 基本滤镜
• Blur 模糊
• Brightness 亮度
• ColorMatrix 颜色矩阵
• Contrast 对比
• Convolute 卷积
• Gamma 伽马
• Grayscale 灰度
• HueRotation 色调旋转
• Invert 倒置
• Noise 噪音
• Pixelate 像素化
• RemoveColor 已出颜色
• Resize 调整
• Saturation 饱和
• Sepia 色偏

文本

普通文本

const text = new fabric.Text("测试一下");

可编辑文本

const itext = new fabric.IText("测试两下");

文本框

const textBox = new fabric.Textbox("测试三下", {width:100})
width: 文本框的宽度