fabric.js使用指南
当前位置：知识管理交流
→『 技术文档交流 』
1.导语我们想在画布上画个基本的简单形状的时候，使用 Canvas 不会觉得有什么繁琐。但当画布上需要任何形式的互动，绘制复杂的图形和在特定情况需要改变图片的时候，使用原生 canvas API 将会变得很困难。而 Fabric 旨在解决这个问题。
为了方便，下面我将通过 vue项目 为大家讲解如何使用 Fabric 2. 安装yarn add fabric -S #or npm i fabric -S 也可以在 官网 下载最新 js 文件，通过 script 标签引入。 3. 使用<!-- html --> <canvas id="canvas" width="500" height="500"></canvas> 3.1 绘制一个简单的图形
矩形 //引入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: left: 200, //距离左边的距离 top: 0, //距离上边的距离 fill: "blue", //填充的颜色 width: 100, //宽度 height: 100, //高度 }); // 将图形形添加到canvas画布上 canvas.add(circle, triangle);
我们可以通过以下属性设置,决定是否可以对相关元素进行交互 rect.set("selectable", false); // 只是禁止这个矩形选中 3.2 绘制图片主要有通过 url 和 img 标签绘制两种方式 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 通过自定义的路径绘制在此之前我们需要了解几个参数的含义
customPath.set({
left: 100,
top: 100,
fill: "green",
}); canvas.add(customPath);
"M 0 0 L 300 100 L 170 100 L 70 300 L 20 200 C136.19,2.98,128.98,0,121.32,0 z" );
可以看到通过路径绘制,我们可以制作非常复杂的图形(但是一般用不到,我们一般用它来解析 SVG 后拿到 path 复原图形) 3.4 动画第一个参数是动画的属性，第二个参数是动画的最终位置，第三个参数是一个可选的对象，指定动画的细节：持续时间，回调，动效等。
绝对动画let rect = new fabric.Rect({ left: 400, //距离左边的距离 top: 200, //距离上边的距离 fill: "green", //填充的颜色 width: 200, //宽度 height: 200, //高度 }); rect.animate( rect.animate("left", 100, { onChange: canvas.renderAll.bind(canvas), duration: 1000, }); canvas.add(rect);
相对动画(第二个参数通过+=,-=等来决定动画的最终效果) onChange: canvas.renderAll.bind(canvas),
duration: 1000,
});
rect.animate("angle", "-=90", { onChange: canvas.renderAll.bind(canvas), duration: 2000, }); [object Object] 定义动画的动效函数默认情况下，动画使用“easeInSine”动效执行。如果这不是你需要的，fabric 为我们提供了很多内置动画效果, fabric.util.ease 下有一大堆动效的选项。 onChange: canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutBounce,
}); [object Object] 3.5 图像滤镜目前 Fabric 为我们提供了以下内置滤镜
单个滤镜 img.scale(0.5);
canvas.add(img);
}); 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);
}); [object Object] 叠加滤镜
img.scale(0.5); // 添加滤镜 img.filters.push( new fabric.Image.filters.Grayscale(), new fabric.Image.filters.Grayscale(),new fabric.Image.filters.Sepia(), //色偏 new fabric.Image.filters.Brightness({ brightness: 0.2 }) //亮度 ); // 图片加载完成之后，应用滤镜效果 img.applyFilters(); img.set({ left: 300, top: 250, }); canvas.add(img); });
可以看到多个滤镜的效果叠加显示了,当然 Fabric 还支持自定义滤镜,在本篇文章点赞过 500 后我将更新 fabric 高级篇,感谢大家的支持~ 3.6 颜色
定义颜色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('rgb(100,100,100)').toHex(); // "646464"new fabric.Color('fff').toHex(); // "FFFFFF" 我们还可以用另一种颜色叠加，或将其转换为灰度版本。 let greenish = new fabric.Color("#5f5");
redish.overlayWith(greenish).toHex(); // "AAAA55" redish.toGrayscale().toHex(); // "A1A1A1" 3.7 渐变Fabric 通过 setGradient 方法支持渐变，在所有对象上定义。调用 setGradient('fill', { ... })就像设置一个对象的“fill”值一样。 left: 100,
top: 100,
radius: 50 });
circle.setGradient("fill", { // 渐变开始的位置 x1: 0, y1: 0, // 渐变结束的位置 x2: circle. 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.Text 对象对于文本,提供了比 canvas 更丰富的功能，包括：
"大家好~这里是前埔寨\n我是荣顶~\n一个要成为开发王的男人!",
{
left: 0,
top: 200, fontFamily: "Comic Sans", //字体 fontSize: 50, //字号 fontWeight: 800, //字体粗细,可以使用关键字（“normal”，“bold”）或数字（100,200,400,600,800） shadow: "green 3px 3px 2px", //文字阴影,颜色，水平偏移，垂直偏移和模糊大小。 underline: true, //下划线 linethrough: true, //删除线 overline: true, //上划线 fontStyle: "italic", //字体风格,normal（正常）或italic（斜体） stroke: "#c3bfbf", //描边的颜色 strokeWidth: 1, //描边的宽度 textAlign: "center", //文本对齐方式 lineHeight: 1.5, //行高 textBackgroundColor: "#91A8D0", //文本背景颜色 } ); canvas.add(text); ); canvas.add(text);
3.9 事件fabric 中通过 on 方法来初始化事件，off 方法用来删除事件。常用的事件有以下：
canvas.clear();
let text = new fabric.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();
let text = new fabric.Text("你没点我0.0", {
left: 200,
top: 200,
});
canvas.add(text);
console.log(options.e.clientX, options.e.clientY);
});
Fabric 允许将侦听器直接附加到 canvas 画布中的对象上。 rect.on("selected", function() {
console.log("哦吼~你选择了我");
}); let circle = new fabric.Circle({ radius: 75, fill: "blue" });
circle.on("selected", function() {
console.log("哈哈哈~你选择了我");
}); 3.10自由绘画Fabric canvas 的 isDrawingMode 属性设置为 true 即可实现自由绘制模式. canvas.isDrawingMode = true;canvas.freeDrawingBrush.color = "blue";canvas.freeDrawingBrush.width = 5;
4. 最后很开心写下这篇文章，它是我用来总结归纳 fabric 的知识点，并且非常用心的一篇文章，希望这篇文章对你有所帮助。目前 fabric 在国内还不是很火,但是 github 上已经有 19.2k 的 star 了,也算是一个明星项目。我们日常开发经常会用到 canvas，但是它的 api 对于处理复杂的业务逻辑会令人感到非常的劳累，分享这篇文章，希望对大家有所帮助！ 该文章在 2023/5/23 12:26:31 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
