1、导语
我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候,使用原生 canvas API 将会变得很困难。而fabric 旨在解决这个问题。
2、 安装
yarn add fabric --save-dev npm install fabric --save-dev
or
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js" async></script>
3、使用
<canvas id="canvas" width="300" height="300">
你的浏览器不支持 canvas，请升级你的浏览器
</canvas>
3.1、绘制一个简单的图形
Fabric 提供了 7 种基础形状：
fabric.Circle (圆)
fabric.Ellipse (椭圆)
fabric.Line (线)
fabric.Polyline (多条线绘制成图形)
fabric.triangle (三角形)
fabric.Rect (矩形)
fabric.Polygon (多边形)
3.1.1
矩形
// 创建一个fabric实例
let canvas = new fabric.Canvas("canvas"); //可以通过鼠标方法缩小,旋转
// or
// let canvas = new fabric.StaticCanvas("canvas");//没有鼠标交互的fabric对象
// 创建一个矩形对象
let rect = new fabric.Rect({
left: 20, //距离左边的距离
top: 20, //距离上边的距离
fill: "green", //填充的颜色
width: 200, //矩形宽度
height: 200, //矩形高度
});
// 将矩形添加到canvas画布上
canvas.add(rect);
可以看到一个通过鼠标放大缩小且可以旋转的绿色矩形
3.1.2
圆和矩形
// 创建一个圆形对象
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); // 只是禁止这个矩形选中
3.2、绘制图片
主要是通过URL和img标签绘制
//通过url绘制图片
fabric.Image.fromURL(
//本地图片需要通过require来引入,require("./xxx.jpeg")
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.thaihot.com.cn%2Fuploadimg%2Fico%2F2021%2F0711%2F1625982535739193.jpg&refer=http%3A%2F%2Fimg.thaihot.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630940858&t=e1d24ff0a7eaeea2ff89cedf656a9374",
(img) => {
img.scale(0.5);
canvas.add(img);
}
);
//也可以通过标签绘制
let img = document.getElementById("img");
let image = new fabric.Image(img, {
left: 100,
top: 100,
opacity: 0.8,
});
canvas.add(image);
3.3 通过自定义的路径绘制
我们一起先看看几个参数的含义
M : “move”移动到某点
L : “line”画线 x,y
C : “curve”曲线
A : “arc”弧
z : 闭合路径(类似 PS 中的创建选区)
let customPath = new fabric.Path("M 0 0 L 300 100 L 170 100 z");
customPath.set({
left: 100,
top: 100,
fill: "green",
});
canvas.add(customPath);
可以看到通过路径绘制,我们可以制作非常复杂的图形(但是一般用不到,我们一般用它来解析 SVG 后拿到 path 复原图形)
3.4 动画
animate(param1,param2,param3)
param1:动画的属性
param2：动画的最终位置
param3：可选对象（主要有如下属性）
duration 默认为 500ms。可以用来改变动画的持续时间。
from 允许指定动画属性的起始值（如果我们不希望使用当前值）。
onComplete 动画结束之后的回调。
easing 动效函数。很多内置动画效果, fabric.util.ease 下有一大堆动效的选项。常用的有easeOutBounce,easeInCubic，easeOutCubic，easeInElastic，easeOutElastic，easeInBounce 和 easeOutExpo等
绝对动画
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: 10000,
});
rect.set({ angle: 45 });
rect.animate("angle", "-=90", {
onChange: canvas.renderAll.bind(canvas),
duration: 2000,
});
3.5、 图像滤镜
目前 Fabric 为我们提供了以下内置滤镜
BaseFilter 基本过滤器
Blur 模糊
Brightness 亮度
ColorMatrix 颜色矩阵
Contrast 对比
Convolute 卷积
Gamma 伽玛
Grayscale 灰度
HueRotation 色调旋转
Invert 倒置
Noise 噪音
Pixelate 像素化
RemoveColor 移除颜色
Resize 调整大小
Saturation 饱和
图像滤镜
fabric.Image.fromURL("./aaa.jpeg", (img) => {
img.scale(0.5);
canvas.add(img);
});
fabric.Image.fromURL("./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);
});
3.6、颜色
无论你是使用十六进制，RGB 或 RGBA 颜色，Fabric 都能处理的很好
定义颜色
new fabric.Color("#f55");
new fabric.Color("#aa3123");
new fabric.Color("356333");
new fabric.Color("rgb(100,50,100)");
new fabric.Color("rgba(100, 200, 30, 0.5)");
颜色转换
new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
new fabric.Color('fff').toHex(); // "FFFFFF"
颜色叠加
let redish = new fabric.Color("#f55");
let greenish = new fabric.Color("#5f5");
redish.overlayWith(greenish).toHex(); // "AAAA55"
redish.toGrayscale().toHex(); // "A1A1A1"
3.7 渐变
Fabric 通过 setGradient 方法支持渐变，在所有对象上定义。调用 setGradient('fill', { ... })就像设置一个对象的“fill”值一样。
let circle = new fabric.Circle({
left: 100,
top: 100,
radius: 50
});
circle.setGradient("fill", {
// 渐变开始的位置
x1: 0,
y1: 0,
// 渐变结束的位置
x2: circle.width,
y2: 0,
//渐变的颜色
colorStops: {
// 渐变的范围(0,0.1,0.3,0.5,0.75,1)0-1之间都可以
0: "red",
0.2: "orange",
0.4: "yellow",
0.6: "green",
0.8: "blue",
1: "purple"
},
});
3.8、事件
fabric 中通过 on 方法来初始化事件，off 方法用来删除事件。
常用的事件有以下
“mouse:down” 鼠标被按下
“object:add” 对象被添加
“after:render” 渲染完成
还有一大堆:
鼠标事件:“mouse:down” ,“mouse:move”和“mouse:up...” 选择相关的事件：“before:selection:cleared”, “selection:created”, 详细的可以查看 官方文档
canvas.on("mouse:down",function(options){
canvas.clear();
lettext =newfabric.Text("你点我啦~", {
left:200,
top:200,
});
canvas.add(text);
console.log(options.e.clientX, options.e.clientY);
});
canvas.on("mouse:up",function(options){
this.text ="你没点我0.0";
canvas.clear();
lettext =newfabric.Text("你没点我0.0", {
left:200,
top:200,
});
canvas.add(text);
console.log(options.e.clientX, options.e.clientY);
});
Fabric 允许将侦听器直接附加到 canvas 画布中的对象上。
let rect = new fabric.Rect({ width: 100, height: 50, fill: "green" });
rect.on("selected", function () {
console.log("哦吼~你选择了我 rect");
});
canvas.add(rect);
circle.on("selected", function () {
console.log("哈哈哈~你选择了我");
});
3.9、自由绘画
Fabric canvas 的 isDrawingMode 属性设置为 true 即可实现自由绘制模式.
这样画布上的点击和移动就会被立刻解释为铅笔或刷子。
let canvas =new fabric.Canvas("canvas");
canvas.isDrawingMode =true;
canvas.freeDrawingBrush.color ="blue";
canvas.freeDrawingBrush.width =5;
最后
很开心写下这篇文章,它是我近期接触到的项目中用到的一个很强大的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
