整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
canvas
Fabric.js是一个简单但功能强大的Javascript HTML5 canvas库，Fabric在canvas元素之上提供交互式对象模型，而且Fabric还内置SVG-to-canvas（和canvas-to-SVG）解析器，在Github上star数超过13k+，可见其受欢迎程度！
1、使用Fabric.js，您可以在画布上创建和填充对象;对象就像简单的几何形状
2、或由数百或数千条简单路径组成的复杂形状
3、或者旧风格的图像
4、任何形状的渐变
5、您可以添加文本并动态操作其大小，对齐方式，字体系列和其他属性
6、将图像过滤器应用于图像
7、有内置的动画支持
8、拖动图像，可以将对象组合在一起，并同时对其进行操作
9、拖拽方法和方向旋转
10、Canvas可以序列化为JSON或SVG，并可以随时恢复
12、使用免费绘图来创建任何你喜欢的东西
既然是开源项目，那么当然可以到Github上获取相关代码，其一直保持更新维护并继续增强其功能，同时官网还提供了非常详细的文档，以及非常丰富的Demo，下面我们将进行截图预览！
相信用过截图工具或者windows绘图工具的都知道什么效果
以上是选取一些案例进行演示，可能效果不佳，感兴趣的小伙伴可以去官网看看Demo
其兼容性相当的不错
npm install fabric --save
这里就大致看下文档具备哪些内容，由于文档很详细，就不在细说，而且借助浏览器翻译，看懂是完全没问题的
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="lib/fabric.js"></script>
<script>
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 60,
height : 70,
fill : 'red'
});
canvas.add(rect);
</script>
</body>
</html>
官方文档提供了非常人性化的一个地方就是你可以选择你需要的部分进行构建
总体来说Fabric.js是一个非常值得使用的JavaScript库，不管是功能还是兼容性都是非常优秀的，而且你可以使用它来构建非常强大的BS端应用。如在线绘图等，如果你对它感兴趣，不放尝试一下，不会让你失望！
上文：开源Html5画布操作类库Fabric.js基础入门——第一部分（中）
画布
现在，我们已经详细的介绍了对象，让我们再回头聊聊画布。
在所有的创建画布对象的Fabric实例中，你看到的第一件事情是--new fabric.Canvas('...')。fabric.Canvas作为<canvas>元素的包装，负责管理画布上所有的fabric对象。它需要一个元素的ID，并返回一个fabric.Canvas实例。
我们可以在它上面添加对象，引用它们，或者删除它们：
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)
canvas.remove(rect); // remove previously-added fabric.Rect
fabric.Canvas的主要工作是管理对象，它同时也作为配置宿主。需要为整个画布设置背景色或者图像？剪切所有内容到一个确定的区域？设置不同的宽度/高度？确定画布是否支持交互？所有这些选项（包括其他的）可以在fabric.Canvas上设置，不管是在创建时还是创建后：
var canvas = new fabric.Canvas('c', {
backgroundColor: 'rgb(100,100,200)',
selectionColor: 'blue',
selectionLineWidth: 2
// ...
});
// or
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://...');
canvas.onFpsUpdate = function(){ /* ... */ };
// ...
交互
在我们讨论画布元素的时候，我们来谈谈交互性。Fabric的一个独特的特点--还是内置的--是在我们刚看到的所有方便的对象模型之上的交互层。
对象模型存在的意义是允许编程访问和操作画布上的对象。但是在外部，在用户级别上，有一种通过鼠标（或触摸，通过触摸设备）操作这些对象的途径。只要你一通过new fabric.Canvas('...')初始化画布，就可以选择对象、拖拽它们、缩放或者旋转，甚至把他们分组到一个块中。
如果我们需要允许用户在画布拖放--比如说图像--我们需要做的就是初始化画布，并且添加一个对象到它上面，不需要额外的配置或设置。
对交互的控制，可以通过组合 Fabric画布的布尔属性“selection”和每个独立对象的布尔属性“selectable”实现：
var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // disable group selection
rect.set('selectable', false); // make object unselectable
如果你一点都不需要交互层，你可以使用fabric.StaticCanvas代替fabric.Canvas。初始化语法是完全相同的，只需要使用StaticCanvas替代Canvas即可：
var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
new fabric.Rect({
width: 10, height: 20,
left: 100, top: 100,
fill: 'yellow',
angle: 30
}));
这将创建一个轻量级版本的画布，不包括任何事件处理逻辑。要明白，你仍然具有可操作的完全对象模型--添加、删除、修改对象，改变任何画布设置--所有这些仍然可用，只是事件处理没有了。
稍后，当我们研究自定义构建选项时，如果StaticCanvas满足你的所有要求，你甚至可用创建一个轻量级版本的Fabric。如果你的应用程序需要非交互的图表或者非交互的图像，这是一个很好的选择。
图片
说说图片...
在画布上添加矩形和画圈圈有点意思，但是为什么不试试图片呢？如你所想，Fabric把这变的很简单。让我们实例化fabric.Image对象，并添加到画布：
(html)
<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">
(js)
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);
注意我们是如何传递图像元素给fabric.Image构造函数的。这将创建一个看起来像文档中图片的fabric.Image实例。此外，我们立刻设置left/top 值为100/100，angle为30，opacity 为 0.85。一旦我们把它添加到画布，在100，100位置，一幅图片以30度角稍微透明的显示出来了，还不错。
假如现在我们在文档里没有一个真实的图片，只有一个图片的URL怎么办？没问题，我们看看如何使用fabric.Image.fromURL:
fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});
看起来NB极了，不是吗？只需要使用图片URL来调用fabric.Image.fromURL，然后给它一个当图片加载创建完成后的回调。回调函数接收已经创建好的fabric.Image对象，并把它当作第一个参数。这时，你可以把它加到画布，或者先处理一下再加到画布：
fabric.Image.fromURL('my_image.png', function(oImg) {
// scale image down, and flip it, before adding it onto canvas
oImg.scale(0.5).set('flipX, true);
canvas.add(oImg);
});
路径
我们已经看过了简单的形状，然后是图像。那么更复杂、更丰富的形状和内容呢？
超级CP了解下--Path and Groups（路径和分组）
在Fabric里，路径表示形状的轮廓，可以被填充、描边或以其他方式修改。路径是一系列命令的组合，本质上是模仿画笔从一个点到另一个点。在诸如“移动”、“划线”、“曲线”、“圆弧”等这些命令的协助下，路径可以形成难以置信的复杂形状，在路径组的协助下，这种可能性更大了。
在Fabric中，路径很像SVG中的<path>元素，它们使用相同的命令集，它们可以从<path>元素创建，并序列化。稍后我们将更仔细地研究序列化和SVG解析，但现在值得一提的是，您可能很少手工创建路径实例，而是使用Fabric内置的SVG解析器。不过为了更好的理解路径对象是什么，我们试着手工创建一个简单的对象：
var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);
我们在实例化fabric.Path对象，传统一个路径指令串，虽然它看起来挺神秘的，实际比较容易理解。“M”代表“Move”命令，它指示不看见的画布移动到0，0点；“L”代表“line”，让画笔画条线到200，100点，然后另一个“L”划线到170，200点，最后，“z”指示画笔关闭路径并且完成形状。因此，我们得到了三角形的形状。
既然fabric.Path像Fabric中其他对象一样，我们也可以改变它的属性，而且我们可以做的更多：
...
var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
...
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);
出于好奇，咱们看看一个有点复杂的路径语法，你就会明白为什么手工创建路径不是个好主意：
...
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
canvas.add(path.set({ left: 100, top: 200 }));
那么，伙计，这里发生了什么?
好，“M”仍然代表“move”命令，因此画笔从点 “121.32, 0”开始它的旅程，然后“L”命令划线到“44.58, 0”，一切还好。下一步呢？“C”命令代表“cubic bezier”（三次贝塞尔曲线），它让画笔从当前点画贝塞尔曲线到“36.67, 0”，使用点“29.5, 3.22” 作为起始线的控制点， “24.31, 8.41” 作为终止线的控制点，然后，再加上十几个其他三次贝塞尔命令，最终形成一个漂亮的箭头形状。
很有可能，你不会直接和这样的“怪兽”一起工作，取而代之的，你可以使用类似 fabric.loadSVGFromString或fabric.loadSVGFromURL方法加载整个SVG文件，然后让 Fabric的SVG解析器处理所有的SVG元素并且创建相应的路径对象。
说起整个SVG文档，Fabric的路径经常取代SVG的路径元素，SVG文档中经常出现的一组路径，被取代为Groups (fabric.Group实例)。你可以想象，Group只是一组路径和其他对象而已。既然fabric.Group继承自fabric.Object，它也可以像其他对象一样被加入到画布中，并且使用类似的方式操作。
就像路径一样，你也基本不会直接操作组对象，但是如果你在解析SVG文档后偶然发现它，你就会知道它到底是什么，它服务的目的是什么。
后记
我们只是表面上了解了Fabric，你现在可以很容易的创建任何简单的图形、复杂的图形、图像；把它们加入画布，使用任何方式修改你需要的属性--positions, dimensions, angles, colors, strokes, opacity--只要你叫的上名字。
这一系列的下一部分，我们将研究使用组、动画、文本、SVG解析器、渲染、序列化、事件、图像过滤器，等等。
同时，请随意查看带注释的演示（这里是演示超链接），性能测试（这里是性能测试超链接），加入谷歌或其他讨论组，或者直接查看文档、wiki和源代码。
祝你在Fabric玩的愉快，希望你能享受这个旅程。
第二部分未完待续
*请认真填写需求信息，我们会在24小时内与您取得联系。
