-
-
-
### Fabric
+
[](http://travis-ci.org/#!/kangax/fabric.js)
[](https://codeclimate.com/repos/526a0ed089af7e6cf2001389/feed)
[](https://coveralls.io/r/kangax/fabric.js?branch=master)
-
+[](http://badge.fury.io/js/fabric)
+[](http://badge.fury.io/bo/fabric)
+
+
+[](https://david-dm.org/kangax/fabric.js)
+[](https://david-dm.org/kangax/fabric.js#info=devDependencies)
+
**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**.
@@ -18,7 +21,7 @@ Using Fabric.js, you can create and populate objects on canvas; objects like sim
### Goals
-- Unit tested (2300+ tests at the moment)
+- Unit tested (2400+ tests at the moment)
- Modular (~60 small ["classes", modules, mixins](http://fabricjs.com/docs/))
- Cross-browser
- [Fast](https://github.com/kangax/fabric.js/wiki/Focus-on-speed)
@@ -104,7 +107,15 @@ Fabric.js started as a foundation for design editor on [printio.ru](http://print
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=all.min.js.map
+ //# 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
### Demos
@@ -112,6 +123,8 @@ Fabric.js started as a foundation for design editor on [printio.ru](http://print
- [Kitchensink demo](http://fabricjs.com/kitchensink/)
- [Benchmarks](http://fabricjs.com/benchmarks/)
+[Who's using Fabric?](http://trends.builtwith.com/javascript/FabricJS)
+
### Documentation
Documentation is always available at [http://fabricjs.com/docs/](http://fabricjs.com/docs/).
@@ -137,11 +150,11 @@ These are the optional modules that could be specified for inclusion, when build
Additional flags for build script are:
-- **requirejs** — Makes fabric requirejs AMD-compatible in `dist/all.js`. *Note:* an unminified, requirejs-compatible version is always created in `dist/all.require.js`
+- **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/all.min.js`
+- **sourcemap** - Generates a sourceMap file and adds the `sourceMappingURL` (only if uglifyjs is used) to `dist/fabric.min.js`
For example:
@@ -151,19 +164,36 @@ For example:
#### Adding red rectangle to canvas
+```html
+
+
+
+
+
- ...
- var canvas = new fabric.Canvas('canvas');
- var rect = new fabric.Rect({
- top: 100,
- left: 100,
- width: 60,
- height: 70,
- fill: 'red'
- });
+
+
+
+
+```
+
+### Helping Fabric
+
+- [Fabric on Bountysource](https://www.bountysource.com/trackers/23217-fabric-js)
+- [Fabric on CodeTriage](http://www.codetriage.com/kangax/fabric.js)
### Staying in touch
@@ -175,6 +205,8 @@ See [Fabric questions on Stackoverflow](stackoverflow.com/questions/tagged/fabri
Fabric snippets on [jsfiddle](http://jsfiddle.net/user/fabricjs/fiddles/)
or [codepen.io](http://codepen.io/tag/fabricjs).
+Fabric on [LibKnot](http://libknot.ohmztech.com/).
+
Get help in Fabric's IRC channel — irc://irc.freenode.net/#fabric.js
### Credits
@@ -187,7 +219,7 @@ Get help in Fabric's IRC channel — irc://irc.freenode.net/#fabric.js
### MIT License
-Copyright (c) 2008-2013 Printio (Juriy Zaytsev, Maxim Chernyak)
+Copyright (c) 2008-2014 Printio (Juriy Zaytsev, Maxim Chernyak)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@@ -203,3 +235,6 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+
+
+[](https://bitdeli.com/free "Bitdeli Badge")
diff --git a/bower.json b/bower.json
new file mode 100644
index 00000000..b9833d9e
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,28 @@
+{
+ "name": "fabric.js",
+ "version": "1.4.6",
+ "homepage": "http://fabricjs.com",
+ "authors": [
+ "kangax", "Kienz"
+ ],
+ "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
+ "main": "./dist/fabric.min.js",
+ "ignore": [
+ "lib",
+ "src",
+ "test",
+ "*.*",
+ ".*"
+ ],
+ "keywords": [
+ "canvas",
+ "graphic",
+ "graphics",
+ "SVG",
+ "node-canvas",
+ "parser",
+ "HTML5",
+ "object model"
+ ],
+ "license": "MIT"
+}
diff --git a/build.js b/build.js
index 15e4b4a4..3959b3a2 100644
--- a/build.js
+++ b/build.js
@@ -3,8 +3,7 @@ var fs = require('fs'),
var buildArgs = process.argv.slice(2),
buildArgsAsObject = { },
- rootPath = process.cwd(),
- distributionPath = 'dist/';
+ rootPath = process.cwd();
buildArgs.forEach(function(arg) {
var key = arg.split('=')[0],
@@ -16,6 +15,7 @@ buildArgs.forEach(function(arg) {
var modulesToInclude = buildArgsAsObject.modules ? buildArgsAsObject.modules.split(',') : [ ];
var modulesToExclude = buildArgsAsObject.exclude ? buildArgsAsObject.exclude.split(',') : [ ];
+var distributionPath = buildArgsAsObject.dest || 'dist/';
var minifier = buildArgsAsObject.minifier || 'uglifyjs';
var mininfierCmd;
@@ -43,17 +43,17 @@ if (sourceMap) {
console.log('[notice]: sourceMap support requires uglifyjs or google closure compiler as minifier; changed minifier to uglifyjs.');
minifier = 'uglifyjs';
}
- sourceMapFlags = minifier === 'uglifyjs' ? ' --source-map all.min.js.map' : ' --create_source_map all.min.js.map --source_map_format=V3';
+ sourceMapFlags = minifier === 'uglifyjs' ? ' --source-map fabric.min.js.map' : ' --create_source_map fabric.min.js.map --source_map_format=V3';
}
if (minifier === 'yui') {
- mininfierCmd = 'java -jar ' + rootPath + '/lib/yuicompressor-2.4.6.jar all.js -o all.min.js';
+ mininfierCmd = 'java -jar ' + rootPath + '/lib/yuicompressor-2.4.6.jar fabric.js -o fabric.min.js';
}
else if (minifier === 'closure') {
- mininfierCmd = 'java -jar ' + rootPath + '/lib/google_closure_compiler.jar --js all.js --js_output_file all.min.js' + sourceMapFlags;
+ mininfierCmd = 'java -jar ' + rootPath + '/lib/google_closure_compiler.jar --js fabric.js --js_output_file fabric.min.js' + sourceMapFlags;
}
else if (minifier === 'uglifyjs') {
- mininfierCmd = 'uglifyjs ' + amdUglifyFlags + ' --output all.min.js all.js' + sourceMapFlags;
+ mininfierCmd = 'uglifyjs ' + amdUglifyFlags + ' --output fabric.min.js fabric.js' + sourceMapFlags;
}
var buildSh = 'build-sh' in buildArgsAsObject;
@@ -233,6 +233,7 @@ var filesToInclude = [
ifSpecifiedInclude('image_filters', 'src/filters/sepia_filter.class.js'),
ifSpecifiedInclude('image_filters', 'src/filters/sepia2_filter.class.js'),
ifSpecifiedInclude('image_filters', 'src/filters/tint_filter.class.js'),
+ ifSpecifiedInclude('image_filters', 'src/filters/multiply_filter.class.js'),
ifSpecifiedInclude('text', 'src/shapes/text.class.js'),
ifSpecifiedInclude('cufon', 'src/shapes/text.cufon.js'),
@@ -285,7 +286,7 @@ else {
process.chdir(distributionPath);
appendFileContents(filesToInclude, function() {
- fs.writeFile('all.js', distFileContents, function (err) {
+ fs.writeFile('fabric.js', distFileContents, function (err) {
if (err) {
console.log(err);
throw err;
@@ -293,13 +294,13 @@ else {
// add js wrapping in AMD closure for requirejs if necessary
if (amdLib !== false) {
- exec('uglifyjs all.js ' + amdUglifyFlags + ' -b --output all.js');
+ exec('uglifyjs fabric.js ' + amdUglifyFlags + ' -b --output fabric.js');
}
if (amdLib !== false) {
- console.log('Built distribution to ' + distributionPath + 'all.js (' + amdLib + '-compatible)');
+ console.log('Built distribution to ' + distributionPath + 'fabric.js (' + amdLib + '-compatible)');
} else {
- console.log('Built distribution to ' + distributionPath + 'all.js');
+ console.log('Built distribution to ' + distributionPath + 'fabric.js');
}
exec(mininfierCmd, function (error, output) {
@@ -307,18 +308,18 @@ else {
console.error('Minification failed using', minifier, 'with', mininfierCmd);
process.exit(1);
}
- console.log('Minified using', minifier, 'to ' + distributionPath + 'all.min.js');
+ console.log('Minified using', minifier, 'to ' + distributionPath + 'fabric.min.js');
if (sourceMapFlags) {
- console.log('Built sourceMap to ' + distributionPath + 'all.min.js.map');
+ console.log('Built sourceMap to ' + distributionPath + 'fabric.min.js.map');
}
- exec('gzip -c all.min.js > all.min.js.gz', function (error, output) {
- console.log('Gzipped to ' + distributionPath + 'all.min.js.gz');
+ exec('gzip -c fabric.min.js > fabric.min.js.gz', function (error, output) {
+ console.log('Gzipped to ' + distributionPath + 'fabric.min.js.gz');
});
});
- // Always build requirejs AMD module in all.require.js
+ // Always build requirejs AMD module in fabric.require.js
// add necessary requirejs footer code to filesToInclude if we haven't before
if (amdLib === false) {
amdLib = "requirejs";
@@ -326,13 +327,13 @@ else {
}
appendFileContents(filesToInclude, function() {
- fs.writeFile('all.require.js', distFileContents, function (err) {
+ fs.writeFile('fabric.require.js', distFileContents, function (err) {
if (err) {
console.log(err);
throw err;
}
- exec('uglifyjs all.require.js ' + amdUglifyFlags + ' -b --output all.require.js');
- console.log('Built distribution to ' + distributionPath + 'all.require.js (requirejs-compatible)');
+ exec('uglifyjs fabric.require.js ' + amdUglifyFlags + ' -b --output fabric.require.js');
+ console.log('Built distribution to ' + distributionPath + 'fabric.require.js (requirejs-compatible)');
});
});
diff --git a/component.json b/component.json
deleted file mode 100644
index a0b73bbf..00000000
--- a/component.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "name": "fabric.js",
- "repo": "kangax/fabric.js",
- "description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
- "version": "1.4.0",
- "keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
- "dependencies": {},
- "development": {},
- "license": "MIT",
- "scripts": [
- "./dist/all.js"
- ]
-}
diff --git a/dist/all.min.js b/dist/all.min.js
deleted file mode 100644
index 80028d34..00000000
--- a/dist/all.min.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* build: `node build.js modules=ALL exclude=gestures,cufon,json minifier=uglifyjs` *//*! Fabric.js Copyright 2008-2013, Printio (Juriy Zaytsev, Maxim Chernyak) */var fabric=fabric||{version:"1.4.0"};typeof exports!="undefined"&&(exports.fabric=fabric),typeof document!="undefined"&&typeof window!="undefined"?(fabric.document=document,fabric.window=window):(fabric.document=require("jsdom").jsdom(""),fabric.window=fabric.document.createWindow()),fabric.isTouchSupported="ontouchstart"in fabric.document.documentElement,fabric.isLikelyNode=typeof Buffer!="undefined"&&typeof window=="undefined",fabric.SHARED_ATTRIBUTES=["transform","fill","fill-opacity","fill-rule","opacity","stroke","stroke-dasharray","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width"],function(){function e(e,t){if(!this.__eventListeners[e])return;t?fabric.util.removeFromArray(this.__eventListeners[e],t):this.__eventListeners[e].length=0}function t(e,t){this.__eventListeners||(this.__eventListeners={});if(arguments.length===1)for(var n in e)this.on(n,e[n]);else this.__eventListeners[e]||(this.__eventListeners[e]=[]),this.__eventListeners[e].push(t);return this}function n(t,n){if(!this.__eventListeners)return;if(arguments.length===0)this.__eventListeners={};else if(arguments.length===1&&typeof arguments[0]=="object")for(var r in t)e.call(this,r,t[r]);else e.call(this,t,n);return this}function r(e,t){if(!this.__eventListeners)return;var n=this.__eventListeners[e];if(!n)return;for(var r=0,i=n.length;r