352-fabric 中文文档教程

Question

Fabric


Fabric.js 是一个可以轻松使用 HTML5 canvas 元素的框架。 它是画布元素之上的交互式对象模型。 它也是一个SVG 到画布的解析器。

使用 Fabric.js，您可以在画布上创建和填充对象； 像简单几何形状的对象——矩形、圆形、椭圆形、多边形，或由成百上千条简单路径组成的更复杂的形状。 然后，您可以使用鼠标缩放、移动和旋转这些对象； 修改它们的属性——颜色、透明度、z-index 等。您还可以完全操纵这些对象——通过简单的鼠标选择将它们分组。

Non-Technical Introduction to Fabric

Fabric.js 允许您使用 JavaScript 在网页上的 HTML 元素上轻松创建简单的形状，如矩形、圆形、三角形和其他多边形或由许多路径组成的更复杂的形状。 然后，Fabric.js 将允许您使用鼠标操纵这些对象的大小、位置和旋转。 还可以更改这些对象的一些属性，例如它们的颜色、透明度、网页上的深度位置或使用 Fabric.js 库选择这些对象的组。 Fabric.js 还允许您将 SVG 图像转换为 JavaScript 数据，可用于将其放入 元素。

非常欢迎贡献！

Goals

• Unit tested (2400+ tests at the moment)
• Modular (~60 small "classes", modules, mixins)
• Cross-browser
• Fast
• Encapsulated in one object
• No browser sniffing for critical functionality
• Runs under ES5 strict mode
• Runs on a server under Node.js (0.8, 0.10, 0.11, 0.12) (see Node.js limitations)
• Follows Semantic Versioning

Supported browsers

• Firefox 2+
• Safari 3+
• Opera 9.64+
• Chrome (all versions)
• IE9, IE10, IE11, Edge

With help of Explorer Canvas

• IE8 (incomplete — about 17 failing tests at the moment)
• IE7,6 (incomplete - about 27 failing tests at the moment)

请参阅旧版 IE 中的结构限制。

注意：要使旧的 IE 正常工作，您需要在 HEAD 中添加 html5shiv 作为条件注释，尤其是 html5shiv -printshiv.js 以允许子元素：

<!--[if lt IE 9]>
    <script src="path/to/your/html5shiv-printshiv.js"></script>
<![endif]-->

记得同时添加 Explorer Canvas。

您可以直接在浏览器中运行自动化单元测试。

History

Fabric.js 最初是作为 printio.ru 上设计编辑器的基础 — 交互式在线商店，能够创建您自己的设计。 当时的想法是创建基于 Javascript 的编辑器，这样可以轻松处理 T 恤上的矢量形状和图像。 由于性能是最关键的要求之一，因此我们选择了画布而不是 SVG。 虽然 SVG 在静态形状方面表现出色，但在对象的动态操作（移动、缩放、旋转等）方面，它的性能不如画布。 Fabric.js 深受 Ernest Delgado 的画布实验的启发。 事实上，来自 Ernest 实验的代码是整个框架的基础。 后来，Fabric.js 成长为不同对象类型的集合，并获得了 SVG-to-canvas 解析器。

Install with bower

$ bower install fabric

Install with npm

要使用 npm 安装 Fabric.js，您必须首先在您的系统上手动安装 Cairo。 Cairo 是一个系统库，它为 Fabric.js 所依赖的节点画布提供支持。 安装完成后，您可能需要在安装 fabric 之前重新启动终端或命令提示符。

$ npm install fabric --save

Building

1. 安装 Node.js

2. 构建分发文件[~77K 缩小，~20K gzipped]

   $ node build.js
   

   2.1或者通过传递（逗号分隔）要包含的模块名称来构建自定义分发文件。

     $ node build.js modules=text,serialization,parser
     // or
     $ node build.js modules=text
     // or
     $ node build.js modules=parser,text
     // etc.
   

   默认情况下（当未指定任何模块时）仅包含基本功能。 有关每个模块的更多信息，请参阅下面的模块列表。 请注意，默认分发仅支持静态画布。

   要获得具有交互性的最小分发，请确保包含相应的模块：

     $ node build.js modules=interaction
   

   2.2 您还可以像这样包含所有模块：

     $ node build.js modules=ALL
   

   2.3 您可以像这样排除一些模块：

     $ node build.js modules=ALL exclude=gestures,image_filters
   

3. 创建一个缩小的分发文件

   # Using YUICompressor (default option)
   $ node build.js modules=... minifier=yui
   
   # or Google Closure Compiler
   $ node build.js modules=... minifier=closure
   

4. 通过 require.js 启用 AMD 支持（需要 uglify）

   $ node build.js requirejs modules=...
   

5. 创建源映射文件以提高调试效率（需要 uglify 或 google 闭包编译器）。
   有关源映射的更多信息。

   $ node build.js sourcemap modules=...
   

   如果您使用谷歌闭包编译器，则必须在缩小文件 all.min.js 的末尾手动添加 sourceMappingURL（请参阅问题 https://code.google.com/p/closure-compiler/问题/细节？id=941）。

   //# sourceMappingURL=fabric.min.js.map
   

6. Lint 源代码（先决条件：npm -g install jshint）

   $ jshint src
   

7. 确保符合代码准则（先决条件：npm -g install jscs）

   $ jscs src
   

Testing

1. 安装 Node.js

2. 必要时安装 NPM< /a>

3. 安装 NPM 包

   $ npm install
   

4. 运行测试套件

确保安装了 testem

    $ npm install -g testem

运行测试 Chrome 和 Node（默认）：

    $ testem

有关更多信息，请参阅 testem 文档：https://github.com/testem/testem

Demos

• Demos
• Kitchensink demo
• Benchmarks

谁在使用 Fabric？

Documentation

文档始终可用 http://fabricjs.com/文档/。

另请参阅官方 4 部分介绍系列，来自 BK.js 的介绍 和 来自 Falsy Values 的介绍 以获得概述fabric.js 的工作原理及其功能。

Optional modules

这些是在构建自定义版本的结构时可以指定包含的可选模块：

• text — Adds support for static text (fabric.Text)
• itext — Adds support for interactive text (fabric.IText)
• serialization — Adds support for loadFromJSON, loadFromDatalessJSON, and clone methods on fabric.Canvas
• interaction — Adds support for interactive features of fabric — selecting/transforming objects/groups via mouse/touch devices.
• parser — Adds support for fabric.parseSVGDocument, fabric.loadSVGFromURL, and fabric.loadSVGFromString
• image_filters — Adds support for image filters, such as grayscale of white removal.
• easing — Adds support for animation easing functions
• node — Adds support for running fabric under node.js, with help of jsdom and node-canvas libraries.
• freedrawing — Adds support for free drawing
• gestures — Adds support for multitouch gestures with help of Event.js
• object_straightening — Adds support for rotating an object to one of 0, 90, 180, 270, etc. depending on which is angle is closer.
• animation — Adds support for animation (fabric.util.animate, fabric.util.requestAnimFrame, fabric.Object#animate, fabric.Canvas#fxCenterObjectH/#fxCenterObjectV/#fxRemove)

构建脚本的其他标志是：

• requirejs — Makes fabric requirejs AMD-compatible in dist/fabric.js. Note: an unminified, requirejs-compatible version is always created in dist/fabric.require.js
• no-strict — Strips "use strict" directives from source
• no-svg-export — Removes svg exporting functionality
• no-es5-compat - Removes ES5 compat methods (Array.prototype., String.prototype., Function.prototype.*)
• sourcemap - Generates a sourceMap file and adds the sourceMappingURL (only if uglifyjs is used) to dist/fabric.min.js

例如：

node build.js modules=ALL exclude=json no-strict no-svg-export

Examples of use

Adding red rectangle to canvas

<!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>

Helping Fabric

• Fabric on Bountysource
• Fabric on CodeTriage

Staying in touch

关注 @fabric.js 或 @kangax 在推特上。

问题、建议 — Google 网上论坛上的 fabric.js。

请参阅 Stackoverflow 上的结构问题， jsfiddle 上的结构片段 或 codepen.io。

LibKnot 上的织物。

在 Fabric 的 IRC 频道中获得帮助 — irc://irc.freenode.net/#fabric.js

Credits

• Ernest Delgado for the original idea of manipulating images on canvas
• Maxim "hakunin" Chernyak for ideas, and help with various parts of the library throughout its life
• Sergey Nisnevich for help with geometry logic
• Stefan Kienzle for help with bugs, features, documentation, github issues
• And all the other GitHub contributors

MIT License

版权所有 (c) 2008-2015 Printio (Juriy Zaytsev, Maxim Chernyak)

特此免费授予任何获得复制 本软件和相关文档文件（“软件”），处理 在软件中不受限制，包括但不限于权利 使用、复制、修改、合并、发布、分发、再许可和/或出售 该软件的副本，并允许该软件是 提供这样做，但须满足以下条件：本

软件“按原样”提供，不提供任何形式的明示或保证 暗示的，包括但不限于适销性保证， 适用于特定目的和非侵权。 在任何情况下都不得 作者或版权持有人对任何索赔、损害或其他 责任，无论是在合同、侵权或其他方面的行为中，由以下原因引起， 出于或与软件或使用或其他交易有关 软件。