fabricjsfabricjs入门


备注

fabric.js是一个功能强大且非常简单的HTML5画布javascript库。它提供了一个使用HTML5画布的交互式平台。使用布料,您可以在画布上创建对象/形状,从简单的几何形状到复杂的形状。您甚至可以使用fabric.js处理图像。 fabric.js还支持动画。它提供了控制以处理图像,如拖动它们,缩放它们旋转它们。它允许对可以一起操作的形状/对象进行分组。它支持的事件不仅限于canvas元素,还包含对象。它甚至提供了功能,可以将画布序列化为SVG或JSON,并在需要时重用它。在jsdom和node-canvas库的帮助下,它甚至支持在Node.js下运行结构。

你好,世界

<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
            width:250,
            cursorColor :"blue",
            top:10,
            left:10
        });
canvas.add(text)
 

该示例使用fabricjs创建文本'Hello world From Fabric JS'演示

安装或设置

Fabric.js就像任何其他特定于canvas的JS库一样。易于设置和入门。您需要做的就是从HERE下载fabric.js并将其包含在您的项目中,就像任何其他JS库一样,例如您为jQuery执行此操作的方式。然后创建html文件假设index.html像:

<head>
    <script src="fabric.js"></script>
</head>

<body>
    <canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
    <script>
        var canvas = new fabric.Canvas('canvas');
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
    </script>
</body>
 

脚本中的src属性是指文件fabric.js保存在同一文件夹中,您可以将其保存在其他文件夹中并提供相对路径。你很高兴。有关Fabric的更多信息,请访问Offcial Page 。这是一个非常基本的演示