Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-03 03:24:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add more docs.

Browse source 
Examples, tutorial and demo links.
This commit is contained in:
Kienz 2013-09-28 12:31:32 +02:00
parent bbb73dcde3
commit fa2f18a77a
17 changed files with 135 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/brushes/base_brush.class.js
View file

@ -1,6 +1,7 @@
/**
* BaseBrush class
* @class fabric.BaseBrush
* @see {@link http://fabricjs.com/freedrawing/|Freedrawing demo}
*/
fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ {

1
src/canvas.class.js
View file

@ -14,6 +14,7 @@
* Canvas class
* @class fabric.Canvas
* @extends fabric.StaticCanvas
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#canvas}
*
* @fires object:modified
* @fires object:rotating

1
src/color.class.js
View file

@ -17,6 +17,7 @@
* @class fabric.Color
* @param {String} color optional in hex or rgb(a) format
* @return {fabric.Color} thisArg
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors}
*/
function Color(color) {
if (!color) {

2
src/filters/base_filter.class.js
View file

@ -1,6 +1,8 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#image_filters}
* @see {@link http://fabricjs.com/image-filters/|ImageFilters demo}
*/
fabric.Image.filters = fabric.Image.filters || { };

1
src/gradient.class.js
View file

@ -52,6 +52,7 @@
/**
* Gradient class
* @class fabric.Gradient
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#gradients}
*/
fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ {

1
src/mixins/animation.mixin.js
View file

@ -122,6 +122,7 @@ fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prot
* @param {String|Object} property to animate (if string) or properties to animate (if object)
* @param {Number|Object} value to animate property to (if string was given first) or options object
* @return {fabric.Object} thisArg
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#animation}
* @chainable
*
* As object — multiple properties

10
src/mixins/canvas_serialization.mixin.js
View file

@ -1,8 +1,8 @@
fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ {
/**
* Populates canvas with data from the specified dataless JSON
* JSON format must conform to the one of `fabric.Canvas#toDatalessJSON`
* Populates canvas with data from the specified dataless JSON.
* JSON format must conform to the one of {@link fabric.Canvas#toDatalessJSON}
* @deprecated since 1.2.2
* @param {String|Object} json JSON string or object
* @param {Function} callback Callback, invoked when json is parsed
@ -11,14 +11,15 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
* @return {fabric.Canvas} instance
* @chainable
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#deserialization}
*/
loadFromDatalessJSON: function (json, callback, reviver) {
return this.loadFromJSON(json, callback, reviver);
},
/**
* Populates canvas with data from the specified JSON
* JSON format must conform to the one of `fabric.Canvas#toJSON`
* Populates canvas with data from the specified JSON.
* JSON format must conform to the one of {@link fabric.Canvas#toJSON}
* @param {String|Object} json JSON string or object
* @param {Function} callback Callback, invoked when json is parsed
* and corresponding objects (e.g: {@link fabric.Image})
@ -26,6 +27,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created.
* @return {fabric.Canvas} instance
* @chainable
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#deserialization}
* @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo}
* @example <caption>loadFromJSON</caption>
* canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

2
src/mixins/observable.mixin.js
View file

@ -94,6 +94,8 @@
/**
* @namespace fabric.Observable
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#events}
* @see {@link http://fabricjs.com/events/|Events demo}
*/
fabric.Observable = {
observe: observe,

2
src/pattern.class.js
View file

@ -1,6 +1,8 @@
/**
* Pattern class
* @class fabric.Pattern
* @see {@link http://fabricjs.com/patterns/|Pattern demo}
* @see {@link http://fabricjs.com/dynamic-patterns/|DynamicPattern demo}
*/
fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ {

1
src/shadow.class.js
View file

@ -12,6 +12,7 @@
/**
* Shadow class
* @class fabric.Shadow
* @see {@link http://fabricjs.com/shadows/|Shadow demo}
*/
fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ {

1
src/shapes/group.class.js
View file

@ -29,6 +29,7 @@
* @class fabric.Group
* @extends fabric.Object
* @mixes fabric.Collection
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#groups}
*/
fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ {

1
src/shapes/image.class.js
View file

@ -17,6 +17,7 @@
* Image class
* @class fabric.Image
* @extends fabric.Object
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#images}
*/
fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ {

90
src/shapes/object.class.js
View file

@ -16,6 +16,7 @@
/**
* Root object class from which all 2d shape classes inherit from
* @class fabric.Object
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#objects}
*
* @fires added
* @fires removed
@ -32,14 +33,14 @@
fabric.Object = fabric.util.createClass(/** @lends fabric.Object.prototype */ {
/**
* Retrieves object's clipping function (if any)
* Retrieves object's {@link fabric.Object#clipTo|clipping function}
* @method getClipTo
* @memberOf fabric.Object.prototype
* @return {Function}
*/
/**
* Sets object's clipping function
* Sets object's {@link fabric.Object#clipTo|clipping function}
* @method setClipTo
* @memberOf fabric.Object.prototype
* @param {Function} clipTo Clipping function
@ -48,14 +49,14 @@
*/
/**
* Retrieves object's transformMatrix
* Retrieves object's {@link fabric.Object#transformMatrix|transformMatrix}
* @method getTransformMatrix
* @memberOf fabric.Object.prototype
* @return {Array} transformMatrix
*/
/**
* Sets object's transformMatrix
* Sets object's {@link fabric.Object#transformMatrix|transformMatrix}
* @method setTransformMatrix
* @memberOf fabric.Object.prototype
* @param {Array} transformMatrix
@ -64,14 +65,14 @@
*/
/**
* Retrieves object's visible state
* Retrieves object's {@link fabric.Object#visible|visible} state
* @method getVisible
* @memberOf fabric.Object.prototype
* @return {Boolean} True if visible
*/
/**
* Sets object's visible state
* Sets object's {@link fabric.Object#visible|visible} state
* @method setVisible
* @memberOf fabric.Object.prototype
* @param {Boolean} value visible value
@ -80,28 +81,21 @@
*/
/**
* Retrieves object's stroke
* @method getStroke
* @memberOf fabric.Object.prototype
* @return {String} stroke value
*/
/**
* Retrieves object's shadow
* Retrieves object's {@link fabric.Object#shadow|shadow}
* @method getShadow
* @memberOf fabric.Object.prototype
* @return {Object} Shadow instance
*/
/**
* Retrieves object's stroke
* Retrieves object's {@link fabric.Object#stroke|stroke}
* @method getStroke
* @memberOf fabric.Object.prototype
* @return {String} stroke value
*/
/**
* Sets object's stroke
* Sets object's {@link fabric.Object#stroke|stroke}
* @method setStroke
* @memberOf fabric.Object.prototype
* @param {String} value stroke value
@ -110,14 +104,14 @@
*/
/**
* Retrieves object's strokeWidth
* Retrieves object's {@link fabric.Object#strokeWidth|strokeWidth}
* @method getStrokeWidth
* @memberOf fabric.Object.prototype
* @return {Number} strokeWidth value
*/
/**
* Sets object's strokeWidth
* Sets object's {@link fabric.Object#strokeWidth|strokeWidth}
* @method setStrokeWidth
* @memberOf fabric.Object.prototype
* @param {Number} value strokeWidth value
@ -126,14 +120,14 @@
*/
/**
* Retrieves object's originX
* Retrieves object's {@link fabric.Object#originX|originX}
* @method getOriginX
* @memberOf fabric.Object.prototype
* @return {String} originX value
*/
/**
* Sets object's originX
* Sets object's {@link fabric.Object#originX|originX}
* @method setOriginX
* @memberOf fabric.Object.prototype
* @param {String} value originX value
@ -142,14 +136,14 @@
*/
/**
* Retrieves object's originY
* Retrieves object's {@link fabric.Object#originY|originY}
* @method getOriginY
* @memberOf fabric.Object.prototype
* @return {String} originY value
*/
/**
* Sets object's originY
* Sets object's {@link fabric.Object#originY|originY}
* @method setOriginY
* @memberOf fabric.Object.prototype
* @param {String} value originY value
@ -158,14 +152,14 @@
*/
/**
* Retrieves object's fill
* Retrieves object's {@link fabric.Object#fill|fill}
* @method getFill
* @memberOf fabric.Object.prototype
* @return {String} Fill value (0-1)
* @return {String} Fill value
*/
/**
* Sets object's fill
* Sets object's {@link fabric.Object#fill|fill}
* @method setFill
* @memberOf fabric.Object.prototype
* @param {String} value Fill value
@ -174,14 +168,14 @@
*/
/**
* Retrieves object's opacity
* Retrieves object's {@link fabric.Object#opacity|opacity}
* @method getOpacity
* @memberOf fabric.Object.prototype
* @return {Number} Opacity value (0-1)
*/
/**
* Sets object's opacity
* Sets object's {@link fabric.Object#opacity|opacity}
* @method setOpacity
* @memberOf fabric.Object.prototype
* @param {Number} value Opacity value (0-1)
@ -190,14 +184,30 @@
*/
/**
* Retrieves object's top position
* Retrieves object's {@link fabric.Object#angle|angle} (in degrees)
* @method getAngle
* @memberOf fabric.Object.prototype
* @return {Number}
*/
/**
* Sets object's {@link fabric.Object#angle|angle}
* @method setAngle
* @memberOf fabric.Object.prototype
* @param {Number} value Angle value (in degrees)
* @return {fabric.Object} thisArg
* @chainable
*/
/**
* Retrieves object's {@link fabric.Object#top|top position}
* @method getTop
* @memberOf fabric.Object.prototype
* @return {Number} Top value (in pixels)
*/
/**
* Sets object's top position
* Sets object's {@link fabric.Object#top|top position}
* @method setTop
* @memberOf fabric.Object.prototype
* @param {Number} value Top value (in pixels)
@ -206,14 +216,14 @@
*/
/**
* Retrieves object's left position
* Retrieves object's {@link fabric.Object#left|left position}
* @method getLeft
* @memberOf fabric.Object.prototype
* @return {Number} Left value (in pixels)
*/
/**
* Sets object's left position
* Sets object's {@link fabric.Object#left|left position}
* @method setLeft
* @memberOf fabric.Object.prototype
* @param {Number} value Left value (in pixels)
@ -222,14 +232,14 @@
*/
/**
* Retrieves object's scaleX value
* Retrieves object's {@link fabric.Object#scaleX|scaleX} value
* @method getScaleX
* @memberOf fabric.Object.prototype
* @return {Number} scaleX value
*/
/**
* Sets object's scaleX value
* Sets object's {@link fabric.Object#scaleX|scaleX} value
* @method setScaleX
* @memberOf fabric.Object.prototype
* @param {Number} value scaleX value
@ -238,14 +248,14 @@
*/
/**
* Retrieves object's scaleY value
* Retrieves object's {@link fabric.Object#scaleY|scaleY} value
* @method getScaleY
* @memberOf fabric.Object.prototype
* @return {Number} scaleY value
*/
/**
* Sets object's scaleY value
* Sets object's {@link fabric.Object#scaleY|scaleY} value
* @method setScaleY
* @memberOf fabric.Object.prototype
* @param {Number} value scaleY value
@ -254,14 +264,14 @@
*/
/**
* Retrieves object's flipX value
* Retrieves object's {@link fabric.Object#flipX|flipX} value
* @method getFlipX
* @memberOf fabric.Object.prototype
* @return {Boolean} flipX value
*/
/**
* Sets object's flipX value
* Sets object's {@link fabric.Object#flipX|flipX} value
* @method setFlipX
* @memberOf fabric.Object.prototype
* @param {Boolean} value flipX value
@ -270,14 +280,14 @@
*/
/**
* Retrieves object's flipY value
* Retrieves object's {@link fabric.Object#flipY|flipY} value
* @method getFlipY
* @memberOf fabric.Object.prototype
* @return {Boolean} flipY value
*/
/**
* Sets object's flipY value
* Sets object's {@link fabric.Object#flipY|flipY} value
* @method setFlipY
* @memberOf fabric.Object.prototype
* @param {Boolean} value flipY value
@ -1334,7 +1344,7 @@
},
/**
* Sets shadow of an object
* Sets {@link fabric.Object#shadow|shadow} of an object
* @param {Object|String} [options] Options object or string (e.g. "2px 2px 10px rgba(0,0,0,0.2)")
* @param {String} [options.color=rgb(0,0,0)] Shadow color
* @param {Number} [options.blur=0] Shadow blur

1
src/shapes/path.class.js
View file

@ -50,6 +50,7 @@
* Path class
* @class fabric.Path
* @extends fabric.Object
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#path_and_pathgroup}
*/
fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ {

1
src/shapes/path_group.class.js
View file

@ -16,6 +16,7 @@
* Path group class
* @class fabric.PathGroup
* @extends fabric.Path
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1/#path_and_pathgroup}
*/
fabric.PathGroup = fabric.util.createClass(fabric.Path, /** @lends fabric.PathGroup.prototype */ {

1
src/shapes/text.class.js
View file

@ -34,6 +34,7 @@
* @class fabric.Text
* @extends fabric.Object
* @return {fabric.Text} thisArg
* @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#text}
*/
fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ {

74
src/static_canvas.class.js
View file

@ -20,6 +20,7 @@
* @class fabric.StaticCanvas
* @mixes fabric.Collection
* @mixes fabric.Observable
* @see {@link http://fabricjs.com/static_canvas/|StaticCanvas demo}
* @fires before:render
* @fires after:render
* @fires canvas:cleared
@ -181,14 +182,22 @@
},
/**
* Sets overlay image for this canvas
* Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas
* @param {String} url url of an image to set overlay to
* @param {Function} callback callback to invoke when image is loaded and set as an overlay
* @param {Object} [options] Optional options to set for the overlay image
* @param {Number} [options.overlayImageLeft] Left offset of overlay image
* @param {Number} [options.overlayImageTop] Top offset of overlay image
* @param {Number} [options.overlayImageLeft] {@link fabric.StaticCanvas#overlayImageLeft|Left offset} of overlay image
* @param {Number} [options.overlayImageTop] {@link fabric.StaticCanvas#overlayImageTop|Top offset} of overlay image
* @return {fabric.Canvas} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/MnzHT/|jsFiddle demo}
* @example <caption>Normal overlayImage</caption>
* canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
* @example <caption>Displaced overlayImage (left and top != 0)</caption>
* canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
* overlayImageLeft: 100,
* overlayImageTop: 100
* });
*/
setOverlayImage: function (url, callback, options) { // TODO (kangax): test callback
fabric.util.loadImage(url, function(img) {
@ -206,14 +215,22 @@
},
/**
* Sets background image for this canvas
* @param {String} url url of an image to set background to
* Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas
* @param {String} url URL of an image to set background to
* @param {Function} callback callback to invoke when image is loaded and set as background
* @param {Object} [options] Optional options to set for the background image
* @param {Float} [options.backgroundImageOpacity] Opacity of the background image of the canvas instance
* @param {Boolean} [options.backgroundImageStretch] Indicates whether the background image should be stretched to fit the canvas
* @param {Float} [options.backgroundImageOpacity] {@link fabric.StaticCanvas#backgroundImageOpacity|Opacity} of the background image of the canvas instance
* @param {Boolean} [options.backgroundImageStretch] Indicates whether the background image should be {@link fabric.StaticCanvas#backgroundImageStretch|strechted} to fit the canvas
* @return {fabric.Canvas} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/YH9yD/|jsFiddle demo}
* @example <caption>Normal backgroundImage</caption>
* canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
* @example <caption>Stretched backgroundImage with opacity</caption>
* canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
* backgroundImageOpacity: 0.5,
* backgroundImageStretch: true
* });
*/
setBackgroundImage: function (url, callback, options) {
fabric.util.loadImage(url, function(img) {
@ -231,11 +248,18 @@
},
/**
* Sets background color for this canvas
* @param {String|fabric.Pattern} backgroundColor Color of pattern to set background color to
* Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas
* @param {String|fabric.Pattern} backgroundColor Color or pattern to set background color to
* @param {Function} callback callback to invoke when background color is set
* @return {fabric.Canvas} thisArg
* @chainable
* @see {@link http://jsfiddle.net/fabricjs/hXzvk/|jsFiddle demo}
* @example <caption>Normal backgroundColor - color value</caption>
* canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas));
* @example <caption>fabric.Pattern used as backgroundColor</caption>
* canvas.setBackgroundColor({
* source: 'http://fabricjs.com/assets/escheresque_ste.png'
* }, canvas.renderAll.bind(canvas));
*/
setBackgroundColor: function(backgroundColor, callback) {
if (backgroundColor.source) {
@ -776,7 +800,24 @@
* @param {Number} [options.viewBox.width] Width of viewbox
* @param {Number} [options.viewBox.height] Height of viewbox
* @param {String} [options.encoding=UTF-8] Encoding of SVG output
* @return {String}
* @return {String} SVG string
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#serialization}
* @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo}
* @example <caption>Normal SVG output</caption>
* var svg = canvas.toSVG();
* @example <caption>SVG output without preamble (without &lt;?xml ../>)</caption>
* var svg = canvas.toSVG({suppressPreamble: true});
* @example <caption>SVG output with viewBox attribute</caption>
* var svg = canvas.toSVG({
* viewBox: {
* x: 100,
* y: 100,
* width: 200,
* height: 300
* }
* });
* @example <caption>SVG output with different encoding (default: UTF-8)</caption>
* var svg = canvas.toSVG({encoding: 'ISO-8859-1'});
*/
toSVG: function(options) {
options || (options = { });
@ -1111,10 +1152,19 @@
});
/**
* Returs JSON representation of canvas
* Returns JSON representation of canvas
* @function
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {String} json string
* @return {String} JSON string
* @tutorial {@link http://fabricjs.com/fabric-intro-part-3/#serialization}
* @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo}
* @example <caption>JSON without additional properties</caption>
* var json = canvas.toJSON();
* @example <caption>JSON with additional properties included</caption>
* var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockUniScaling']);
* @example <caption>JSON without default values</caption>
* canvas.includeDefaultValues = false;
* var json = canvas.toJSON();
*/
fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject;