简介什么是Fabric.js?

Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。由于Fabric.js为国外框架，官方API杂乱繁多，相关文档大多为英文文档，而且数量不多，所以本文旨在帮助新手在项目中快速上手Fabric.js，享受绘制Canvas的过程。

为什么要使用Fabric.js？

Canvas提供一个好的画布能力, 但是Api不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果，就不是那么方便了。Fabric.js就是为此而开发，它主要就是用对象的方式去编写代码。

Fabric.js能做的事情

  • 在Canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。
  • 给图形填充渐变颜色。
  • 组合图形（包括组合图形、图形文字、图片等）。
  • 设置图形动画集用户交互。
  • 生成JSON, SVG数据等。
  • 生成Canvas对象自带拖拉拽功能。

起步

Vue项目中引入Fabric.js

假设您的项目中正在使用ES6和Webpack，您可以开始使用Fabric.js，如下所示：

1、在命令行中：

1
npm install fabric（或yarn add fabric）

2、将其引入 .vue 文件中

1
import { fabric } from 'fabric'

3、在 .vue 的单文件中的 mounted: 生命周期里开始你的Fabric.js之旅啦

注：默认的fabric npm模块产生了相当大的包，如果Fabric.js中您有很多可能不需要的包，在这种情况下，可以在 在此处 或在命令行中构建你自己的版本。

绘制图形

绘制规则图形

1、声明画布

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

2、绘制图形

1
2
3
4
5
6
7
8
9
10
11
12
13
var rect = new fabric.Rect({
 
       left:100,//距离画布左侧的距离，单位是像素
 
       top:100,//距离画布上边的距离
 
       fill:'red',//填充的颜色
 
       width:30,//方形的宽度
 
      height:30//方形的高度
 
   });

3、添加图形至画布

1
canvas.add(rect);

Fabric提供了7中基本的对象类，如果只是单纯的画这些图形的话，会节省我们很多的时间：

  • fabric.Circle   //圆形
  • fabric.Ellipse   //椭圆
  • fabric.Line      //线
  • fabric.Polygon //多边形
  • fabric.Polyline //交叉线 折线
  • fabric.Rect //矩形
  • fabric.Triangle//三角形

这些实例都继承fabric.Object,如果你想画一些图形，并且需要一些公共方法。这时候你就可以在fabric.Object上定义一个方法，来让子类继续。

比如我们定一个方法getAngleInRadians 方法在fabric.Object对象上：

fabric.Object.prototype.getAngleInRadians = function() {

  return this.get('angle') / 180 * Math.PI;

};

var rect = new fabric.Rect({ angle: 45 });

rect.getAngleInRadians(); // 0.785...

var circle = new fabric.Circle({ angle: 30, radius: 10 });

circle.getAngleInRadians(); // 0.523...

circle instanceof fabric.Circle; // true

circle instanceof fabric.Object; // true

绘制不规则图形

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

在fabric.Path( )方法中，“M”代表“移动”命令，这个“M 00” 代表把画笔移动到（0,0）点坐标。

“L”代表“线”，“L 200 100 ”的意思是使用钢笔画一条线，从（0,0）坐标画到（200,100）坐标。 “z” 代表让图形闭合路径。

画好三角形后，我们可以用set( )方法对三角形的位置、颜色、角度、透明度等属性进行设置。

具体代码如下：

1
2
3
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);

对图片的操作

HTML插入图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
      <canvas id="canvas" width='800' height='800'></canvas>
      <img src="./2.png" id="img">
  </body>
  ---------------------
  var canvas = new fabric.Canvas('canvas');//声明画布
  var imgElement = document.getElementById('img');//声明我们的图片    
  var imgInstance = new fabric.Image(imgElement,{  //设置图片位置和样子
       left:100,
       top:100,
       width:200,
       height:100,
       angle:30//设置图形顺时针旋转角度
  });
  
  canvas.add(imgInstance);//加入到canvas中

JavaScript插入图片

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

交互

对画布的交互

1
2
3
4
5
canvas.add(imgInstance);//加入到canvas中
   var canvas = new fabric.Canvas('canvas');
   canvas.on('mouse:down', function(options) {
       console.log(options.e.clientX, options.e.clientY)
   })

注：常用监听事件如下：

  • mouse:down：鼠标按下时
  • mouse:move：鼠标移动时
  • mouse:up：鼠标抬起时

对画布上对象的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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);

注：常用监听事件如下：

  • after:render：画布重绘后
  • object:selected：对象被选中
  • object:moving：对象移动
  • object:rotating：对象被旋转
  • object:added：对象被加入
  • object:removed：对象被移除

组合

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var canvas = new fabric.Canvas('canvas');
 
       var circle = new fabric.Circle({//绘制圆形
 
       radius: 100,
 
       fill: '#f00',
 
       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);

序列化与反序列化

序列化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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()));

反序列化

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

SVG

1
2
3
4
5
6
7
8
9
10
11
var canvas = new fabric.Canvas('canvas');
 
 var rect = new fabric.Rect({
     width: 100,
     height: 100,
     fill: 'red'
 });
 
 canvas.add(rect);
 
 canvas.toSVG();

fabric.js使用笔记

对象

fabric.Circle 圆
fabric.Ellipse 椭圆
fabric.Line 直线
fabric.Polygon
fabric.Polyline
fabric.Rect 矩形
fabric.Triangle 三角形

方法

add(object) 添加
insertAt(object,index) 添加
remove(object) 移除
forEachObject 循环遍历 
getObjects() 获取所有对象
item(int) 获取子项
isEmpty() 判断是否空画板
size() 画板元素个数
contains(object) 查询是否包含某个元素
fabric.util.cos
fabric.util.sin
fabric.util.drawDashedLine 绘制虚线
getWidth() setWidth()
getHeight()
clear() 清空
renderAll() 重绘
requestRenderAll() 请求重新渲染
rendercanvas() 重绘画板
getCenter().top/left 获取中心坐标
toDatalessJSON() 画板信息序列化成最小的json
toJSON() 画板信息序列化成json
moveTo(object,index) 移动
dispose() 释放
setCursor() 设置手势图标
getSelectionContext()获取选中的context
getSelectionElement()获取选中的元素
getActiveObject() 获取选中的对象
getActiveObjects() 获取选中的多个对象
discardActiveObject()取消当前选中对象 
isType() 图片的类型
setColor(color) = canvas.set("full","");
rotate() 设置旋转角度
setCoords() 设置坐标

事件

object:added
object:removed
object:modified
object:rotating
object:scaling
object:moving
object:selected 这个方法v2已经废弃，使用selection:created替代，多选不会触发
before:selection:cleared
selection:cleared
selection:updated
selection:created
path:created
mouse:down
mouse:move
mouse:up
mouse:over
mouse:out
mouse:dblclick

常用属性

canvas.isDrawingMode = true; 可以自由绘制
canvas.selectable = false; 控件不能被选择，不会被操作
canvas.selection = true; 画板显示选中
canvas.skipTargetFind = true; 整个画板元素不能被选中
canvas.freeDrawingBrush.color = "#E34F51" 设置自由绘画笔的颜色
freeDrawingBrush.width 自由绘笔触宽度
canvas.setZoom(2); 设置画板缩放比例

IText的方法

selectAll() 选择全部
getSelectedText() 获取选中的文本
exitEditing() 退出编辑模式

绘制直线

var line = new fabric.Line([10, 10, 100, 100], {
fill: 'green',
stroke: 'green', //笔触颜色
strokeWidth: 2,//笔触宽度
});
canvas.add(line);

绘制虚线

在绘制直线的基础上添加属性strokeDashArray:Array
example：
var line = new fabric.Line([10, 10, 100, 100], {
fill: 'green',
stroke: 'green',
strokeDashArray:[3,1] 
});
canvas.add(line);

strokeDashArray[a,b] =》 每隔a个像素空b个像素。

可绘制对象

fabric.Circle 圆
fabric.Ellipse 椭圆
fabric.Line 直线
fabric.Polygon
fabric.Polyline
fabric.Rect 矩形
fabric.Triangle 三角形

图片去掉选中边框和旋转，且只能移动，不可操作

oImg.hasControls = false; 只能移动不能（编辑）操作
oImg.hasBorders = false; 去掉边框，可以正常操作
hasRotatingPoint = false; 不能被旋转
hasRotatingPoint 控制旋转点不可见
scaleToHeight(value, absolute) 缩放图片高度到value scaleToWidth(value, absolute) 缩放图片宽度到value

示例代码如下：

fabric.Image.fromURL("img.jpg", function (oImg) {

    img.scaleToHeight(400, false);  //缩放图片的高度到400

    img.scaleToWidth(400, false);   //缩放图片的宽度到400

    canvas.add(oImg);

    oImg.hasControls = oImg.hasBorders = false;

});

Canvas实用库Fabric.js使用手册的更多相关文章

  1. HTML5 Canvas JavaScript库 Fabric.js 使用经验

    首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

  2. Fabric.js的使用

    最近项目有一个绘制的功能,搜了一圈发现fabric.js口碑不错,但是文档稀缺,于是东看看西搜搜的把项目的需求都给实现了,想分享一下. 篇幅有点长,但看完后可以轻松驾驭fabric.我的项目是基于VU ...

  3. (转)第01节：初识简单而且强大的Fabric.js库

    Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...

  4. Fabric.js canvas 图形库

    1.github地址: https://github.com/fabricjs/fabric.js 2.简述 Fabric.js将canvas的编程变得简单.同时在canvas上添加了交互.交互包括: ...

  5. 微信小程序一：微信小程序UI组件、开发框架、实用库

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...

  6. fabric.js和高级画板

    本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角 ...

  7. 微信小程序UI组件、开发框架、实用库...

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

  8. （转）第05节：Fabric.js的动画设置

    凡是出色的Canvas库都少不了制作动画的方法,Fabric.js也不例外,它有着编写简单且功能强大的动画助手,这就是animate( )方法. animate主要使用代码如下: rect.anima ...

  9. 移动端手势库Hammer.js学习

    感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...

随机推荐

  1. Linux安装redis logstash

    一.安装redis tar -zxvf redis-3.2.8.tar.gz cd redis-3.2.8 make  && make install PREFIX=/usr/loca ...

  2. 【Python】【demo实验32】【回文数的确认】

    原题: 我的代码: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- #判断一个数字是否为回文数 即 12345654321 x = ...

  3. 19牛客暑期多校 round1 A 有关笛卡尔树的结论

    题目传送门//res tp nowcoder 分析 定理:B1~B2当且仅当B1与B2有同构的笛卡尔树. (B₁~B₂ iff B₁ and B₂ have isomorphic Cartesian ...

  4. 并不对劲的复健训练-bzoj5249:loj2472:p4364[2018多省联考]IIIDX

    题目大意 给出\(n,k,d_1,...,d_n\)(\(n\leq 5\times 10^5,1<k\leq 10^9,d\leq 10^9,k\in R\)).有一个满足 对于每个点\(i\ ...

  5. Java 时间不一致

    1.new Date() 得到的时间?和系统相差 相差8个小时 2.eclipse控制台打印的时间与系统相差 相差8个小时 3.log4j日志的时间与与系统相差 相差8个小时 上述问题其实是同一个问题 ...

  6. ASP.NET使用AJAX应注意IIS有没有.ashx扩展

    项目添加引用AJAX.DLL了:今天将本地做好的一个web程序放到服务器上,居然报告错误了.web程序使用了ajax来往返数据. 检查生成的html语句,有这么两句代码<script type= ...

  7. Laravel 实现指定用户下的设备分页(与查询指定分类下的文章原理相同)

    <?php //控制器 namespace App\Http\Controllers\Api\User; use App\Http\Controllers\Controller; use Ill ...

  8. MySQL之常见错误

    1)mysql导入较大sql文件,出现MySQL server has gone away ERROR (HY000) at line in file: 'E:\xampp\htdocs\SsCpc\ ...

  9. css强制换行显示省略号之显示两行后显示省略号

    1,首先来一个固定宽度,在一行显示,超出隐藏,显示省略号的样式 display:block; white-space:nowrap; overflow:hidden; text-overflow:el ...

  10. OLE使用

    ABAP操作EXCEL有多重方法,今天记录一下OLE,具体步骤如下: 1. 首先要上载EXCEL模板 事物代码:SMW0,具体步骤参考 本博客 http://www.cnblogs.com/caizj ...