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: 文本框的宽度
类似资料：