Fabric.js学习笔记

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u014032819/article/details/77864682

因为快要毕业设计开题了,大概找的方向需要用到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());




展开阅读全文

没有更多推荐了,返回首页