fabric.js介绍

fabric.js是可以简化canvas编写的js库，提供canvas缺少的对象模型，包含动画、数据序列化和反序列化的等高级功能的js库，开源项目，在GitHub有很多人贡献。

官网：Fabric.js Javascript Canvas Library (fabricjs.com)

文档：JSDoc: Home (fabricjs.com)

示例：Demos — Fabric.js Javascript Canvas Library (fabricjs.com)

fabric.js笔记

对象

fabric.Circle 圆
fabric.Ellipse 椭圆
fabric.Line 直线
fabric.Polygon
fabric.Polyline
fabric.Rect 矩形
fabric.Triangle 三角形

方法

add(object) 添加
insertAt(object,index) 添加
remove(object) 移除
forEachObject 循环遍历
getObjects() 获取所有对象
item(int) 获取子项
isEmpty() 判断是否空画板
size() 画板元素个数
contains(object) 查询是否包含某个元素
fabric.util.cos
fabric.util.sin
fabric.util.drawDashedLine 绘制虚线
getWidth() setWidth()
getHeight()
clear() 清空
renderAll() 重绘
requestRenderAll() 请求重新渲染
rendercanvas() 重绘画板
getCenter().top/left 获取中心坐标
toDatalessJSON() 画板信息序列化成最小的json
toJSON() 画板信息序列化成json
moveTo(object,index) 移动
dispose() 释放
setCursor() 设置手势图标
getSelectionContext()获取选中的context
getSelectionElement()获取选中的元素
getActiveObject() 获取选中的对象
getActiveObjects() 获取选中的多个对象
discardActiveObject()取消当前选中对象
isType() 图片的类型
setColor(color) = canvas.set("full","");
rotate() 设置旋转角度
setCoords() 设置坐标

事件

object:added
object:removed
object:modified
object:rotating
object:scaling
object:moving
object:selected 这个方法v2已经废弃，使用selection:created替代，多选不会触发
before:selection:cleared
selection:cleared
selection:updated
selection:created
path:created
mouse:down
mouse:move
mouse:up
mouse:over
mouse:out
mouse:dblclick

常用属性

canvas.isDrawingMode = true; 可以自由绘制
canvas.selectable = false; 控件不能被选择，不会被操作
canvas.selection = true; 画板显示选中
canvas.skipTargetFind = true; 整个画板元素不能被选中
canvas.freeDrawingBrush.color = "#E34F51" 设置自由绘画笔的颜色
freeDrawingBrush.width 自由绘笔触宽度

IText的方法

selectAll() 选择全部
getSelectedText() 获取选中的文本
exitEditing() 退出编辑模式

 

图片去掉选中边框和旋转，且只能移动，不可操作

oImg.hasControls = false; 只能移动不能（编辑）操作
oImg.hasBorders = false; 去掉边框，可以正常操作
hasRotatingPoint = false; 不能被旋转
hasRotatingPoint 控制旋转点不可见

用法示例：

fabric.Image.fromURL("300.jpg", function (oImg) {

canvas.add(oImg);

oImg.hasControls = oImg.hasBorders = false;

});

动画

第一个参数是动画的属性，第二个参数是动画的最终位置，第三个参数是一个可选的对象，指定动画的细节：持续时间，回调，动效等。

第三个参数主要有

duration 默认为 500ms。可以用来改变动画的持续时间。

from 允许指定动画属性的起始值（如果我们不希望使用当前值）。

onComplete 动画结束之后的回调。

easing 动效函数。

绝对动画

用法示例：

let canvas = new fabric.Canvas("canvas");
let rect = new fabric.Rect({
    left: 400, //距离左边的距离
    top: 200, //距离上边的距离
    fill: "green", //填充的颜色
    width: 200, //宽度
    height: 200, //高度
});
rect.animate("left", 100, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
});
canvas.add(rect);

相对动画(第二个参数通过+=,-=等来决定动画的最终效果)

rect.animate("left", "+=100", {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
});

定义动画的动效函数

默认情况下，动画使用“easeInSine”动效执行。如果这不是你需要的，fabric 为我们提供了很多内置动画效果, fabric.util.ease 下有一大堆动效的选项。

常用的有easeOutBounce,easeInCubic，easeOutCubic，easeInElastic，easeOutElastic，easeInBounce 和 easeOutExpo等，用法示例：

rect.animate("left", 100, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
    easing: fabric.util.ease.easeOutBounce,
});

图像滤镜

目前 Fabric 为我们提供了以下内置滤镜

BaseFilter 基本过滤器

Blur 模糊

Brightness 亮度

ColorMatrix 颜色矩阵

Contrast 对比

Convolute 卷积

Gamma 伽玛

Grayscale 灰度

HueRotation 色调旋转

Invert 倒置

Noise 噪音

Pixelate 像素化

RemoveColor 移除颜色

Resize 调整大小

Saturation 饱和

用法示例：

fabric.Image.fromURL(require("./aaa.jpeg"), (img) => {
    img.scale(0.5);
    // 添加滤镜
    img.filters.push(new fabric.Image.filters.Grayscale());
    // 图片加载完成之后，应用滤镜效果
    img.applyFilters();
    img.set({
        left: 300,
        top: 250,
    });
    canvas.add(img);
});

以原点为中心（左上角），缩放画布

      // 监听鼠标滚轮事件

      canvas.on('mouse:wheel', opt => {

        let delta = opt.e.deltaY // 滚轮向上滚一下是 -100，向下滚一下是 100

        let zoom = canvas.getZoom() // 获取画布当前缩放值

        // 控制缩放范围在 0.01~20 的区间内

        zoom *= 0.999 ** delta

        if (zoom > 20) zoom = 20

        if (zoom < 0.01) zoom = 0.01

        // 设置画布缩放比例

        canvas.setZoom(zoom)

      })

以鼠标指针为中心，缩放画布

  // 监听鼠标滚轮事件

  canvas.on('mouse:wheel', opt => {

    let delta = opt.e.deltaY // 滚轮向上滚一下是 -100，向下滚一下是 100

    let zoom = canvas.getZoom() // 获取画布当前缩放值

    // 控制缩放范围在 0.01~20 的区间内

    zoom *= 0.999 ** delta

    if (zoom > 20) zoom = 20

    if (zoom < 0.01) zoom = 0.01

    canvas.zoomToPoint(

      {

        x: opt.e.offsetX, // 鼠标x轴坐标

        y: opt.e.offsetY  // 鼠标y轴坐标

      },

      zoom // 最后要缩放的值

)

opt.e.preventDefault()

opt.e.stopPropagation()

  })

点击按钮控制缩放

// html     

<button @click="setZoom(0.1)">放大</button>

<button @click="setZoom(-0.1)">缩小</button>

// js

// 点击控制缩放

setZoom(val) {

    let zoom = this.canvas.getZoom() + parseFloat(val);

    zoom = Math.max(0.2, zoom);

    zoom = Math.min(5, zoom);

    let backPoint = this.canvas.getCenterPoint();

    console.log(backPoint);

    this.canvas.zoomToPoint(backPoint, zoom);

},

拖拽

canvas.selection = false;

      canvas.on('mouse:down', opt => { // 鼠标按下时触发

        let evt = opt.e

       

          canvas.isDragging = true // isDragging 是自定义的，开启移动状态

          canvas.lastPosX = evt.clientX // lastPosX 是自定义的

          canvas.lastPosY = evt.clientY // lastPosY 是自定义的

      })

      canvas.on('mouse:move', opt => { // 鼠标移动时触发

        console.log('查看e',opt);

        if (canvas.isDragging) {

          let evt = opt.e

          let vpt = canvas.viewportTransform // 聚焦视图的转换

          vpt[4] += evt.clientX - canvas.lastPosX

          vpt[5] += evt.clientY - canvas.lastPosY

          canvas.requestRenderAll() // 重新渲染

          canvas.lastPosX  = evt.clientX

          canvas.lastPosY  = evt.clientY

           canvas.requestRenderAll() // 重新渲染

        }

      })

      canvas.on('mouse:up', opt => { // 鼠标松开时触发

        canvas.setViewportTransform(canvas.viewportTransform) // 设置此画布实例的视口转换  

        canvas.isDragging = false // 关闭移动状态

      })

画布保存与恢复

var json = canvas.cloneJSON(); // 将画布状态序列化为 JSON 对象

console.log(json); // 可以将此 JSON 对象保存到服务器或进行其他操作

// 从 JSON 恢复画布状态

var newCanvas = new fabric.Canvas('newCanvas');

newCanvas.loadFromJSON(json); // 从 JSON 对象恢复画布状态

背景图

fabric.Image.fromURL('../../images/bg.jpg', img => {

  canvas.setBackgroundImage(img)

canvas.backgroundVpt=false;//背景图锁定，即不随画布缩放而改变

  canvas.renderAll()

})

设置完背景图再执行 canvas.renderAll() 才会重新渲染，不然画面看上去是没效果的。