fabric.js是一款功能强大的html5 canvas画布拖放操作库-BFW插件库

fabric.js是一款功能强大的html5 canvas画布拖放操作库

Fabric.js是一个强大而简单的Javascript HTML5 canvas画布库,fabric.js可以实现以下的功能。

1、Fabric在画布元素之上让元素变成可拖拽可缩放可选择可编辑；

2、Fabric 也有SVG-to-canvas（和canvas-to-SVG）解析器，还有json to canvas及canvas to json；

3、使用 Fabric.js，您可以在画布上创建和填充对象；像简单几何形状的对象或由成百上千条简单路径组成的复杂形状或好的旧图像；

4、您可以添加文本并动态操作其大小、对齐方式、字体系列和其他属性；

5、你可以给任何形状一个渐变并将图像过滤器应用于图像；

6、有内置的动画支持你可以组对象在一起，并在同一时间处理他们您可以为任何对象添加阴影；

7、系统您可以将任何对象剪裁成任何形状或使用模式填充其内容当然；

8、使用免费绘图来创建您喜欢的任何东西，也支持擦除Canvas可以序列化为JSON或SVG，随时恢复

9、支持子类化、触控设备支持、Node.js 支持（和 npm 包）。

简单的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





</head>

<body>
    <div id="canvas-container">
        <canvas id="c" width="1000" height="1000" style="border: 1px solid black;"></canvas>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fabric.1.7.2.js"></script>
    <script>
        var canvas = new fabric.Canvas('c');
        
        var rect = new fabric.Rect({
        				left: 100,
        				top: 50,
        				width: 100,
        				height: 100,
        				fill: 'green',
        				angle: 20,
        				padding: 10
        });
       canvas.add(rect);
        			
         var textbox = new fabric.Textbox("BFW", {
          left: 50,
          top: 50,
          width: 180,
          fontSize: 16 });
         canvas.add(textbox);
    </script>



</body>

</html>

官网：http://fabricjs.com/