Fabric.js学习笔记

来源：互联网发布：线割编程难吗编辑：程序博客网时间：2024/05/12 12:49

因为快要毕业设计开题了，大概找的方向需要用到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-rendercanvas.clear().renderAll(); // add group onto canvascanvas.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());

阅读全文

0 0