Fabric.js学习笔记

最新推荐文章于 2024-09-13 22:29:02 发布

翎羽飘

最新推荐文章于 2024-09-13 22:29:02 发布

阅读量2.7w

点赞数 7

分类专栏：前端框架 JavaScript 文章标签： canvas JavaScript

本文链接：https://blog.csdn.net/u014032819/article/details/77864682

版权

前端框架同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

本文介绍了一个用于canvas绘图的强大库Fabric.js，详细讲解了如何利用该库创建、填充图形，处理图片，设置动画及实现用户交互等功能。同时，还介绍了如何进行颜色处理、文本设置、图形组合以及序列化和反序列化。

摘要由CSDN通过智能技术生成

因为快要毕业设计开题了，大概找的方向需要用到canvas画图，但是画起来real麻烦，就找呀找，发现了Fabric.js，然后就开始学习，发现了胜洪宇老师的教程，做了一下学习笔记，敲了一下代码放在了github上，欢迎大家参考～～

GitHub地址：https://github.com/YZlingyu/fabric.js

Fabric官网地址：http://fabricjs.com

Fabric GitHub地址：https://github.com/kangax/fabric.js/

下面就是笔记正文啦～

1、 Fabric.js能做的事情：

1）在canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）

2）给图形填充渐变颜色

3）组合图形（包括组合图形、图形文字、图片等）

4）设置图形动画集用户交互

5）生成JSON, SVG数据等。

一、准备

1. Fabric不需要安装，只要在官网或GitHub上下载fabric.js，使用<script>标签引入即可

二、绘制图形

绘制图形需要三部曲：

1. 绘制规则图形

1）声明画布：

var canvas =new fabric.Canvas('main');

2）绘制图形：

var rect = new fabric.Rect({
    left:100,//距离画布左侧的距离，单位是像素
    top:100,//距离画布上边的距离
    fill:'red',//填充的颜色
    width:30,//方形的宽度
    height:30//方形的高度
 });

3）添加图形：

canvas.add(rect);

绘制方形：var rect = new fabric.Rect

绘制圆形：var circle = new fabric.Circle

绘制三角形：var triangle = new fabric.Triangle

2. 绘制不规则图形：

使用路径绘图：用点和线的移动的方式进行绘图。通过对线、曲线、弧的应用绘制非常复杂的图形。

var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120,fill:'red' });
canvas.add(path);

三、对图片的操作：

1. 插入图片：

1）在html中插入图片

<body>
    <canvas id="canvas" width='800' height='800'></canvas>
    <img src="./2.png" id="img">
    <script type="text/javascript" src="./script.js"></script>
</body>

var canvas = new fabric.Canvas('canvas');//声明画布
var imgElement = document.getElementById('img');//声明我们的图片
 
var imgInstance = new fabric.Image(imgElement,{  //设置图片在canvas中的位置和样子
     left:100,
     top:100,
     width:200,
     height:100,
     angle:30//设置旋转
});
 
canvas.add(imgInstance);//加入到canvas中

2）在js中插入图片

<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       <script type="text/javascript" src="../fabric.js"></script>
        <style>
        body{background-color: #ccc;}
        #canvas{display:block;background-color:#fff;border:1px solid #000;}
        </style>
    </head>
    <body>
        <canvas id="canvas" width='800' height='800'></canvas>
        <script type="text/javascript" src="./script.js"></script>
    </body>
</html>

var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('./2.png', function(oImg) {
    oImg.scale(0.1);//图片缩小10倍
  canvas.add(oImg);
});

2. 过滤器：类似于滤镜

通过object.filters.push():添加过滤器，可以选择需要的过滤器

object.applyFilters():在画布渲染结束后应用过滤器进行图片渲染。

var canvas = new fabric.Canvas('canvas');
 
fabric.Image.fromURL('2.jpg', function(img) {
    //添加过滤器
    img.filters.push(new fabric.Image.filters.Grayscale());
    //应用过滤器并重新渲染画布执行
    img.applyFilters(canvas.renderAll.bind(canvas));
    canvas.add(img);//把图片添加到画布上
});

四、对颜色的处理

1. 颜色的定义方式：hex（16进制），RGB, RGBA

new fabric.Color('#f55');
new fabric.Color('#123123');
new fabric.Color('356735');
new fabric.Color('rgb(100,0,100)');
new fabric.Color('rgba(10, 20, 30, 0.5)');

2. 转换方式：

new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
new fabric.Color('fff').toHex(); // "FFFFFF"

3. 渐变色：

circle.setGradient('fill', {
    //色标的位置
    x1: 0,
    y1: 0,//圆的最上沿位置
    x2: 0,
    y2: circle.height ,//圆的最下沿位置
    //渐变的颜色
    colorStops: {
        0: '#000',
        1: '#fff'
    }
});

通过对colorStops的数字进行设置，设置多颜色的渐变，色标的位置指起始位置到渐变色结束为止，定义方向。

x坐标不变，则是纵向变换，y坐标不变则是横向变换。

colorStops: {
        0: "red",
        0.2: "orange",
        0.4: "yellow",
        0.6: "green",
        0.8: "blue",
        1: "purple"
    }//彩虹的效果

五、文本设置：

var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);

可以对文本的属性进行设置：

字体样式：fontFa mi ly: 'Comic Sans'

字体大小：fontSize: 40

字体加粗：fontWeight: 'bold'//加粗字体

字体textdecoration：textDecoration: 'underline'

六、用户交互：on()

1）对画布的交互

var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function(options) {
    console.log(options.e.clientX, options.e.clientY)
})

2）对画布上对象的操作：

var canvas = new fabric.Canvas('canvas');
//方形
var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {//选中监听事件
    console.log('selected a rectangle');
});
//圆形
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
    console.log('selected a circle');
});
 
canvas.add(rect);
canvas.add(circle);

3）监听事件：

mouse:down :鼠标按下时
mouse:move :鼠标移动时
mouse:up :鼠标抬起时
after:render :画布重绘后
object:selected:对象被选中
object:moving:对象移动
object:rotating:对象被旋转
object:added:对象被加入
object:removed对象被移除

七、动画：animate()

rect.animate('angle',360,{
	onChange:canvas.renderAll.bind(canvas)
})

接受的三个参数：动画属性、发生变化的结束值、设置动画的细节属性。

1）自增，让方形相对于现在的位置向左移动100px：

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

2）自减，方形相对于现在的角度逆时针旋转5度：

rect.animate('angle','-=5',{onChange:canvas.renderAll.bind(canvas)});

3）duration:设置动画持续的时间

duration:1000,

4）easing:设置动画的缓动属性

easing:fabric.util.ease.easeOutBounce

八、组合

1）new fabric.Group():接受两个参数：要组合对象名称组成的数组、组合到一起的对象的共同属性。

var canvas = new fabric.Canvas('canvas');
//绘制圆形
var circle = new fabric.Circle({
    radius: 100,
    fill: '#eef',
    scaleY: 0.5,
    originX: 'center',//调整中心点的X轴坐标
    originY: 'center'//调整中心点的Y轴坐标
});
//绘制文本
var text = new fabric.Text('Hello World', {
    fontSize: 30,
    originX: 'center',
    originY: 'center'
})
//进行组合
var group = new fabric.Group([circle, text], {
    left: 150,
    top: 100,
    angle: 10
})
 
canvas.add(group);

2）操作组合中的图形：item

group.item(0).setFill('red');
group.item(1).set({
    text: 'trololo',
    fill: 'white'
});

3）在组合中再次加入图形

group.add(new fabric.Rect({
    fill: 'blue',
    width: 100,
    height: 100,
    originX: 'center',
    originY: 'center'
}));//不更新组合区域，可能后加入的图形不能显示完全

group.addWithUpdate(new fabric.Rect({//更新组合区域
  ...
  left: group.getLeft(),
  top: group.getTop(),
  originX: 'center',
  originY: 'center'
}));

4）复制已有图形，并重新渲染

var group = new fabric.Group([
  canvas.item(0).clone(),
  canvas.item(1).clone()
]);
 
// remove all objects and re-render
canvas.clear().renderAll();
 
// add group onto canvas
canvas.add(group);

5）组合图片:层层嵌套

var canvas = new fabric.Canvas('canvas');
 
fabric.Image.fromURL('1.png', function(img) {
    var img1 = img.scale(0.1).set({
        left: 100,
        top: 100
    });
    fabric.Image.fromURL('2.png', function(img) {
        var img2 = img.scale(0.1).set({
            left: 175,
            top: 175
        });
        fabric.Image.fromURL('1.png', function(img) {
            var img3 = img.scale(0.1).set({ left: 250, top: 250 });
 
            canvas.add(new fabric.Group([img1, img2, img3], { left: 200, top: 200 }));
        });
    });
});

九、序列化、反序列化、转化为svg格式

1）序列化：

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
    width: 100,
    height: 100,
    fill: 'red'
});
canvas.add(rect);
 
console.log(JSON.stringify(canvas.toJSON()));

2）反序列化：

var canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null

3）svg：

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
    width: 100,
    height: 100,
    fill: 'red'
});
canvas.add(rect);
console.log(canvas.toSVG());