简介什么是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. 【转帖】比df命令更有用的磁盘信息工具

    比df命令更有用的磁盘信息工具 http://embeddedlinux.org.cn/emb-linux/entry-level/201310/30-2666.html 除了df fdisk 还有这 ...

  2. 查找担保圈-step5-比较各组之间的成员，对组的包含性进行查询，具体见程序的注释-版本2

    USE [test] GO /****** Object: StoredProcedure [dbo].[p03_get_groupno_e2] Script Date: 2019/7/8 15:01 ...

  3. SQL SERVER DATENAME函数

    定义: DATENAME函数返回指定日期的指定部分. 语法: DATENAME(datepart,date) 参数: ①datepart 参数可以是下列的值: datepart 缩写 年(Year) ...

  4. Python的IDE之Jupyter的使用

    Python的IDE之Jupyter的使用 今天给大家分享的是Jupyter安装和基本使用教程,同时在我安装的过程中遇到了一些问题,解决方法,一并和大家分享 一.Jupyter介绍 Jupyter N ...

  5. JavaScript - 过滤敏感字符

    目录 before 源码示例 before 本篇博客展示了如何是在前端对铭感字符及一些特殊的命令做过滤. 好处是,少发一次请求,减少服器校验压力. 源码示例 <!DOCTYPE html> ...

  6. 百度地图的初始化应当在vue的mounted()函数里执行

    今天使用百度地图出现了一个问题,百度地图初始化后宽.高都是0,但是地图容器宽高都设置好的, 一开始怎么都排除不出问题,后来无语了,把布局直接复制进入百度地图的示例里运行发现没有问题, 所以想到不是百度 ...

  7. Scalar Queries CodeForces - 1167F (计数,树状数组)

    You are given an array $a_1,a_2,…,a_n$. All $a_i$ are pairwise distinct. Let's define function $f(l, ...

  8. 区间问题 codeforces 422c+hiho区间求差问

    先给出一个经典的区间处理方法 对每个区间 我们对其起点用绿色标识  终点用蓝色标识 然后把所有的点离散在一个坐标轴上 如下图 这样做有什么意义呢.由于我们的区间可以离散的放在一条轴上面那么我们在枚举区 ...

  9. PHP获取某段文字作为标题

    <?php mb_internal_encoding('utf-8'); // 提取文字标题,多余文字用省略号替换 $arr=[ '用心用情用功,进行无愧于时代的文艺创造', '一图了解第二届一 ...

  10. Java高并发程序设计学习笔记（七）：并行设计模式

    转自:https://blog.csdn.net/dataiyangu/article/details/87123586 什么是设计模式架构模式设计模式代码模式(成例 Idiom)单例模式普通单例假如 ...