### Fabric
<!-- chat, support -->
[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/kangax/fabric.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
<!-- build/coverage status, climate -->
[![Build Status](https://secure.travis-ci.org/kangax/fabric.js.svg?branch=master)](http://travis-ci.org/#!/kangax/fabric.js)
[![Code Climate](https://d3s6mut3hikguw.cloudfront.net/github/kangax/fabric.js/badges/gpa.svg)](https://codeclimate.com/github/kangax/fabric.js)
[![Coverage Status](https://coveralls.io/repos/kangax/fabric.js/badge.png?branch=master)](https://coveralls.io/r/kangax/fabric.js?branch=master)
<!-- npm, bower, CDNJS versions, downloads -->
[![Bower version](https://badge.fury.io/bo/fabric.svg)](http://badge.fury.io/bo/fabric)
[![NPM version](https://badge.fury.io/js/fabric.svg)](http://badge.fury.io/js/fabric)
[![Downloads per month](https://img.shields.io/npm/dm/fabric.svg)](https://www.npmjs.org/package/fabric)
[![CDNJS version](https://img.shields.io/cdnjs/v/fabric.js.svg)](https://cdnjs.com/libraries/fabric.js)
<!-- deps status -->
[![Dependency Status](https://david-dm.org/kangax/fabric.js.svg?theme=shields.io)](https://david-dm.org/kangax/fabric.js)
[![devDependency Status](https://david-dm.org/kangax/fabric.js/dev-status.svg?theme=shields.io)](https://david-dm.org/kangax/fabric.js#info=devDependencies)
<!-- bounties, tips -->
[![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=23217)](https://www.bountysource.com/trackers/23217-fabric-js?utm_source=23217&utm_medium=shield&utm_campaign=TRACKER_BADGE)
[![Tips](https://img.shields.io/gratipay/kangax.svg)](https://gratipay.com/kangax/)
[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=kangax&url=http://github.com/kangax/fabric.js&title=Fabric.js&language=&tags=github&category=software)
**Fabric.js** is a framework that makes it easy to work with HTML5 canvas element. It is an **interactive object model** on top of canvas element. It is also an **SVG-to-canvas parser**.
<a href="http://fabricjs.com/kitchensink" target="_blank"><img src="https://github.com/kangax/fabric.js/raw/master/lib/screenshot.png" style="width:300px;box-shadow:rgba(0,0,0,0.3) 0 0 5px"></a>
Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.
### Non-Technical Introduction to Fabric
Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML `<canvas>` element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the Fabric.js library. Fabric.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the `<canvas>` element.
[Contributions](https://github.com/kangax/fabric.js/wiki/Love-Fabric%3F-Help-us-by...) are very much welcome!
### Goals
- Unit tested (4400+ assertion, 940+ tests at the moment, 75%+ coverage)
- Modular (~60 small ["classes", modules, mixins](http://fabricjs.com/docs/))
- Cross-browser
- [Fast](https://github.com/kangax/fabric.js/wiki/Focus-on-speed)
- Encapsulated in one object
- No browser sniffing for critical functionality
- Runs under ES5 strict mode
- Runs on a server under [Node.js](http://nodejs.org/) (stable releases and latest of current) (see [Node.js limitations](https://github.com/kangax/fabric.js/wiki/Fabric-limitations-in-node.js))
- Follows [Semantic Versioning](http://semver.org/)
### Supported browsers
- Firefox 2+
- Safari 3+
- Opera 9.64+
- Chrome (all versions)
- IE10, IE11, Edge
You can [run automated unit tests](http://fabricjs.com/test/unit/) right in the browser.
### History
Fabric.js started as a foundation for design editor on [printio.ru](http://printio.ru) — interactive online store with ability to create your own designs. The idea was to create [Javascript-based editor](http://printio.ru/ringer_man_tees/new), which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it's not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). Fabric.js was heavily inspired by [Ernest Delgado's canvas experiment](http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html). In fact, code from Ernest's experiment was the foundation of an entire framework. Later, Fabric.js grew into a collection of distinct object types and got an SVG-to-canvas parser.
<h3 id="bower-install">Install with bower</h3>
$ bower install fabric
<h3 id="npm-install">Install with npm</h3>
To install Fabric.js using npm, you must first manually [install Cairo](http://cairographics.org/download/) on your system. Cairo is a system library which powers node-canvas, which Fabric.js relies on. When the installation is complete, you may need to restart your terminal or command prompt before installing fabric.
$ npm install fabric --save
<h3 id="fabric-building">Building</h3>
1. [Install Node.js](https://github.com/joyent/node/wiki/Installation)
2. Build distribution file **[~77K minified, ~20K gzipped]**
$ node build.js
2.1 Or build a custom distribution file, by passing (comma separated) module names to be included.
$ node build.js modules=text,serialization,parser
// or
$ node build.js modules=text
// or
$ node build.js modules=parser,text
// etc.
By default (when none of the modules are specified) only basic functionality is included.
See the list of modules below for more information on each one of them.
Note that default distribution has support for **static canvases** only.
To get minimal distribution with interactivity, make sure to include corresponding module:
$ node build.js modules=interaction
2.2 You can also include all modules like so:
$ node build.js modules=ALL
2.3 You can exclude a few modules like so:
$ node build.js modules=ALL exclude=gestures,image_filters
3. Create a minified distribution file
# Using YUICompressor (default option)
$ node build.js modules=... minifier=yui
# or Google Closure Compiler
$ node build.js modules=... minifier=closure
4. Enable AMD support via require.js (requires uglify)
$ node build.js requirejs modules=...
5. Create source map file for better productive debugging (requires uglify or google closure compiler).<br>More information about [source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/).
$ node build.js sourcemap modules=...
If you use google closure compiler you have to add `sourceMappingURL` manually at the end of the minified file all.min.js (see issue https://code.google.com/p/closure-compiler/issues/detail?id=941).
//# sourceMappingURL=fabric.min.js.map
6. Lint source code (prerequisite: `npm -g install jshint`)
$ jshint src
7. Ensure code guidelines are met (prerequisite: `npm -g install jscs`)
$ jscs src
<h3 id="fabric-building">Testing</h3>
1. [Install Node.js](https://github.com/joyent/node/wiki/Installation)
2. [Install
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
canvas实现的图片编辑库及使用案例 (197个子文件)
.bithoundrc 74B
qunit.css 4KB
.editorconfig 188B
.eslintrc_tests 758B
test_image.gif 8KB
.gitignore 78B
fabric.min.js.gz 76KB
index.html 619B
index.html 531B
index2.html 490B
index.html 448B
index.html 313B
index.html 271B
index.html 270B
index.html 270B
index.html 270B
index.html 268B
index.html 267B
index.html 267B
index.html 261B
ex1.iml 458B
google_closure_compiler.jar 6.05MB
yuicompressor-2.4.6.jar 833KB
very_large_image.jpg 4.31MB
I.jpg 210KB
fabric.js 839KB
fabric.js 839KB
fabric.require.js 581KB
fabric.min.js 278KB
canvas.js 94KB
canvas_static.js 62KB
event.js 58KB
static_canvas.class.js 57KB
object.class.js 54KB
canvas.class.js 48KB
object.js 45KB
text.class.js 40KB
qunit.js 37KB
image_filters.js 33KB
parser.js 32KB
util.js 31KB
group.js 30KB
itext_behavior.mixin.js 28KB
canvas_events.mixin.js 27KB
parser.js 26KB
path.class.js 26KB
itext.js 25KB
gradient.js 25KB
object_origin.js 21KB
misc.js 21KB
image.class.js 21KB
object_geometry.mixin.js 20KB
object_geometry.js 20KB
color.class.js 19KB
itext_key_behavior.mixin.js 19KB
text.js 18KB
animation.js 17KB
line.js 16KB
point.js 16KB
group.class.js 16KB
itext.class.js 15KB
resize_filter.class.js 15KB
object_interactivity.mixin.js 14KB
color.js 14KB
image.js 14KB
gradient.class.js 13KB
webgl_backend.class.js 13KB
convolute_filter.class.js 13KB
build.js 12KB
textbox.class.js 12KB
base_filter.class.js 11KB
named_accessors.mixin.js 11KB
itext_key_behaviour.js 11KB
intersection.js 11KB
object_interactivity.js 11KB
path.js 10KB
blendcolor_filter.class.js 10KB
text_style.mixin.js 10KB
line.class.js 9KB
dom_misc.js 9KB
anim_ease.js 9KB
activeselection.js 8KB
object_origin.mixin.js 8KB
collection.js 8KB
rect.js 8KB
blendimage_filter.class.js 8KB
aligning_guidelines.js 8KB
itext.svg_export.js 8KB
point.class.js 8KB
blur_filter.class.js 8KB
arc.js 8KB
canvas_serialization.mixin.js 8KB
shadow.js 7KB
polyline.class.js 7KB
observable.js 7KB
circle.js 7KB
node.js 7KB
rect.class.js 7KB
dom_event.js 6KB
object.svg_export.js 6KB
共 197 条
- 1
- 2
资源评论
哈哈42696
- 粉丝: 6
- 资源: 13
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- STM32单片机FPGA毕设电路原理论文报告一种基于单片机的节能断电保护电路设计
- STM32单片机FPGA毕设电路原理论文报告一种基于单片机的机床位移检测系统
- unity3D翻书插件
- STM32单片机FPGA毕设电路原理论文报告一种基于单片机的红外测控系统
- Date(1).cpp
- java基于ssm珠宝商城购物网站案例设计
- STM32单片机FPGA毕设电路原理论文报告一种基于单片机的灯光调光控制系统开发
- STM32单片机FPGA毕设电路原理论文报告一种基于单片机的超声测距系统的设计
- Visual Basic快速入门.md
- STM32单片机FPGA毕设电路原理论文报告一种基于单片机的半导体激光器电源控制系统的设计
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功