一个很强大canvas库（Fabric）

Posted 2023-04-12

参考技术A 1、导语

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

2、 安装

3、使用

3.1、绘制一个简单的图形

3.1.1

矩形

可以看到一个通过鼠标放大缩小且可以旋转的绿色矩形

3.1.2 

圆和矩形

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

3.2、绘制图片

主要是通过URL和img标签绘制 

3.3 通过自定义的路径绘制

我们一起先看看几个参数的含义

可以看到通过路径绘制,我们可以制作非常复杂的图形(但是一般用不到,我们一般用它来解析 SVG 后拿到 path 复原图形)

3.4 动画

animate(param1,param2,param3)

param1:动画的属性

param2：动画的最终位置

param3：可选对象（主要有如下属性）

绝对动画

相对动画

3.5、 图像滤镜

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

图像滤镜

3.6、颜色

无论你是使用十六进制，RGB 或 RGBA 颜色，Fabric 都能处理的很好

定义颜色

颜色转换

颜色叠加

3.7 渐变

Fabric 通过 setGradient 方法支持渐变，在所有对象上定义。调用 setGradient('fill', ... )就像设置一个对象的“fill”值一样。

3.8、事件

fabric 中通过 on 方法来初始化事件，off 方法用来删除事件。

常用的事件有以下

“mouse:down” 鼠标被按下

“object:add” 对象被添加

“after:render” 渲染完成

还有一大堆:

鼠标事件:“mouse:down” ,“mouse:move”和“mouse:up...” 选择相关的事件：“before:selection:cleared”, “selection:created”, 详细的可以查看 官方文档

Fabric 允许将侦听器直接附加到 canvas 画布中的对象上。

3.9、自由绘画

Fabric canvas 的 isDrawingMode 属性设置为 true 即可实现自由绘制模式.

这样画布上的点击和移动就会被立刻解释为铅笔或刷子。

最后

很开心写下这篇文章,它是我近期接触到的项目中用到的一个很强大的canvas库，所以有了这个契机就系统性的了解熟悉一下它的相关使用，希望能对你有所帮助。

参考教程

官网链接：https://gitee.com/eternitywith/fabric.js-docs-cn

CDN：http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js
github: https://github.com/Rookie-Birds/Fabric-Tutorial_zh-CN

参考文章：

https://segmentfault.com/a/1190000038688093

https://juejin.cn/post/6844903773945462792

Fabric js - 将画布宽度和高度设置为 100%

【中文标题】Fabric js - 将画布宽度和高度设置为 100%

【英文标题】：Fabric js - Set Canvas width and height to 100%

【发布时间】：2021-05-08 15:58:32

【问题描述】：

我正在使用 Fabric js 4.3.1 库，并且希望能够使画布区域适应其父 div #contCanvasLogo。

我做了一些尝试，但没有任何效果，画布会自行调整大小。 这是我的代码，但不起作用：

var canvas = this.__canvas = new fabric.Canvas('canvas');
canvas.setHeight('100%');
canvas.setWidth('100%');

#contCanvasLogo 
  width: 300px;
  height: 300px;
background: black;


#canvasborder:red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.js" integrity="sha512-CzyxOXSECwo2nGJQZ2P8fdDxWVMVzn0jNdT2lYJ3afbqDJbaQ4qxgv9sLc85f6KP8HO2y929Bu+lnPKGC3ofSg==" crossorigin="anonymous"></script>
<div id="contCanvasLogo">
  <canvas id="canvas" class="resize canvasLogo"></canvas>
</div>

【参考方案1】：

您可以通过从父容器中检索数据来设置高度和宽度。

canvas.setHeight(document.getElementById("contCanvasLogo").clientHeight);
canvas.setWidth(document.getElementById("contCanvasLogo").clientWidth);

【讨论】：

好主意，感谢您的回复，但如果我的父 div#contCanvasLogo 的宽度：100% 和高度：100% 我该怎么办？

它可以正常工作，因为来自 clientHeight/Width 的值以像素为单位进行转换