From 2df46b4ace2ee68c65702c6def5874f7f2658015 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Thu, 3 Apr 2014 20:17:09 -0700 Subject: [PATCH] striped out br tags from the docs --- kinetic.js | 1668 ++++++++++++++++----------------- kinetic.min.js | 2 +- src/Animation.js | 12 +- src/BaseLayer.js | 12 +- src/Container.js | 68 +- src/DragAndDrop.js | 26 +- src/FastLayer.js | 2 +- src/Global.js | 34 +- src/Layer.js | 12 +- src/Node.js | 382 ++++---- src/Shape.js | 492 +++++----- src/Stage.js | 10 +- src/Tween.js | 18 +- src/Util.js | 10 +- src/plugins/Label.js | 52 +- src/plugins/Path.js | 12 +- src/plugins/RegularPolygon.js | 16 +- src/plugins/Star.js | 18 +- src/plugins/TextPath.js | 16 +- src/shapes/Arc.js | 40 +- src/shapes/Circle.js | 18 +- src/shapes/Ellipse.js | 36 +- src/shapes/Image.js | 60 +- src/shapes/Line.js | 38 +- src/shapes/Rect.js | 18 +- src/shapes/Ring.js | 24 +- src/shapes/Sprite.js | 128 +-- src/shapes/Text.js | 72 +- src/shapes/Wedge.js | 40 +- 29 files changed, 1668 insertions(+), 1668 deletions(-) diff --git a/kinetic.js b/kinetic.js index e19b051b..5ce2d49c 100644 --- a/kinetic.js +++ b/kinetic.js @@ -4,7 +4,7 @@ * http://www.kineticjs.com/ * Copyright 2013, Eric Rowell * Licensed under the MIT or GPL Version 2 licenses. - * Date: 2014-03-27 + * Date: 2014-04-03 * * Copyright (C) 2011 - 2013 by Eric Rowell * @@ -205,19 +205,19 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var customShape = new Kinetic.Shape({
- * x: 5,
- * y: 10,
- * fill: 'red',
- * // a Kinetic.Canvas renderer is passed into the drawFunc function
- * drawFunc: function(context) {
- * context.beginPath();
- * context.moveTo(200, 50);
- * context.lineTo(420, 80);
- * context.quadraticCurveTo(300, 100, 260, 170);
- * context.closePath();
- * context.fillStrokeShape(this);
- * }
+ * var customShape = new Kinetic.Shape({ + * x: 5, + * y: 10, + * fill: 'red', + * // a Kinetic.Canvas renderer is passed into the drawFunc function + * drawFunc: function(context) { + * context.beginPath(); + * context.moveTo(200, 50); + * context.lineTo(420, 80); + * context.quadraticCurveTo(300, 100, 260, 170); + * context.closePath(); + * context.fillStrokeShape(this); + * } *}); */ Shape: function(config) { @@ -288,10 +288,10 @@ var Kinetic = {}; * @param {Function} [config.clipFunc] clipping function * @example - * var stage = new Kinetic.Stage({
- * width: 500,
- * height: 800,
- * container: 'containerId'
+ * var stage = new Kinetic.Stage({ + * width: 500, + * height: 800, + * container: 'containerId' * }); */ Stage: function(config) { @@ -577,8 +577,8 @@ var Kinetic = {}; * @param {Function} func * @example * // get all nodes with name foo inside layer, and set x to 10 for each - * layer.get('.foo').each(function(shape, n) {
- * shape.setX(10);
+ * layer.get('.foo').each(function(shape, n) { + * shape.setX(10); * }); */ Kinetic.Collection.prototype.each = function(func) { @@ -1093,9 +1093,9 @@ var Kinetic = {}; * @memberof Kinetic.Util.prototype * @param {String} color * @example - * // each of the following examples return {r:0, g:0, b:255}
- * var rgb = Kinetic.Util.getRGB('blue');
- * var rgb = Kinetic.Util.getRGB('#0000ff');
+ * // each of the following examples return {r:0, g:0, b:255} + * var rgb = Kinetic.Util.getRGB('blue'); + * var rgb = Kinetic.Util.getRGB('#0000ff'); * var rgb = Kinetic.Util.getRGB('rgb(0,0,255)'); */ getRGB: function(color) { @@ -2330,27 +2330,27 @@ var Kinetic = {}; * region for debugging purposes * @returns {Kinetic.Node} * @example - * // cache a shape with the x,y position of the bounding box at the center and
- * // the width and height of the bounding box equal to the width and height of
- * // the shape obtained from shape.width() and shape.height()
- * image.cache();

+ * // cache a shape with the x,y position of the bounding box at the center and + * // the width and height of the bounding box equal to the width and height of + * // the shape obtained from shape.width() and shape.height() + * image.cache(); * - * // cache a node and define the bounding box position and size
- * node.cache({
- * x: -30,
- * y: -30,
- * width: 100,
- * height: 200
- * });

+ * // cache a node and define the bounding box position and size + * node.cache({ + * x: -30, + * y: -30, + * width: 100, + * height: 200 + * }); * - * // cache a node and draw a red border around the bounding box
- * // for debugging purposes
- * node.cache({
- * x: -30,
- * y: -30,
- * width: 100,
- * height: 200,
- * drawBorder: true
+ * // cache a node and draw a red border around the bounding box + * // for debugging purposes + * node.cache({ + * x: -30, + * y: -30, + * width: 100, + * height: 200, + * drawBorder: true * }); */ cache: function(config) { @@ -2492,45 +2492,45 @@ var Kinetic = {}; * @param {Function} handler The handler function is passed an event object * @returns {Kinetic.Node} * @example - * // add click listener
- * node.on('click', function() {
- * console.log('you clicked me!');
- * });

+ * // add click listener + * node.on('click', function() { + * console.log('you clicked me!'); + * }); * - * // get the target node
- * node.on('click', function(evt) {
- * console.log(evt.target);
- * });

+ * // get the target node + * node.on('click', function(evt) { + * console.log(evt.target); + * }); * - * // stop event propagation
- * node.on('click', function(evt) {
- * evt.cancelBubble = true;
- * });

+ * // stop event propagation + * node.on('click', function(evt) { + * evt.cancelBubble = true; + * }); * - * // bind multiple listeners
- * node.on('click touchstart', function() {
- * console.log('you clicked/touched me!');
- * });

+ * // bind multiple listeners + * node.on('click touchstart', function() { + * console.log('you clicked/touched me!'); + * }); * - * // namespace listener
- * node.on('click.foo', function() {
- * console.log('you clicked/touched me!');
- * });

+ * // namespace listener + * node.on('click.foo', function() { + * console.log('you clicked/touched me!'); + * }); * - * // get the event type
- * node.on('click tap', function(evt) {
- * var eventType = evt.type;
- * });

+ * // get the event type + * node.on('click tap', function(evt) { + * var eventType = evt.type; + * }); * - * // get native event object
- * node.on('click tap', function(evt) {
- * var nativeEvent = evt.evt;
- * });

+ * // get native event object + * node.on('click tap', function(evt) { + * var nativeEvent = evt.evt; + * }); * - * // for change events, get the old and new val
- * node.on('xChange', function(evt) {
- * var oldVal = evt.oldVal;
- * var newVal = evt.newVal;
+ * // for change events, get the old and new val + * node.on('xChange', function(evt) { + * var oldVal = evt.oldVal; + * var newVal = evt.newVal; * }); */ on: function(evtStr, handler) { @@ -2585,13 +2585,13 @@ var Kinetic = {}; * @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar' * @returns {Kinetic.Node} * @example - * // remove listener
- * node.off('click');

+ * // remove listener + * node.off('click'); * - * // remove multiple listeners
- * node.off('click touchstart');

+ * // remove multiple listeners + * node.off('click touchstart'); * - * // remove listener by name
+ * // remove listener by name * node.off('click.foo'); */ off: function(evtStr) { @@ -2730,10 +2730,10 @@ var Kinetic = {}; * @param {Object} config object containing key value pairs * @returns {Kinetic.Node} * @example - * node.setAttrs({
- * x: 5,
- * fill: 'red'
- * });
+ * node.setAttrs({ + * x: 5, + * fill: 'red' + * }); */ setAttrs: function(config) { var key, method; @@ -2918,7 +2918,7 @@ var Kinetic = {}; return index; }, /** - * get node depth in node tree. Returns an integer.

+ * get node depth in node tree. Returns an integer. * e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always * be >= 2 * @method @@ -3045,10 +3045,10 @@ var Kinetic = {}; * @param {Number} change.y * @returns {Kinetic.Node} * @example - * // move node in x direction by 1px and y direction by 2px
- * node.move({
- * x: 1,
- * y: 2)
+ * // move node in x direction by 1px and y direction by 2px + * node.move({ + * x: 1, + * y: 2) * }); */ move: function(change) { @@ -3223,7 +3223,7 @@ var Kinetic = {}; * @param {Container} newContainer * @returns {Kinetic.Node} * @example - * // move node from current layer into layer2
+ * // move node from current layer into layer2 * node.moveTo(layer2); */ moveTo: function(newContainer) { @@ -3320,18 +3320,18 @@ var Kinetic = {}; * not bubbling. Setting the value to true will result in the event bubbling. * @returns {Kinetic.Node} * @example - * // manually fire click event
- * node.fire('click');

+ * // manually fire click event + * node.fire('click'); * - * // fire custom event
- * node.fire('foo');

+ * // fire custom event + * node.fire('foo'); * - * // fire custom event with custom event object
- * node.fire('foo', {
- * bar: 10
- * });

+ * // fire custom event with custom event object + * node.fire('foo', { + * bar: 10 + * }); * - * // fire click event that bubbles
+ * // fire click event that bubbles * node.fire('click', null, true); */ fire: function(eventType, evt, bubble) { @@ -3428,12 +3428,12 @@ var Kinetic = {}; * @param {Object} attrs override attrs * @returns {Kinetic.Node} * @example - * // simple clone
- * var clone = node.clone();

+ * // simple clone + * var clone = node.clone(); * - * // clone a node and override the x position
- * var clone = rect.clone({
- * x: 5
+ * // clone a node and override the x position + * var clone = rect.clone({ + * x: 5 * }); */ clone: function(obj) { @@ -3535,10 +3535,10 @@ var Kinetic = {}; * you can specify the quality from 0 to 1, where 0 is very poor quality and 1 * is very high quality * @example - * var image = node.toImage({
- * callback: function(img) {
- * // do stuff with img
- * }
+ * var image = node.toImage({ + * callback: function(img) { + * // do stuff with img + * } * }); */ toImage: function(config) { @@ -3807,13 +3807,13 @@ var Kinetic = {}; * @param {Nubmer} pos.y * @returns {Object} * @example - * // get position
- * var position = node.position();

+ * // get position + * var position = node.position(); * - * // set position
- * node.position({
- * x: 5
- * y: 10
+ * // set position + * node.position({ + * x: 5 + * y: 10 * }); */ @@ -3827,10 +3827,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Object} * @example - * // get x
- * var x = node.x();

+ * // get x + * var x = node.x(); * - * // set x
+ * // set x * node.x(5); */ @@ -3844,10 +3844,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Integer} * @example - * // get y
- * var y = node.y();

+ * // get y + * var y = node.y(); * - * // set y
+ * // set y * node.y(5); */ @@ -3863,10 +3863,10 @@ var Kinetic = {}; * @param {Object} opacity * @returns {Number} * @example - * // get opacity
- * var opacity = node.opacity();

+ * // get opacity + * var opacity = node.opacity(); * - * // set opacity
+ * // set opacity * node.opacity(0.5); */ @@ -3881,10 +3881,10 @@ var Kinetic = {}; * @param {String} name * @returns {String} * @example - * // get name
- * var name = node.name();

+ * // get name + * var name = node.name(); * - * // set name
+ * // set name * node.name('foo'); */ @@ -3899,10 +3899,10 @@ var Kinetic = {}; * @param {String} id * @returns {String} * @example - * // get id
- * var name = node.id();

+ * // get id + * var name = node.id(); * - * // set id
+ * // set id * node.id('foo'); */ @@ -3916,10 +3916,10 @@ var Kinetic = {}; * @param {Number} rotation * @returns {Number} * @example - * // get rotation in degrees
- * var rotation = node.rotation();

+ * // get rotation in degrees + * var rotation = node.rotation(); * - * // set rotation in degrees
+ * // set rotation in degrees * node.rotation(45); */ @@ -3935,13 +3935,13 @@ var Kinetic = {}; * @memberof Kinetic.Node.prototype * @returns {Object} * @example - * // get scale
- * var scale = node.scale();

+ * // get scale + * var scale = node.scale(); * - * // set scale
- * shape.scale({
- * x: 2
- * y: 3
+ * // set scale + * shape.scale({ + * x: 2 + * y: 3 * }); */ @@ -3955,10 +3955,10 @@ var Kinetic = {}; * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get scale x
- * var scaleX = node.scaleX();

+ * // get scale x + * var scaleX = node.scaleX(); * - * // set scale x
+ * // set scale x * node.scaleX(2); */ @@ -3972,10 +3972,10 @@ var Kinetic = {}; * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get scale y
- * var scaleY = node.scaleY();

+ * // get scale y + * var scaleY = node.scaleY(); * - * // set scale y
+ * // set scale y * node.scaleY(2); */ @@ -3991,12 +3991,12 @@ var Kinetic = {}; * @memberof Kinetic.Node.prototype * @returns {Object} * @example - * // get skew
- * var skew = node.skew();

+ * // get skew + * var skew = node.skew(); * - * // set skew
- * node.skew({
- * x: 20
+ * // set skew + * node.skew({ + * x: 20 * y: 10 * }); */ @@ -4011,10 +4011,10 @@ var Kinetic = {}; * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get skew x
- * var skewX = node.skewX();

+ * // get skew x + * var skewX = node.skewX(); * - * // set skew x
+ * // set skew x * node.skewX(3); */ @@ -4028,10 +4028,10 @@ var Kinetic = {}; * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get skew y
- * var skewY = node.skewY();

+ * // get skew y + * var skewY = node.skewY(); * - * // set skew y
+ * // set skew y * node.skewY(3); */ @@ -4046,13 +4046,13 @@ var Kinetic = {}; * @param {Number} offset.y * @returns {Object} * @example - * // get offset
- * var offset = node.offset();

+ * // get offset + * var offset = node.offset(); * - * // set offset
- * node.offset({
- * x: 20
- * y: 10
+ * // set offset + * node.offset({ + * x: 20 + * y: 10 * }); */ @@ -4065,10 +4065,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get offset x
- * var offsetX = node.offsetX();

+ * // get offset x + * var offsetX = node.offsetX(); * - * // set offset x
+ * // set offset x * node.offsetX(3); */ @@ -4081,13 +4081,13 @@ var Kinetic = {}; * @param {Number} distance * @returns {Number} * @example - * // get drag distance
- * var dragDistance = node.dragDistance();

+ * // get drag distance + * var dragDistance = node.dragDistance(); * - * // set distance
- * // node starts dragging only if pointer moved more then 3 pixels
- * node.dragDistance(3);
- * // or set globally
+ * // set distance + * // node starts dragging only if pointer moved more then 3 pixels + * node.dragDistance(3); + * // or set globally * Kinetic.dragDistance = 3; */ @@ -4102,10 +4102,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get offset y
- * var offsetY = node.offsetY();

+ * // get offset y + * var offsetY = node.offsetY(); * - * // set offset y
+ * // set offset y * node.offsetY(3); */ @@ -4119,10 +4119,10 @@ var Kinetic = {}; * @param {Number} width * @returns {Number} * @example - * // get width
- * var width = node.width();

+ * // get width + * var width = node.width(); * - * // set width
+ * // set width * node.width(100); */ @@ -4136,10 +4136,10 @@ var Kinetic = {}; * @param {Number} height * @returns {Number} * @example - * // get height
- * var height = node.height();

+ * // get height + * var height = node.height(); * - * // set height
+ * // set height * node.height(100); */ @@ -4153,16 +4153,16 @@ var Kinetic = {}; * @param {Boolean|String} listening Can be "inherit", true, or false. The default is "inherit". * @returns {Boolean|String} * @example - * // get listening attr
- * var listening = node.listening();

+ * // get listening attr + * var listening = node.listening(); * - * // stop listening for events
- * node.listening(false);

+ * // stop listening for events + * node.listening(false); * - * // listen for events
- * node.listening(true);

+ * // listen for events + * node.listening(true); * - * // listen to events according to the parent
+ * // listen to events according to the parent * node.listening('inherit'); */ @@ -4175,19 +4175,19 @@ var Kinetic = {}; * @param {Array} filters array of filters * @returns {Array} * @example - * // get filters
- * var filters = node.filters();

+ * // get filters + * var filters = node.filters(); * - * // set a single filter
- * node.cache();
- * node.filters([Kinetic.Filters.Blur]);

+ * // set a single filter + * node.cache(); + * node.filters([Kinetic.Filters.Blur]); * - * // set multiple filters
- * node.cache();
- * node.filters([
- * Kinetic.Filters.Blur,
- * Kinetic.Filters.Sepia,
- * Kinetic.Filters.Invert
+ * // set multiple filters + * node.cache(); + * node.filters([ + * Kinetic.Filters.Blur, + * Kinetic.Filters.Sepia, + * Kinetic.Filters.Invert * ]); */ @@ -4202,16 +4202,16 @@ var Kinetic = {}; * @param {Boolean|String} visible * @returns {Boolean|String} * @example - * // get visible attr
- * var visible = node.visible();

+ * // get visible attr + * var visible = node.visible(); * - * // make invisible
- * node.visible(false);

+ * // make invisible + * node.visible(false); * - * // make visible
- * node.visible(true);

+ * // make visible + * node.visible(true); * - * // make visible according to the parent
+ * // make visible according to the parent * node.visible('inherit'); */ @@ -4226,10 +4226,10 @@ var Kinetic = {}; * @param {String} enabled * @returns {String} * @example - * // enable position transform only to improve draw performance
- * node.transformsEnabled('position');

+ * // enable position transform only to improve draw performance + * node.transformsEnabled('position'); * - * // enable all transforms
+ * // enable all transforms * node.transformsEnabled('all'); */ @@ -4245,15 +4245,15 @@ var Kinetic = {}; * @param {Number} size.height * @returns {Object} * @example - * // get node size
- * var size = node.size();
- * var x = size.x;
- * var y = size.y;

+ * // get node size + * var size = node.size(); + * var x = size.x; + * var y = size.y; * - * // set size
- * node.size({
- * width: 100,
- * height: 200
+ * // set size + * node.size({ + * width: 100, + * height: 200 * }); */ Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'size'); @@ -6019,13 +6019,13 @@ var Kinetic = {}; * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null. * Not specifying a node will result in no redraw. * @example - * // move a node to the right at 50 pixels / second
- * var velocity = 50;

+ * // move a node to the right at 50 pixels / second + * var velocity = 50; * - * var anim = new Kinetic.Animation(function(frame) {
- * var dist = velocity * (frame.timeDiff / 1000);
- * node.move(dist, 0);
- * }, layer);

+ * var anim = new Kinetic.Animation(function(frame) { + * var dist = velocity * (frame.timeDiff / 1000); + * node.move(dist, 0); + * }, layer); * * anim.start(); */ @@ -6293,17 +6293,17 @@ var Kinetic = {}; * @memberof Kinetic * @example * // instantiate new tween which fully rotates a node in 1 second - * var tween = new Kinetic.Tween({
- * node: node,
- * rotationDeg: 360,
- * duration: 1,
- * easing: Kinetic.Easings.EaseInOut
- * });

+ * var tween = new Kinetic.Tween({ + * node: node, + * rotationDeg: 360, + * duration: 1, + * easing: Kinetic.Easings.EaseInOut + * }); * - * // play tween
- * tween.play();

+ * // play tween + * tween.play(); * - * // pause tween
+ * // pause tween * tween.pause(); */ Kinetic.Tween = function(config) { @@ -7117,15 +7117,15 @@ var Kinetic = {}; * @param {Function} dragBoundFunc * @returns {Function} * @example - * // get drag bound function
- * var dragBoundFunc = node.dragBoundFunc();

+ * // get drag bound function + * var dragBoundFunc = node.dragBoundFunc(); * - * // create vertical drag and drop
- * node.dragBoundFunc(function(){
- * return {
- * x: this.getAbsolutePosition().x,
- * y: pos.y
- * };
+ * // create vertical drag and drop + * node.dragBoundFunc(function(){ + * return { + * x: this.getAbsolutePosition().x, + * y: pos.y + * }; * }); */ @@ -7140,13 +7140,13 @@ var Kinetic = {}; * @param {Boolean} draggable * @returns {Boolean} * @example - * // get draggable flag
- * var draggable = node.draggable();

+ * // get draggable flag + * var draggable = node.draggable(); * - * // enable drag and drop
- * node.draggable(true);

+ * // enable drag and drop + * node.draggable(true); * - * // disable drag and drop
+ * // disable drag and drop * node.draggable(false); */ @@ -7171,12 +7171,12 @@ var Kinetic = {}; * @param {Function} [filterFunc] filter function * @returns {Kinetic.Collection} * @example - * // get all children
- * var children = layer.getChildren();

+ * // get all children + * var children = layer.getChildren(); * - * // get only circles
- * var circles = layer.getChildren(function(node){
- * return node.getClassName() === 'Circle';
+ * // get only circles + * var circles = layer.getChildren(function(node){ + * return node.getClassName() === 'Circle'; * }); */ getChildren: function(predicate) { @@ -7291,19 +7291,19 @@ var Kinetic = {}; * @param {String} selector * @returns {Collection} * @example - * // select node with id foo
- * var node = stage.find('#foo');

+ * // select node with id foo + * var node = stage.find('#foo'); * - * // select nodes with name bar inside layer
- * var nodes = layer.find('.bar');

+ * // select nodes with name bar inside layer + * var nodes = layer.find('.bar'); * - * // select all groups inside layer
- * var nodes = layer.find('Group');

+ * // select all groups inside layer + * var nodes = layer.find('Group'); * - * // select all rectangles inside layer
- * var nodes = layer.find('Rect');

+ * // select all rectangles inside layer + * var nodes = layer.find('Rect'); * - * // select node with an id of foo or a name of bar inside layer
+ * // select node with an id of foo or a name of bar inside layer * var nodes = layer.find('#foo, .bar'); */ find: function(selector) { @@ -7524,15 +7524,15 @@ var Kinetic = {}; * @param {Number} clip.height * @returns {Object} * @example - * // get clip
- * var clip = container.clip();

+ * // get clip + * var clip = container.clip(); * - * // set clip
- * container.setClip({
- * x: 20,
- * y: 20,
- * width: 20,
- * height: 20
+ * // set clip + * container.setClip({ + * x: 20, + * y: 20, + * width: 20, + * height: 20 * }); */ @@ -7545,10 +7545,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get clip x
- * var clipX = container.clipX();

+ * // get clip x + * var clipX = container.clipX(); * - * // set clip x
+ * // set clip x * container.clipX(10); */ @@ -7561,10 +7561,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get clip y
- * var clipY = container.clipY();

+ * // get clip y + * var clipY = container.clipY(); * - * // set clip y
+ * // set clip y * container.clipY(10); */ @@ -7577,10 +7577,10 @@ var Kinetic = {}; * @param {Number} width * @returns {Number} * @example - * // get clip width
- * var clipWidth = container.clipWidth();

+ * // get clip width + * var clipWidth = container.clipWidth(); * - * // set clip width
+ * // set clip width * container.clipWidth(100); */ @@ -7593,10 +7593,10 @@ var Kinetic = {}; * @param {Number} height * @returns {Number} * @example - * // get clip height
- * var clipHeight = container.clipHeight();

+ * // get clip height + * var clipHeight = container.clipHeight(); * - * // set clip height
+ * // set clip height * container.clipHeight(100); */ @@ -7887,19 +7887,19 @@ var Kinetic = {}; * @param {String} color * @returns {String} * @example - * // get stroke color
- * var stroke = shape.stroke();

+ * // get stroke color + * var stroke = shape.stroke(); * - * // set stroke color with color string
- * shape.stroke('green');

+ * // set stroke color with color string + * shape.stroke('green'); * - * // set stroke color with hex
- * shape.stroke('#00ff00');

+ * // set stroke color with hex + * shape.stroke('#00ff00'); * - * // set stroke color with rgb
- * shape.stroke('rgb(0,255,0)');

+ * // set stroke color with rgb + * shape.stroke('rgb(0,255,0)'); * - * // set stroke color with rgba and make it 50% opaque
+ * // set stroke color with rgba and make it 50% opaque * shape.stroke('rgba(0,255,0,0.5'); */ @@ -7913,10 +7913,10 @@ var Kinetic = {}; * @param {Integer} red * @returns {Integer} * @example - * // get stroke red component
- * var strokeRed = shape.strokeRed();

+ * // get stroke red component + * var strokeRed = shape.strokeRed(); * - * // set stroke red component
+ * // set stroke red component * shape.strokeRed(0); */ @@ -7930,10 +7930,10 @@ var Kinetic = {}; * @param {Integer} green * @returns {Integer} * @example - * // get stroke green component
- * var strokeGreen = shape.strokeGreen();

+ * // get stroke green component + * var strokeGreen = shape.strokeGreen(); * - * // set stroke green component
+ * // set stroke green component * shape.strokeGreen(255); */ @@ -7947,10 +7947,10 @@ var Kinetic = {}; * @param {Integer} blue * @returns {Integer} * @example - * // get stroke blue component
- * var strokeBlue = shape.strokeBlue();

+ * // get stroke blue component + * var strokeBlue = shape.strokeBlue(); * - * // set stroke blue component
+ * // set stroke blue component * shape.strokeBlue(0); */ @@ -7965,10 +7965,10 @@ var Kinetic = {}; * @param {Number} alpha * @returns {Number} * @example - * // get stroke alpha component
- * var strokeAlpha = shape.strokeAlpha();

+ * // get stroke alpha component + * var strokeAlpha = shape.strokeAlpha(); * - * // set stroke alpha component
+ * // set stroke alpha component * shape.strokeAlpha(0.5); */ @@ -7982,10 +7982,10 @@ var Kinetic = {}; * @param {Number} strokeWidth * @returns {Number} * @example - * // get stroke width
- * var strokeWidth = shape.strokeWidth();

+ * // get stroke width + * var strokeWidth = shape.strokeWidth(); * - * // set stroke width
+ * // set stroke width * shape.strokeWidth(); */ @@ -8000,10 +8000,10 @@ var Kinetic = {}; * @param {String} lineJoin * @returns {String} * @example - * // get line join
- * var lineJoin = shape.lineJoin();

+ * // get line join + * var lineJoin = shape.lineJoin(); * - * // set line join
+ * // set line join * shape.lineJoin('round'); */ @@ -8017,10 +8017,10 @@ var Kinetic = {}; * @param {String} lineCap * @returns {String} * @example - * // get line cap
- * var lineCap = shape.lineCap();

+ * // get line cap + * var lineCap = shape.lineCap(); * - * // set line cap
+ * // set line cap * shape.lineCap('round'); */ @@ -8034,15 +8034,15 @@ var Kinetic = {}; * @param {Function} drawFunc drawing function * @returns {Function} * @example - * // get scene draw function
- * var sceneFunc = shape.sceneFunc();

+ * // get scene draw function + * var sceneFunc = shape.sceneFunc(); * - * // set scene draw function
- * shape.sceneFunc(function(context) {
- * context.beginPath();
- * context.rect(0, 0, this.width(), this.height());
- * context.closePath();
- * context.fillStrokeShape(this);
+ * // set scene draw function + * shape.sceneFunc(function(context) { + * context.beginPath(); + * context.rect(0, 0, this.width(), this.height()); + * context.closePath(); + * context.fillStrokeShape(this); * }); */ @@ -8056,15 +8056,15 @@ var Kinetic = {}; * @param {Function} drawFunc drawing function * @returns {Function} * @example - * // get hit draw function
- * var hitFunc = shape.hitFunc();

+ * // get hit draw function + * var hitFunc = shape.hitFunc(); * - * // set hit draw function
- * shape.hitFunc(function(context) {
- * context.beginPath();
- * context.rect(0, 0, this.width(), this.height());
- * context.closePath();
- * context.fillStrokeShape(this);
+ * // set hit draw function + * shape.hitFunc(function(context) { + * context.beginPath(); + * context.rect(0, 0, this.width(), this.height()); + * context.closePath(); + * context.fillStrokeShape(this); * }); */ @@ -8078,12 +8078,12 @@ var Kinetic = {}; * @param {Array} dash * @returns {Array} * @example - * // apply dashed stroke that is 10px long and 5 pixels apart
- * line.dash([10, 5]);

+ * // apply dashed stroke that is 10px long and 5 pixels apart + * line.dash([10, 5]); * - * // apply dashed stroke that is made up of alternating dashed
- * // lines that are 10px long and 20px apart, and dots that have
- * // a radius of 5px and are 20px apart
+ * // apply dashed stroke that is made up of alternating dashed + * // lines that are 10px long and 20px apart, and dots that have + * // a radius of 5px and are 20px apart * line.dash([10, 20, 0.001, 20]); */ @@ -8098,19 +8098,19 @@ var Kinetic = {}; * @param {String} color * @returns {String} * @example - * // get shadow color
- * var shadow = shape.shadowColor();

+ * // get shadow color + * var shadow = shape.shadowColor(); * - * // set shadow color with color string
- * shape.shadowColor('green');

+ * // set shadow color with color string + * shape.shadowColor('green'); * - * // set shadow color with hex
- * shape.shadowColor('#00ff00');

+ * // set shadow color with hex + * shape.shadowColor('#00ff00'); * - * // set shadow color with rgb
- * shape.shadowColor('rgb(0,255,0)');

+ * // set shadow color with rgb + * shape.shadowColor('rgb(0,255,0)'); * - * // set shadow color with rgba and make it 50% opaque
+ * // set shadow color with rgba and make it 50% opaque * shape.shadowColor('rgba(0,255,0,0.5'); */ @@ -8124,10 +8124,10 @@ var Kinetic = {}; * @param {Integer} red * @returns {Integer} * @example - * // get shadow red component
- * var shadowRed = shape.shadowRed();

+ * // get shadow red component + * var shadowRed = shape.shadowRed(); * - * // set shadow red component
+ * // set shadow red component * shape.shadowRed(0); */ @@ -8141,10 +8141,10 @@ var Kinetic = {}; * @param {Integer} green * @returns {Integer} * @example - * // get shadow green component
- * var shadowGreen = shape.shadowGreen();

+ * // get shadow green component + * var shadowGreen = shape.shadowGreen(); * - * // set shadow green component
+ * // set shadow green component * shape.shadowGreen(255); */ @@ -8158,10 +8158,10 @@ var Kinetic = {}; * @param {Integer} blue * @returns {Integer} * @example - * // get shadow blue component
- * var shadowBlue = shape.shadowBlue();

+ * // get shadow blue component + * var shadowBlue = shape.shadowBlue(); * - * // set shadow blue component
+ * // set shadow blue component * shape.shadowBlue(0); */ @@ -8176,10 +8176,10 @@ var Kinetic = {}; * @param {Number} alpha * @returns {Number} * @example - * // get shadow alpha component
- * var shadowAlpha = shape.shadowAlpha();

+ * // get shadow alpha component + * var shadowAlpha = shape.shadowAlpha(); * - * // set shadow alpha component
+ * // set shadow alpha component * shape.shadowAlpha(0.5); */ @@ -8193,10 +8193,10 @@ var Kinetic = {}; * @param {Number} blur * @returns {Number} * @example - * // get shadow blur
- * var shadowBlur = shape.shadowBlur();

+ * // get shadow blur + * var shadowBlur = shape.shadowBlur(); * - * // set shadow blur
+ * // set shadow blur * shape.shadowBlur(10); */ @@ -8210,10 +8210,10 @@ var Kinetic = {}; * @param {Number} opacity * @returns {Number} * @example - * // get shadow opacity
- * var shadowOpacity = shape.shadowOpacity();

+ * // get shadow opacity + * var shadowOpacity = shape.shadowOpacity(); * - * // set shadow opacity
+ * // set shadow opacity * shape.shadowOpacity(0.5); */ @@ -8229,13 +8229,13 @@ var Kinetic = {}; * @param {Number} offset.y * @returns {Object} * @example - * // get shadow offset
- * var shadowOffset = shape.shadowOffset();

+ * // get shadow offset + * var shadowOffset = shape.shadowOffset(); * - * // set shadow offset
- * shape.shadowOffset({
- * x: 20
- * y: 10
+ * // set shadow offset + * shape.shadowOffset({ + * x: 20 + * y: 10 * }); */ @@ -8249,10 +8249,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get shadow offset x
- * var shadowOffsetX = shape.shadowOffsetX();

+ * // get shadow offset x + * var shadowOffsetX = shape.shadowOffsetX(); * - * // set shadow offset x
+ * // set shadow offset x * shape.shadowOffsetX(5); */ @@ -8266,10 +8266,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get shadow offset y
- * var shadowOffsetY = shape.shadowOffsetY();

+ * // get shadow offset y + * var shadowOffsetY = shape.shadowOffsetY(); * - * // set shadow offset y
+ * // set shadow offset y * shape.shadowOffsetY(5); */ @@ -8283,14 +8283,14 @@ var Kinetic = {}; * @param {Image} image object * @returns {Image} * @example - * // get fill pattern image
- * var fillPatternImage = shape.fillPatternImage();

+ * // get fill pattern image + * var fillPatternImage = shape.fillPatternImage(); * - * // set fill pattern image
- * var imageObj = new Image();
- * imageObj.onload = function() {
- * shape.fillPatternImage(imageObj);
- * };
+ * // set fill pattern image + * var imageObj = new Image(); + * imageObj.onload = function() { + * shape.fillPatternImage(imageObj); + * }; * imageObj.src = 'path/to/image/jpg'; */ @@ -8304,19 +8304,19 @@ var Kinetic = {}; * @param {String} color * @returns {String} * @example - * // get fill color
- * var fill = shape.fill();

+ * // get fill color + * var fill = shape.fill(); * - * // set fill color with color string
- * shape.fill('green');

+ * // set fill color with color string + * shape.fill('green'); * - * // set fill color with hex
- * shape.fill('#00ff00');

+ * // set fill color with hex + * shape.fill('#00ff00'); * - * // set fill color with rgb
- * shape.fill('rgb(0,255,0)');

+ * // set fill color with rgb + * shape.fill('rgb(0,255,0)'); * - * // set fill color with rgba and make it 50% opaque
+ * // set fill color with rgba and make it 50% opaque * shape.fill('rgba(0,255,0,0.5'); */ @@ -8330,10 +8330,10 @@ var Kinetic = {}; * @param {Integer} red * @returns {Integer} * @example - * // get fill red component
- * var fillRed = shape.fillRed();

+ * // get fill red component + * var fillRed = shape.fillRed(); * - * // set fill red component
+ * // set fill red component * shape.fillRed(0); */ @@ -8347,10 +8347,10 @@ var Kinetic = {}; * @param {Integer} green * @returns {Integer} * @example - * // get fill green component
- * var fillGreen = shape.fillGreen();

+ * // get fill green component + * var fillGreen = shape.fillGreen(); * - * // set fill green component
+ * // set fill green component * shape.fillGreen(255); */ @@ -8364,10 +8364,10 @@ var Kinetic = {}; * @param {Integer} blue * @returns {Integer} * @example - * // get fill blue component
- * var fillBlue = shape.fillBlue();

+ * // get fill blue component + * var fillBlue = shape.fillBlue(); * - * // set fill blue component
+ * // set fill blue component * shape.fillBlue(0); */ @@ -8382,10 +8382,10 @@ var Kinetic = {}; * @param {Number} alpha * @returns {Number} * @example - * // get fill alpha component
- * var fillAlpha = shape.fillAlpha();

+ * // get fill alpha component + * var fillAlpha = shape.fillAlpha(); * - * // set fill alpha component
+ * // set fill alpha component * shape.fillAlpha(0.5); */ @@ -8400,10 +8400,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get fill pattern x
- * var fillPatternX = shape.fillPatternX();

+ * // get fill pattern x + * var fillPatternX = shape.fillPatternX(); * - * // set fill pattern x
+ * // set fill pattern x * shape.fillPatternX(20); */ @@ -8417,10 +8417,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get fill pattern y
- * var fillPatternY = shape.fillPatternY();

+ * // get fill pattern y + * var fillPatternY = shape.fillPatternY(); * - * // set fill pattern y
+ * // set fill pattern y * shape.fillPatternY(20); */ @@ -8434,11 +8434,11 @@ var Kinetic = {}; * @param {Array} colorStops * @returns {Array} colorStops * @example - * // get fill linear gradient color stops
- * var colorStops = shape.fillLinearGradientColorStops();

+ * // get fill linear gradient color stops + * var colorStops = shape.fillLinearGradientColorStops(); * - * // create a linear gradient that starts with red, changes to blue
- * // halfway through, and then changes to green
+ * // create a linear gradient that starts with red, changes to blue + * // halfway through, and then changes to green * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); */ @@ -8452,10 +8452,10 @@ var Kinetic = {}; * @param {Number} radius * @returns {Number} * @example - * // get radial gradient start radius
- * var startRadius = shape.fillRadialGradientStartRadius();

+ * // get radial gradient start radius + * var startRadius = shape.fillRadialGradientStartRadius(); * - * // set radial gradient start radius
+ * // set radial gradient start radius * shape.fillRadialGradientStartRadius(0); */ @@ -8469,10 +8469,10 @@ var Kinetic = {}; * @param {Number} radius * @returns {Number} * @example - * // get radial gradient end radius
- * var endRadius = shape.fillRadialGradientEndRadius();

+ * // get radial gradient end radius + * var endRadius = shape.fillRadialGradientEndRadius(); * - * // set radial gradient end radius
+ * // set radial gradient end radius * shape.fillRadialGradientEndRadius(100); */ @@ -8486,11 +8486,11 @@ var Kinetic = {}; * @param {Number} colorStops * @returns {Array} * @example - * // get fill radial gradient color stops
- * var colorStops = shape.fillRadialGradientColorStops();

+ * // get fill radial gradient color stops + * var colorStops = shape.fillRadialGradientColorStops(); * - * // create a radial gradient that starts with red, changes to blue
- * // halfway through, and then changes to green
+ * // create a radial gradient that starts with red, changes to blue + * // halfway through, and then changes to green * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); */ @@ -8504,13 +8504,13 @@ var Kinetic = {}; * @param {String} repeat * @returns {String} * @example - * // get fill pattern repeat
- * var repeat = shape.fillPatternRepeat();

+ * // get fill pattern repeat + * var repeat = shape.fillPatternRepeat(); * - * // repeat pattern in x direction only
- * shape.fillPatternRepeat('repeat-x');

+ * // repeat pattern in x direction only + * shape.fillPatternRepeat('repeat-x'); * - * // do not repeat the pattern
+ * // do not repeat the pattern * shape.fillPatternRepeat('no repeat'); */ @@ -8524,13 +8524,13 @@ var Kinetic = {}; * @param {Boolean} enabled * @returns {Boolean} * @example - * // get fill enabled flag
- * var fillEnabled = shape.fillEnabled();

+ * // get fill enabled flag + * var fillEnabled = shape.fillEnabled(); * - * // disable fill
- * shape.fillEnabled(false);

+ * // disable fill + * shape.fillEnabled(false); * - * // enable fill
+ * // enable fill * shape.fillEnabled(true); */ @@ -8544,13 +8544,13 @@ var Kinetic = {}; * @param {Boolean} enabled * @returns {Boolean} * @example - * // get stroke enabled flag
- * var strokeEnabled = shape.strokeEnabled();

+ * // get stroke enabled flag + * var strokeEnabled = shape.strokeEnabled(); * - * // disable stroke
- * shape.strokeEnabled(false);

+ * // disable stroke + * shape.strokeEnabled(false); * - * // enable stroke
+ * // enable stroke * shape.strokeEnabled(true); */ @@ -8564,13 +8564,13 @@ var Kinetic = {}; * @param {Boolean} enabled * @returns {Boolean} * @example - * // get shadow enabled flag
- * var shadowEnabled = shape.shadowEnabled();

+ * // get shadow enabled flag + * var shadowEnabled = shape.shadowEnabled(); * - * // disable shadow
- * shape.shadowEnabled(false);

+ * // disable shadow + * shape.shadowEnabled(false); * - * // enable shadow
+ * // enable shadow * shape.shadowEnabled(true); */ @@ -8584,13 +8584,13 @@ var Kinetic = {}; * @param {Boolean} enabled * @returns {Boolean} * @example - * // get dash enabled flag
- * var dashEnabled = shape.dashEnabled();

+ * // get dash enabled flag + * var dashEnabled = shape.dashEnabled(); * - * // disable dash
- * shape.dashEnabled(false);

+ * // disable dash + * shape.dashEnabled(false); * - * // enable dash
+ * // enable dash * shape.dashEnabled(true); */ @@ -8604,13 +8604,13 @@ var Kinetic = {}; * @param {Boolean} enabled * @returns {Boolean} * @example - * // get stroke scale enabled flag
- * var strokeScaleEnabled = shape.strokeScaleEnabled();

+ * // get stroke scale enabled flag + * var strokeScaleEnabled = shape.strokeScaleEnabled(); * - * // disable stroke scale
- * shape.strokeScaleEnabled(false);

+ * // disable stroke scale + * shape.strokeScaleEnabled(false); * - * // enable stroke scale
+ * // enable stroke scale * shape.strokeScaleEnabled(true); */ @@ -8625,10 +8625,10 @@ var Kinetic = {}; * @param {String} priority * @returns {String} * @example - * // get fill priority
- * var fillPriority = shape.fillPriority();

+ * // get fill priority + * var fillPriority = shape.fillPriority(); * - * // set fill priority
+ * // set fill priority * shape.fillPriority('linear-gradient'); */ @@ -8644,13 +8644,13 @@ var Kinetic = {}; * @param {Number} offset.y * @returns {Object} * @example - * // get fill pattern offset
- * var patternOffset = shape.fillPatternOffset();

+ * // get fill pattern offset + * var patternOffset = shape.fillPatternOffset(); * - * // set fill pattern offset
- * shape.fillPatternOffset({
- * x: 20
- * y: 10
+ * // set fill pattern offset + * shape.fillPatternOffset({ + * x: 20 + * y: 10 * }); */ @@ -8664,10 +8664,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get fill pattern offset x
- * var patternOffsetX = shape.fillPatternOffsetX();

+ * // get fill pattern offset x + * var patternOffsetX = shape.fillPatternOffsetX(); * - * // set fill pattern offset x
+ * // set fill pattern offset x * shape.fillPatternOffsetX(20); */ @@ -8680,10 +8680,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get fill pattern offset y
- * var patternOffsetY = shape.fillPatternOffsetY();

+ * // get fill pattern offset y + * var patternOffsetY = shape.fillPatternOffsetY(); * - * // set fill pattern offset y
+ * // set fill pattern offset y * shape.fillPatternOffsetY(10); */ @@ -8699,13 +8699,13 @@ var Kinetic = {}; * @param {Number} scale.y * @returns {Object} * @example - * // get fill pattern scale
- * var patternScale = shape.fillPatternScale();

+ * // get fill pattern scale + * var patternScale = shape.fillPatternScale(); * - * // set fill pattern scale
- * shape.fillPatternScale({
- * x: 2
- * y: 2
+ * // set fill pattern scale + * shape.fillPatternScale({ + * x: 2 + * y: 2 * }); */ @@ -8719,10 +8719,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get fill pattern scale x
- * var patternScaleX = shape.fillPatternScaleX();

+ * // get fill pattern scale x + * var patternScaleX = shape.fillPatternScaleX(); * - * // set fill pattern scale x
+ * // set fill pattern scale x * shape.fillPatternScaleX(2); */ @@ -8735,10 +8735,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get fill pattern scale y
- * var patternScaleY = shape.fillPatternScaleY();

+ * // get fill pattern scale y + * var patternScaleY = shape.fillPatternScaleY(); * - * // set fill pattern scale y
+ * // set fill pattern scale y * shape.fillPatternScaleY(2); */ @@ -8754,13 +8754,13 @@ var Kinetic = {}; * @param {Number} startPoint.y * @returns {Object} * @example - * // get fill linear gradient start point
- * var startPoint = shape.fillLinearGradientStartPoint();

+ * // get fill linear gradient start point + * var startPoint = shape.fillLinearGradientStartPoint(); * - * // set fill linear gradient start point
- * shape.fillLinearGradientStartPoint({
- * x: 20
- * y: 10
+ * // set fill linear gradient start point + * shape.fillLinearGradientStartPoint({ + * x: 20 + * y: 10 * }); */ @@ -8773,10 +8773,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get fill linear gradient start point x
- * var startPointX = shape.fillLinearGradientStartPointX();

+ * // get fill linear gradient start point x + * var startPointX = shape.fillLinearGradientStartPointX(); * - * // set fill linear gradient start point x
+ * // set fill linear gradient start point x * shape.fillLinearGradientStartPointX(20); */ @@ -8789,10 +8789,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get fill linear gradient start point y
- * var startPointY = shape.fillLinearGradientStartPointY();

+ * // get fill linear gradient start point y + * var startPointY = shape.fillLinearGradientStartPointY(); * - * // set fill linear gradient start point y
+ * // set fill linear gradient start point y * shape.fillLinearGradientStartPointY(20); */ @@ -8808,13 +8808,13 @@ var Kinetic = {}; * @param {Number} endPoint.y * @returns {Object} * @example - * // get fill linear gradient end point
- * var endPoint = shape.fillLinearGradientEndPoint();

+ * // get fill linear gradient end point + * var endPoint = shape.fillLinearGradientEndPoint(); * - * // set fill linear gradient end point
- * shape.fillLinearGradientEndPoint({
- * x: 20
- * y: 10
+ * // set fill linear gradient end point + * shape.fillLinearGradientEndPoint({ + * x: 20 + * y: 10 * }); */ @@ -8827,10 +8827,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get fill linear gradient end point x
- * var endPointX = shape.fillLinearGradientEndPointX();

+ * // get fill linear gradient end point x + * var endPointX = shape.fillLinearGradientEndPointX(); * - * // set fill linear gradient end point x
+ * // set fill linear gradient end point x * shape.fillLinearGradientEndPointX(20); */ @@ -8843,10 +8843,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get fill linear gradient end point y
- * var endPointY = shape.fillLinearGradientEndPointY();

+ * // get fill linear gradient end point y + * var endPointY = shape.fillLinearGradientEndPointY(); * - * // set fill linear gradient end point y
+ * // set fill linear gradient end point y * shape.fillLinearGradientEndPointY(20); */ @@ -8862,13 +8862,13 @@ var Kinetic = {}; * @param {Number} startPoint.y * @returns {Object} * @example - * // get fill radial gradient start point
- * var startPoint = shape.fillRadialGradientStartPoint();

+ * // get fill radial gradient start point + * var startPoint = shape.fillRadialGradientStartPoint(); * - * // set fill radial gradient start point
- * shape.fillRadialGradientStartPoint({
- * x: 20
- * y: 10
+ * // set fill radial gradient start point + * shape.fillRadialGradientStartPoint({ + * x: 20 + * y: 10 * }); */ @@ -8881,10 +8881,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get fill radial gradient start point x
- * var startPointX = shape.fillRadialGradientStartPointX();

+ * // get fill radial gradient start point x + * var startPointX = shape.fillRadialGradientStartPointX(); * - * // set fill radial gradient start point x
+ * // set fill radial gradient start point x * shape.fillRadialGradientStartPointX(20); */ @@ -8897,10 +8897,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get fill radial gradient start point y
- * var startPointY = shape.fillRadialGradientStartPointY();

+ * // get fill radial gradient start point y + * var startPointY = shape.fillRadialGradientStartPointY(); * - * // set fill radial gradient start point y
+ * // set fill radial gradient start point y * shape.fillRadialGradientStartPointY(20); */ @@ -8916,13 +8916,13 @@ var Kinetic = {}; * @param {Number} endPoint.y * @returns {Object} * @example - * // get fill radial gradient end point
- * var endPoint = shape.fillRadialGradientEndPoint();

+ * // get fill radial gradient end point + * var endPoint = shape.fillRadialGradientEndPoint(); * - * // set fill radial gradient end point
- * shape.fillRadialGradientEndPoint({
- * x: 20
- * y: 10
+ * // set fill radial gradient end point + * shape.fillRadialGradientEndPoint({ + * x: 20 + * y: 10 * }); */ @@ -8935,10 +8935,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get fill radial gradient end point x
- * var endPointX = shape.fillRadialGradientEndPointX();

+ * // get fill radial gradient end point x + * var endPointX = shape.fillRadialGradientEndPointX(); * - * // set fill radial gradient end point x
+ * // set fill radial gradient end point x * shape.fillRadialGradientEndPointX(20); */ @@ -8951,10 +8951,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get fill radial gradient end point y
- * var endPointY = shape.fillRadialGradientEndPointY();

+ * // get fill radial gradient end point y + * var endPointY = shape.fillRadialGradientEndPointY(); * - * // set fill radial gradient end point y
+ * // set fill radial gradient end point y * shape.fillRadialGradientEndPointY(20); */ @@ -8968,10 +8968,10 @@ var Kinetic = {}; * @param {Number} rotation * @returns {Kinetic.Shape} * @example - * // get fill pattern rotation
- * var patternRotation = shape.fillPatternRotation();

+ * // get fill pattern rotation + * var patternRotation = shape.fillPatternRotation(); * - * // set fill pattern rotation
+ * // set fill pattern rotation * shape.fillPatternRotation(20); */ @@ -9699,12 +9699,12 @@ var Kinetic = {}; * @memberof Kinetic.Stage.prototype * @returns {DomElement} container * @example - * // get container
- * var container = stage.container();

+ * // get container + * var container = stage.container(); * - * // set container
- * var container = document.createElement('div');
- * body.appendChild(container);
+ * // set container + * var container = document.createElement('div'); + * body.appendChild(container); * stage.container(container); */ @@ -9752,7 +9752,7 @@ var Kinetic = {}; * @param {Number} [bounds.width] * @param {Number} [bounds.height] * @example - * layer.clear();
+ * layer.clear(); * layer.clear(0, 0, 100, 100); */ clear: function(bounds) { @@ -9853,13 +9853,13 @@ var Kinetic = {}; * @param {Boolean} clearBeforeDraw * @returns {Boolean} * @example - * // get clearBeforeDraw flag
- * var clearBeforeDraw = layer.clearBeforeDraw();

+ * // get clearBeforeDraw flag + * var clearBeforeDraw = layer.clearBeforeDraw(); * - * // disable clear before draw
- * layer.clearBeforeDraw(false);

+ * // disable clear before draw + * layer.clearBeforeDraw(false); * - * // enable clear before draw
+ * // enable clear before draw * layer.clearBeforeDraw(true); */ @@ -10015,7 +10015,7 @@ var Kinetic = {}; * @param {Number} [bounds.width] * @param {Number} [bounds.height] * @example - * layer.clear();
+ * layer.clear(); * layer.clear(0, 0, 100, 100); */ clear: function(bounds) { @@ -10072,13 +10072,13 @@ var Kinetic = {}; * @param {Boolean} enabled * @returns {Boolean} * @example - * // get hitGraphEnabled flag
- * var hitGraphEnabled = layer.hitGraphEnabled();

+ * // get hitGraphEnabled flag + * var hitGraphEnabled = layer.hitGraphEnabled(); * - * // disable hit graph
- * layer.hitGraphEnabled(false);

+ * // disable hit graph + * layer.hitGraphEnabled(false); * - * // enable hit graph
+ * // enable hit graph * layer.hitGraphEnabled(true); */ @@ -10147,7 +10147,7 @@ var Kinetic = {}; * @param {Number} [bounds.width] * @param {Number} [bounds.height] * @example - * layer.clear();
+ * layer.clear(); * layer.clear(0, 0, 100, 100); */ clear: function(bounds) { @@ -10277,12 +10277,12 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var rect = new Kinetic.Rect({
- * width: 100,
- * height: 50,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 5
+ * var rect = new Kinetic.Rect({ + * width: 100, + * height: 50, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 5 * }); */ Kinetic.Rect = function(config) { @@ -10335,10 +10335,10 @@ var Kinetic = {}; * @param {Number} cornerRadius * @returns {Number} * @example - * // get corner radius
- * var cornerRadius = rect.cornerRadius();

+ * // get corner radius + * var cornerRadius = rect.cornerRadius(); * - * // set corner radius
+ * // set corner radius * rect.cornerRadius(10); */ @@ -10438,11 +10438,11 @@ var Kinetic = {}; * @param {Function} [config.dragBoundFunc] * @example * // create circle - * var circle = new Kinetic.Circle({
- * radius: 40,
- * fill: 'red',
- * stroke: 'black'
- * strokeWidth: 5
+ * var circle = new Kinetic.Circle({ + * radius: 40, + * fill: 'red', + * stroke: 'black' + * strokeWidth: 5 * }); */ Kinetic.Circle = function(config) { @@ -10494,11 +10494,11 @@ var Kinetic = {}; * @param {Number} radius * @returns {Number} * @example - * // get radius
- * var radius = circle.radius();

+ * // get radius + * var radius = circle.radius(); * - * // set radius
- * circle.radius(10);
+ * // set radius + * circle.radius(10); */ Kinetic.Collection.mapMethods(Kinetic.Circle); @@ -10517,12 +10517,12 @@ var Kinetic = {}; * @@ShapeParams * @@NodeParams * @example - * var ellipse = new Kinetic.Ellipse({
- * radius : {
- * x : 50,
- * y : 50
- * },
- * fill: 'red'
+ * var ellipse = new Kinetic.Ellipse({ + * radius : { + * x : 50, + * y : 50 + * }, + * fill: 'red' * }); */ Kinetic.Ellipse = function(config) { @@ -10589,13 +10589,13 @@ var Kinetic = {}; * @param {Number} radius.y * @returns {Object} * @example - * // get radius
- * var radius = ellipse.radius();

+ * // get radius + * var radius = ellipse.radius(); * - * // set radius
- * ellipse.radius({
- * x: 200,
- * y: 100
+ * // set radius + * ellipse.radius({ + * x: 200, + * y: 100 * }); */ @@ -10608,10 +10608,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get radius x
- * var radiusX = ellipse.radiusX();

+ * // get radius x + * var radiusX = ellipse.radiusX(); * - * // set radius x
+ * // set radius x * ellipse.radiusX(200); */ @@ -10624,10 +10624,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get radius y
- * var radiusY = ellipse.radiusY();

+ * // get radius y + * var radiusY = ellipse.radiusY(); * - * // set radius y
+ * // set radius y * ellipse.radiusY(200); */ @@ -10726,12 +10726,12 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var ring = new Kinetic.Ring({
- * innerRadius: 40,
- * outerRadius: 80,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 5
+ * var ring = new Kinetic.Ring({ + * innerRadius: 40, + * outerRadius: 80, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 5 * }); */ Kinetic.Ring = function(config) { @@ -10785,10 +10785,10 @@ var Kinetic = {}; * @param {Number} innerRadius * @returns {Number} * @example - * // get inner radius
- * var innerRadius = ring.innerRadius();

+ * // get inner radius + * var innerRadius = ring.innerRadius(); * - * // set inner radius
+ * // set inner radius * ring.innerRadius(20); */ @@ -10802,10 +10802,10 @@ var Kinetic = {}; * @param {Number} outerRadius * @returns {Number} * @example - * // get outer radius
- * var outerRadius = ring.outerRadius();

+ * // get outer radius + * var outerRadius = ring.outerRadius(); * - * // set outer radius
+ * // set outer radius * ring.outerRadius(20); */ @@ -10901,14 +10901,14 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * // draw a wedge that's pointing downwards
- * var wedge = new Kinetic.Wedge({
- * radius: 40,
- * fill: 'red',
- * stroke: 'black'
- * strokeWidth: 5,
- * angleDeg: 60,
- * rotationDeg: -120
+ * // draw a wedge that's pointing downwards + * var wedge = new Kinetic.Wedge({ + * radius: 40, + * fill: 'red', + * stroke: 'black' + * strokeWidth: 5, + * angleDeg: 60, + * rotationDeg: -120 * }); */ Kinetic.Wedge = function(config) { @@ -10943,11 +10943,11 @@ var Kinetic = {}; * @param {Number} radius * @returns {Number} * @example - * // get radius
- * var radius = wedge.radius();

+ * // get radius + * var radius = wedge.radius(); * - * // set radius
- * wedge.radius(10);
+ * // set radius + * wedge.radius(10); */ Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'angle', 0); @@ -10960,10 +10960,10 @@ var Kinetic = {}; * @param {Number} angle * @returns {Number} * @example - * // get angle
- * var angle = wedge.angle();

+ * // get angle + * var angle = wedge.angle(); * - * // set angle
+ * // set angle * wedge.angle(20); */ @@ -10977,13 +10977,13 @@ var Kinetic = {}; * @param {Number} clockwise * @returns {Number} * @example - * // get clockwise flag
- * var clockwise = wedge.clockwise();

+ * // get clockwise flag + * var clockwise = wedge.clockwise(); * - * // draw wedge counter-clockwise
- * wedge.clockwise(false);

+ * // draw wedge counter-clockwise + * wedge.clockwise(false); * - * // draw wedge clockwise
+ * // draw wedge clockwise * wedge.clockwise(true); */ @@ -11088,15 +11088,15 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * // draw a Arc that's pointing downwards
- * var arc = new Kinetic.Arc({
- * innerRadius: 40,
- * outerRadius: 80,
- * fill: 'red',
- * stroke: 'black'
- * strokeWidth: 5,
- * angle: 60,
- * rotationDeg: -120
+ * // draw a Arc that's pointing downwards + * var arc = new Kinetic.Arc({ + * innerRadius: 40, + * outerRadius: 80, + * fill: 'red', + * stroke: 'black' + * strokeWidth: 5, + * angle: 60, + * rotationDeg: -120 * }); */ Kinetic.Arc = function(config) { @@ -11151,10 +11151,10 @@ var Kinetic = {}; * @param {Number} outerRadius * @returns {Number} * @example - * // get outer radius
- * var outerRadius = arc.outerRadius();

+ * // get outer radius + * var outerRadius = arc.outerRadius(); * - * // set outer radius
+ * // set outer radius * arc.outerRadius(20); */ @@ -11168,10 +11168,10 @@ var Kinetic = {}; * @param {Number} angle * @returns {Number} * @example - * // get angle
- * var angle = arc.angle();

+ * // get angle + * var angle = arc.angle(); * - * // set angle
+ * // set angle * arc.angle(20); */ @@ -11185,13 +11185,13 @@ var Kinetic = {}; * @param {Boolean} clockwise * @returns {Boolean} * @example - * // get clockwise flag
- * var clockwise = arc.clockwise();

+ * // get clockwise flag + * var clockwise = arc.clockwise(); * - * // draw arc counter-clockwise
- * arc.clockwise(false);

+ * // draw arc counter-clockwise + * arc.clockwise(false); * - * // draw arc clockwise
+ * // draw arc clockwise * arc.clockwise(true); */ @@ -11291,16 +11291,16 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var imageObj = new Image();
- * imageObj.onload = function() {
- * var image = new Kinetic.Image({
- * x: 200,
- * y: 50,
- * image: imageObj,
- * width: 100,
- * height: 100
- * });
- * };
+ * var imageObj = new Image(); + * imageObj.onload = function() { + * var image = new Kinetic.Image({ + * x: 200, + * y: 50, + * image: imageObj, + * width: 100, + * height: 100 + * }); + * }; * imageObj.src = '/path/to/image.jpg' */ Kinetic.Image = function(config) { @@ -11396,15 +11396,15 @@ var Kinetic = {}; * @param {Number} crop.height * @returns {Object} * @example - * // get crop
- * var crop = image.crop();

+ * // get crop + * var crop = image.crop(); * - * // set crop
- * image.crop({
- * x: 20,
- * y: 20,
- * width: 20,
- * height: 20
+ * // set crop + * image.crop({ + * x: 20, + * y: 20, + * width: 20, + * height: 20 * }); */ @@ -11417,10 +11417,10 @@ var Kinetic = {}; * @param {Number} x * @returns {Number} * @example - * // get crop x
- * var cropX = image.cropX();

+ * // get crop x + * var cropX = image.cropX(); * - * // set crop x
+ * // set crop x * image.cropX(20); */ @@ -11433,10 +11433,10 @@ var Kinetic = {}; * @param {Number} y * @returns {Number} * @example - * // get crop y
- * var cropY = image.cropY();

+ * // get crop y + * var cropY = image.cropY(); * - * // set crop y
+ * // set crop y * image.cropY(20); */ @@ -11449,10 +11449,10 @@ var Kinetic = {}; * @param {Number} width * @returns {Number} * @example - * // get crop width
- * var cropWidth = image.cropWidth();

+ * // get crop width + * var cropWidth = image.cropWidth(); * - * // set crop width
+ * // set crop width * image.cropWidth(20); */ @@ -11465,10 +11465,10 @@ var Kinetic = {}; * @param {Number} height * @returns {Number} * @example - * // get crop height
- * var cropHeight = image.cropHeight();

+ * // get crop height + * var cropHeight = image.cropHeight(); * - * // set crop height
+ * // set crop height * image.cropHeight(20); */ @@ -11598,13 +11598,13 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var text = new Kinetic.Text({
- * x: 10,
- * y: 15,
- * text: 'Simple Text',
- * fontSize: 30,
- * fontFamily: 'Calibri',
- * fill: 'green'
+ * var text = new Kinetic.Text({ + * x: 10, + * y: 15, + * text: 'Simple Text', + * fontSize: 30, + * fontFamily: 'Calibri', + * fill: 'green' * }); */ Kinetic.Text = function(config) { @@ -11878,10 +11878,10 @@ var Kinetic = {}; * @param {String} fontFamily * @returns {String} * @example - * // get font family
- * var fontFamily = text.fontFamily();


+ * // get font family + * var fontFamily = text.fontFamily(); * - * // set font family
+ * // set font family * text.fontFamily('Arial'); */ @@ -11895,10 +11895,10 @@ var Kinetic = {}; * @param {Number} fontSize * @returns {Number} * @example - * // get font size
- * var fontSize = text.fontSize();

+ * // get font size + * var fontSize = text.fontSize(); * - * // set font size to 22px
+ * // set font size to 22px * text.fontSize(22); */ @@ -11912,10 +11912,10 @@ var Kinetic = {}; * @param {String} fontStyle * @returns {String} * @example - * // get font style
- * var fontStyle = text.fontStyle();

+ * // get font style + * var fontStyle = text.fontStyle(); * - * // set font style
+ * // set font style * text.fontStyle('bold'); */ @@ -11929,10 +11929,10 @@ var Kinetic = {}; * @param {String} fontVariant * @returns {String} * @example - * // get font variant
- * var fontVariant = text.fontVariant();

+ * // get font variant + * var fontVariant = text.fontVariant(); * - * // set font variant
+ * // set font variant * text.fontVariant('small-caps'); */ @@ -11946,10 +11946,10 @@ var Kinetic = {}; * @param {Number} padding * @returns {Number} * @example - * // get padding
- * var padding = text.padding();

+ * // get padding + * var padding = text.padding(); * - * // set padding to 10 pixels
+ * // set padding to 10 pixels * text.padding(10); */ @@ -11963,13 +11963,13 @@ var Kinetic = {}; * @param {String} align * @returns {String} * @example - * // get text align
- * var align = text.align();

+ * // get text align + * var align = text.align(); * - * // center text
- * text.align('center');

+ * // center text + * text.align('center'); * - * // align text to right
+ * // align text to right * text.align('right'); */ @@ -11983,10 +11983,10 @@ var Kinetic = {}; * @param {Number} lineHeight * @returns {Number} * @example - * // get line height
- * var lineHeight = text.lineHeight();


+ * // get line height + * var lineHeight = text.lineHeight(); * - * // set the line height
+ * // set the line height * text.lineHeight(2); */ @@ -12000,10 +12000,10 @@ var Kinetic = {}; * @param {String} wrap * @returns {String} * @example - * // get wrap
- * var wrap = text.wrap();

+ * // get wrap + * var wrap = text.wrap(); * - * // set wrap
+ * // set wrap * text.wrap('word'); */ @@ -12018,10 +12018,10 @@ var Kinetic = {}; * @param {String} text * @returns {String} * @example - * // get text
- * var text = text.text();

+ * // get text + * var text = text.text(); * - * // set text
+ * // set text * text.text('Hello world!'); */ @@ -12120,12 +12120,12 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var line = new Kinetic.Line({
- * x: 100,
- * y: 50,
- * points: [73, 70, 340, 23, 450, 60, 500, 20],
- * stroke: 'red',
- * tension: 1
+ * var line = new Kinetic.Line({ + * x: 100, + * y: 50, + * points: [73, 70, 340, 23, 450, 60, 500, 20], + * stroke: 'red', + * tension: 1 * }); */ Kinetic.Line = function(config) { @@ -12258,13 +12258,13 @@ var Kinetic = {}; * @param {Boolean} closed * @returns {Boolean} * @example - * // get closed flag
- * var closed = line.closed();

+ * // get closed flag + * var closed = line.closed(); * - * // close the shape
- * line.closed(true);

+ * // close the shape + * line.closed(true); * - * // open the shape
+ * // open the shape * line.closed(false); */ @@ -12279,10 +12279,10 @@ var Kinetic = {}; * The default is 0 * @returns {Number} * @example - * // get tension
- * var tension = line.tension();

+ * // get tension + * var tension = line.tension(); * - * // set tension
+ * // set tension * line.tension(3); */ @@ -12295,13 +12295,13 @@ var Kinetic = {}; * @param {Array} points * @returns {Array} * @example - * // get points
- * var points = line.points();

+ * // get points + * var points = line.points(); * - * // set points
- * line.points([10, 20, 30, 40, 50, 60]);

+ * // set points + * line.points([10, 20, 30, 40, 50, 60]); * - * // push a new point
+ * // push a new point * line.points(line.points().concat([70, 80])); */ @@ -12398,37 +12398,37 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var imageObj = new Image();
- * imageObj.onload = function() {
- * var sprite = new Kinetic.Sprite({
- * x: 200,
- * y: 100,
- * image: imageObj,
- * animation: 'standing',
- * animations: {
- * standing: [
- * // x, y, width, height (6 frames)
- * 0, 0, 49, 109,
- * 52, 0, 49, 109,
- * 105, 0, 49, 109,
- * 158, 0, 49, 109,
- * 210, 0, 49, 109,
- * 262, 0, 49, 109
- * ],
- * kicking: [
- * // x, y, width, height (6 frames)
- * 0, 109, 45, 98,
- * 45, 109, 45, 98,
- * 95, 109, 63, 98,
- * 156, 109, 70, 98,
- * 229, 109, 60, 98,
- * 287, 109, 41, 98
- * ]
- * },
- * frameRate: 7,
- * frameIndex: 0
- * });
- * };
+ * var imageObj = new Image(); + * imageObj.onload = function() { + * var sprite = new Kinetic.Sprite({ + * x: 200, + * y: 100, + * image: imageObj, + * animation: 'standing', + * animations: { + * standing: [ + * // x, y, width, height (6 frames) + * 0, 0, 49, 109, + * 52, 0, 49, 109, + * 105, 0, 49, 109, + * 158, 0, 49, 109, + * 210, 0, 49, 109, + * 262, 0, 49, 109 + * ], + * kicking: [ + * // x, y, width, height (6 frames) + * 0, 109, 45, 98, + * 45, 109, 45, 98, + * 95, 109, 63, 98, + * 156, 109, 70, 98, + * 229, 109, 60, 98, + * 287, 109, 41, 98 + * ] + * }, + * frameRate: 7, + * frameIndex: 0 + * }); + * }; * imageObj.src = '/path/to/image.jpg' */ Kinetic.Sprite = function(config) { @@ -12559,10 +12559,10 @@ var Kinetic = {}; * @param {String} anim animation key * @returns {String} * @example - * // get animation key
- * var animation = sprite.animation();

+ * // get animation key + * var animation = sprite.animation(); * - * // set animation key
+ * // set animation key * sprite.animation('kicking'); */ @@ -12576,29 +12576,29 @@ var Kinetic = {}; * @param {Object} animations * @returns {Object} * @example - * // get animations map
- * var animations = sprite.animations();

+ * // get animations map + * var animations = sprite.animations(); * - * // set animations map
- * sprite.animations({
- * standing: [
- * // x, y, width, height (6 frames)
- * 0, 0, 49, 109,
- * 52, 0, 49, 109,
- * 105, 0, 49, 109,
- * 158, 0, 49, 109,
- * 210, 0, 49, 109,
- * 262, 0, 49, 109
- * ],
- * kicking: [
- * // x, y, width, height (6 frames)
- * 0, 109, 45, 98,
- * 45, 109, 45, 98,
- * 95, 109, 63, 98,
- * 156, 109, 70, 98,
- * 229, 109, 60, 98,
- * 287, 109, 41, 98
- * ]
+ * // set animations map + * sprite.animations({ + * standing: [ + * // x, y, width, height (6 frames) + * 0, 0, 49, 109, + * 52, 0, 49, 109, + * 105, 0, 49, 109, + * 158, 0, 49, 109, + * 210, 0, 49, 109, + * 262, 0, 49, 109 + * ], + * kicking: [ + * // x, y, width, height (6 frames) + * 0, 109, 45, 98, + * 45, 109, 45, 98, + * 95, 109, 63, 98, + * 156, 109, 70, 98, + * 229, 109, 60, 98, + * 287, 109, 41, 98 + * ] * }); */ @@ -12613,9 +12613,9 @@ var Kinetic = {}; * @returns {Image} * @example * // get image - * var image = sprite.image();

+ * var image = sprite.image(); * - * // set image
+ * // set image * sprite.image(imageObj); */ @@ -12629,10 +12629,10 @@ var Kinetic = {}; * @param {Integer} frameIndex * @returns {Integer} * @example - * // get animation frame index
- * var frameIndex = sprite.frameIndex();

+ * // get animation frame index + * var frameIndex = sprite.frameIndex(); * - * // set animation frame index
+ * // set animation frame index * sprite.frameIndex(3); */ @@ -12648,10 +12648,10 @@ var Kinetic = {}; * @param {Integer} frameRate * @returns {Integer} * @example - * // get frame rate
- * var frameRate = sprite.frameRate();

+ * // get frame rate + * var frameRate = sprite.frameRate(); * - * // set frame rate to 2 frames per second
+ * // set frame rate to 2 frames per second * sprite.frameRate(2); */ @@ -12753,12 +12753,12 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var path = new Kinetic.Path({
- * x: 240,
- * y: 40,
- * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
- * fill: 'green',
- * scale: 2
+ * var path = new Kinetic.Path({ + * x: 240, + * y: 40, + * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z', + * fill: 'green', + * scale: 2 * }); */ Kinetic.Path = function (config) { @@ -13464,14 +13464,14 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var textpath = new Kinetic.TextPath({
- * x: 100,
- * y: 50,
- * fill: '#333',
- * fontSize: '24',
- * fontFamily: 'Arial',
- * text: 'All the world\'s a stage, and all the men and women merely players.',
- * data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
+ * var textpath = new Kinetic.TextPath({ + * x: 100, + * y: 50, + * fill: '#333', + * fontSize: '24', + * fontFamily: 'Arial', + * text: 'All the world\'s a stage, and all the men and women merely players.', + * data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50' * }); */ Kinetic.TextPath = function(config) { @@ -13944,14 +13944,14 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var hexagon = new Kinetic.RegularPolygon({
- * x: 100,
- * y: 200,
- * sides: 6,
- * radius: 70,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 4
+ * var hexagon = new Kinetic.RegularPolygon({ + * x: 100, + * y: 200, + * sides: 6, + * radius: 70, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 4 * }); */ Kinetic.RegularPolygon = function(config) { @@ -14112,15 +14112,15 @@ var Kinetic = {}; * @param {Number} [config.dragDistance] * @param {Function} [config.dragBoundFunc] * @example - * var star = new Kinetic.Star({
- * x: 100,
- * y: 200,
- * numPoints: 5,
- * innerRadius: 70,
- * outerRadius: 70,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 4
+ * var star = new Kinetic.Star({ + * x: 100, + * y: 200, + * numPoints: 5, + * innerRadius: 70, + * outerRadius: 70, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 4 * }); */ Kinetic.Star = function(config) { @@ -14250,34 +14250,34 @@ var Kinetic = {}; * @param {Function} [config.dragBoundFunc] * @example * // create label - * var label = new Kinetic.Label({
- * x: 100,
- * y: 100,
- * draggable: true
- * });

+ * var label = new Kinetic.Label({ + * x: 100, + * y: 100, + * draggable: true + * }); * - * // add a tag to the label
- * label.add(new Kinetic.Tag({
- * fill: '#bbb',
- * stroke: '#333',
- * shadowColor: 'black',
- * shadowBlur: 10,
- * shadowOffset: [10, 10],
- * shadowOpacity: 0.2,
- * lineJoin: 'round',
- * pointerDirection: 'up',
- * pointerWidth: 20,
- * pointerHeight: 20,
- * cornerRadius: 5
- * }));

+ * // add a tag to the label + * label.add(new Kinetic.Tag({ + * fill: '#bbb', + * stroke: '#333', + * shadowColor: 'black', + * shadowBlur: 10, + * shadowOffset: [10, 10], + * shadowOpacity: 0.2, + * lineJoin: 'round', + * pointerDirection: 'up', + * pointerWidth: 20, + * pointerHeight: 20, + * cornerRadius: 5 + * })); * - * // add text to the label
- * label.add(new Kinetic.Text({
- * text: 'Hello World!',
- * fontSize: 50,
- * lineHeight: 1.2,
- * padding: 10,
- * fill: 'green'
+ * // add text to the label + * label.add(new Kinetic.Text({ + * text: 'Hello World!', + * fontSize: 50, + * lineHeight: 1.2, + * padding: 10, + * fill: 'green' * })); */ Kinetic.Label = function(config) { diff --git a/kinetic.min.js b/kinetic.min.js index 21dc7a38..8a17e06b 100644 --- a/kinetic.min.js +++ b/kinetic.min.js @@ -1,4 +1,4 @@ -/*! KineticJS v5.1.0 2014-03-27 http://www.kineticjs.com by Eric Rowell @ericdrowell - MIT License https://github.com/ericdrowell/KineticJS/wiki/License*/ +/*! KineticJS v5.1.0 2014-04-03 http://www.kineticjs.com by Eric Rowell @ericdrowell - MIT License https://github.com/ericdrowell/KineticJS/wiki/License*/ var Kinetic={};!function(a){var b=Math.PI/180;Kinetic={version:"5.1.0",stages:[],idCounter:0,ids:{},names:{},shapes:{},listenClickTap:!1,inDblClickWindow:!1,enableTrace:!1,traceArrMax:100,dblClickWindow:400,pixelRatio:void 0,dragDistance:0,angleDeg:!0,UA:function(){var b=a.navigator&&a.navigator.userAgent||"",c=b.toLowerCase(),d=/(chrome)[ \/]([\w.]+)/.exec(c)||/(webkit)[ \/]([\w.]+)/.exec(c)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(c)||/(msie) ([\w.]+)/.exec(c)||c.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(c)||[],e=!!b.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i);return{browser:d[1]||"",version:d[2]||"0",mobile:e}}(),Filters:{},Node:function(a){this._init(a)},Shape:function(a){this.__init(a)},Container:function(a){this.__init(a)},Stage:function(a){this.___init(a)},BaseLayer:function(a){this.___init(a)},Layer:function(a){this.____init(a)},FastLayer:function(a){this.____init(a)},Group:function(a){this.___init(a)},isDragging:function(){var a=Kinetic.DD;return a?a.isDragging:!1},isDragReady:function(){var a=Kinetic.DD;return a?!!a.node:!1},_addId:function(a,b){void 0!==b&&(this.ids[b]=a)},_removeId:function(a){void 0!==a&&delete this.ids[a]},_addName:function(a,b){void 0!==b&&(void 0===this.names[b]&&(this.names[b]=[]),this.names[b].push(a))},_removeName:function(a,b){if(void 0!==a){var c=this.names[a];if(void 0!==c){for(var d=0;d"),f=b();return Kinetic.document=e,Kinetic.window=Kinetic.document.createWindow(),Kinetic.window.Image=c.Image,Kinetic.root=a,Kinetic._nodeCanvas=c,void(module.exports=f)}"function"==typeof define&&define.amd&&define(b),Kinetic.document=document,Kinetic.window=window,Kinetic.root=a}((1,eval)("this"),function(){return Kinetic}),function(){Kinetic.Collection=function(){var a=[].slice.call(arguments),b=a.length,c=0;for(this.length=b;b>c;c++)this[c]=a[c];return this},Kinetic.Collection.prototype=[],Kinetic.Collection.prototype.each=function(a){for(var b=0;ba;a++)b.push(this[a]);return b},Kinetic.Collection.toCollection=function(a){var b,c=new Kinetic.Collection,d=a.length;for(b=0;d>b;b++)c.push(a[b]);return c},Kinetic.Collection._mapMethod=function(a){Kinetic.Collection.prototype[a]=function(){var b,c=this.length,d=[].slice.call(arguments);for(b=0;c>b;b++)this[b][a].apply(this[b],d);return this}},Kinetic.Collection.mapMethods=function(a){var b=a.prototype;for(var c in b)Kinetic.Collection._mapMethod(c)},Kinetic.Transform=function(a){this.m=a&&a.slice()||[1,0,0,1,0,0]},Kinetic.Transform.prototype={copy:function(){return new Kinetic.Transform(this.m)},point:function(a){var b=this.m;return{x:b[0]*a.x+b[2]*a.y+b[4],y:b[1]*a.x+b[3]*a.y+b[5]}},translate:function(a,b){return this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b,this},scale:function(a,b){return this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b,this},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;return this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g,this},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},skew:function(a,b){var c=this.m[0]+this.m[2]*b,d=this.m[1]+this.m[3]*b,e=this.m[2]+this.m[0]*a,f=this.m[3]+this.m[1]*a;return this.m[0]=c,this.m[1]=d,this.m[2]=e,this.m[3]=f,this},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this.m[3]*a.m[3],f=this.m[0]*a.m[4]+this.m[2]*a.m[5]+this.m[4],g=this.m[1]*a.m[4]+this.m[3]*a.m[5]+this.m[5];return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},invert:function(){var a=1/(this.m[0]*this.m[3]-this.m[1]*this.m[2]),b=this.m[3]*a,c=-this.m[1]*a,d=-this.m[2]*a,e=this.m[0]*a,f=a*(this.m[2]*this.m[5]-this.m[3]*this.m[4]),g=a*(this.m[1]*this.m[4]-this.m[0]*this.m[5]);return this.m[0]=b,this.m[1]=c,this.m[2]=d,this.m[3]=e,this.m[4]=f,this.m[5]=g,this},getMatrix:function(){return this.m},setAbsolutePosition:function(a,b){var c=this.m[0],d=this.m[1],e=this.m[2],f=this.m[3],g=this.m[4],h=this.m[5],i=(c*(b-h)-d*(a-g))/(c*f-d*e),j=(a-g-e*i)/c;return this.translate(j,i)}};var a="2d",b="[object Array]",c="[object Number]",d="[object String]",e=Math.PI/180,f=180/Math.PI,g="#",h="",i="0",j="Kinetic warning: ",k="Kinetic error: ",l="rgb(",m={aqua:[0,255,255],lime:[0,255,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,255],navy:[0,0,128],white:[255,255,255],fuchsia:[255,0,255],olive:[128,128,0],yellow:[255,255,0],orange:[255,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[255,0,0],pink:[255,192,203],cyan:[0,255,255],transparent:[255,255,255,0]},n=/rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;Kinetic.Util={_isElement:function(a){return!(!a||1!=a.nodeType)},_isFunction:function(a){return!!(a&&a.constructor&&a.call&&a.apply)},_isObject:function(a){return!!a&&a.constructor==Object},_isArray:function(a){return Object.prototype.toString.call(a)==b},_isNumber:function(a){return Object.prototype.toString.call(a)==c},_isString:function(a){return Object.prototype.toString.call(a)==d},_throttle:function(a,b,c){var d,e,f,g=null,h=0;c||(c={});var i=function(){h=c.leading===!1?0:(new Date).getTime(),g=null,f=a.apply(d,e),d=e=null};return function(){var j=(new Date).getTime();h||c.leading!==!1||(h=j);var k=b-(j-h);return d=this,e=arguments,0>=k?(clearTimeout(g),g=null,h=j,f=a.apply(d,e),d=e=null):g||c.trailing===!1||(g=setTimeout(i,k)),f}},_hasMethods:function(a){var b,c=[];for(b in a)this._isFunction(a[b])&&c.push(b);return c.length>0},createCanvasElement:function(){var a=Kinetic.document.createElement("canvas");return a.style=a.style||{},a},isBrowser:function(){return"object"!=typeof exports},_isInDocument:function(a){for(;a=a.parentNode;)if(a==Kinetic.document)return!0;return!1},_simplifyArray:function(a){var b,c,d=[],e=a.length,f=Kinetic.Util;for(b=0;e>b;b++)c=a[b],f._isNumber(c)?c=Math.round(1e3*c)/1e3:f._isString(c)||(c=c.toString()),d.push(c);return d},_getImage:function(b,c){var d,e;if(b)if(this._isElement(b))c(b);else if(this._isString(b))d=new Kinetic.window.Image,d.onload=function(){c(d)},d.src=b;else if(b.data){e=Kinetic.Util.createCanvasElement(),e.width=b.width,e.height=b.height;var f=e.getContext(a);f.putImageData(b,0,0),this._getImage(e.toDataURL(),c)}else c(null);else c(null)},_getRGBAString:function(a){var b=a.red||0,c=a.green||0,d=a.blue||0,e=a.alpha||1;return["rgba(",b,",",c,",",d,",",e,")"].join(h)},_rgbToHex:function(a,b,c){return((1<<24)+(a<<16)+(b<<8)+c).toString(16).slice(1)},_hexToRgb:function(a){a=a.replace(g,h);var b=parseInt(a,16);return{r:b>>16&255,g:b>>8&255,b:255&b}},getRandomColor:function(){for(var a=(16777215*Math.random()<<0).toString(16);a.length<6;)a=i+a;return g+a},get:function(a,b){return void 0===a?b:a},getRGB:function(a){var b;return a in m?(b=m[a],{r:b[0],g:b[1],b:b[2]}):a[0]===g?this._hexToRgb(a.substring(1)):a.substr(0,4)===l?(b=n.exec(a.replace(/ /g,"")),{r:parseInt(b[1],10),g:parseInt(b[2],10),b:parseInt(b[3],10)}):{r:0,g:0,b:0}},_merge:function(a,b){var c=this._clone(b);for(var d in a)c[d]=this._isObject(a[d])?this._merge(a[d],c[d]):a[d];return c},cloneObject:function(a){var b={};for(var c in a)b[c]=this._isObject(a[c])?this.cloneObject(a[c]):this._isArray(a[c])?this.cloneArray(a[c]):a[c];return b},cloneArray:function(a){return a.slice(0)},_degToRad:function(a){return a*e},_radToDeg:function(a){return a*f},_capitalize:function(a){return a.charAt(0).toUpperCase()+a.slice(1)},error:function(a){throw new Error(k+a)},warn:function(a){Kinetic.root.console&&console.warn&&console.warn(j+a)},extend:function(a,b){for(var c in b.prototype)c in a.prototype||(a.prototype[c]=b.prototype[c])},addMethods:function(a,b){var c;for(c in b)a.prototype[c]=b[c]},_getControlPoints:function(a,b,c,d,e,f,g){var h=Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2)),i=Math.sqrt(Math.pow(e-c,2)+Math.pow(f-d,2)),j=g*h/(h+i),k=g*i/(h+i),l=c-j*(e-a),m=d-j*(f-b),n=c+k*(e-a),o=d+k*(f-b);return[l,m,n,o]},_expandPoints:function(a,b){var c,d,e=a.length,f=[];for(c=2;e-2>c;c+=2)d=Kinetic.Util._getControlPoints(a[c-2],a[c-1],a[c],a[c+1],a[c+2],a[c+3],b),f.push(d[0]),f.push(d[1]),f.push(a[c]),f.push(a[c+1]),f.push(d[2]),f.push(d[3]);return f},_removeLastLetter:function(a){return a.substring(0,a.length-1)}}}(),function(){var a=Kinetic.Util.createCanvasElement(),b=a.getContext("2d"),c=Kinetic.UA.mobile?function(){var a=window.devicePixelRatio||1,c=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1;return a/c}():1;Kinetic.Canvas=function(a){this.init(a)},Kinetic.Canvas.prototype={init:function(a){a=a||{};var b=a.pixelRatio||Kinetic.pixelRatio||c;this.pixelRatio=b,this._canvas=Kinetic.Util.createCanvasElement(),this._canvas.style.padding=0,this._canvas.style.margin=0,this._canvas.style.border=0,this._canvas.style.background="transparent",this._canvas.style.position="absolute",this._canvas.style.top=0,this._canvas.style.left=0},getContext:function(){return this.context},getPixelRatio:function(){return this.pixelRatio},setPixelRatio:function(a){this.pixelRatio=a,this.setSize(this.getWidth(),this.getHeight())},setWidth:function(a){this.width=this._canvas.width=a*this.pixelRatio,this._canvas.style.width=a+"px"},setHeight:function(a){this.height=this._canvas.height=a*this.pixelRatio,this._canvas.style.height=a+"px"},getWidth:function(){return this.width},getHeight:function(){return this.height},setSize:function(a,b){this.setWidth(a),this.setHeight(b)},toDataURL:function(a,b){try{return this._canvas.toDataURL(a,b)}catch(c){try{return this._canvas.toDataURL()}catch(d){return Kinetic.Util.warn("Unable to get data URL. "+d.message),""}}}},Kinetic.SceneCanvas=function(a){a=a||{};var b=a.width||0,c=a.height||0;Kinetic.Canvas.call(this,a),this.context=new Kinetic.SceneContext(this),this.setSize(b,c)},Kinetic.SceneCanvas.prototype={setWidth:function(a){var b=this.pixelRatio,c=this.getContext()._context;Kinetic.Canvas.prototype.setWidth.call(this,a),c.scale(b,b)},setHeight:function(a){var b=this.pixelRatio,c=this.getContext()._context;Kinetic.Canvas.prototype.setHeight.call(this,a),c.scale(b,b)}},Kinetic.Util.extend(Kinetic.SceneCanvas,Kinetic.Canvas),Kinetic.HitCanvas=function(a){a=a||{};var b=a.width||0,c=a.height||0;Kinetic.Canvas.call(this,a),this.context=new Kinetic.HitContext(this),this.setSize(b,c)},Kinetic.Util.extend(Kinetic.HitCanvas,Kinetic.Canvas)}(),function(){var a=",",b="(",c=")",d="([",e="])",f=";",g="()",h="=",i=["arc","arcTo","beginPath","bezierCurveTo","clearRect","clip","closePath","createLinearGradient","createPattern","createRadialGradient","drawImage","fill","fillText","getImageData","createImageData","lineTo","moveTo","putImageData","quadraticCurveTo","rect","restore","rotate","save","scale","setLineDash","setTransform","stroke","strokeText","transform","translate"];Kinetic.Context=function(a){this.init(a)},Kinetic.Context.prototype={init:function(a){this.canvas=a,this._context=a._canvas.getContext("2d"),Kinetic.enableTrace&&(this.traceArr=[],this._enableTrace())},fillShape:function(a){a.getFillEnabled()&&this._fill(a)},strokeShape:function(a){a.getStrokeEnabled()&&this._stroke(a)},fillStrokeShape:function(a){var b=a.getFillEnabled();b&&this._fill(a),a.getStrokeEnabled()&&this._stroke(a)},getTrace:function(i){var j,k,l,m,n=this.traceArr,o=n.length,p="";for(j=0;o>j;j++)k=n[j],l=k.method,l?(m=k.args,p+=l,p+=i?g:Kinetic.Util._isArray(m[0])?d+m.join(a)+e:b+m.join(a)+c):(p+=k.property,i||(p+=h+k.val)),p+=f;return p},clearTrace:function(){this.traceArr=[]},_trace:function(a){var b,c=this.traceArr;c.push(a),b=c.length,b>=Kinetic.traceArrMax&&c.shift()},reset:function(){var a=this.getCanvas().getPixelRatio();this.setTransform(1*a,0,0,1*a,0,0)},getCanvas:function(){return this.canvas},clear:function(a){var b=this.getCanvas();a?this.clearRect(a.x||0,a.y||0,a.width||0,a.height||0):this.clearRect(0,0,b.getWidth(),b.getHeight())},_applyLineCap:function(a){var b=a.getLineCap();b&&this.setAttr("lineCap",b)},_applyOpacity:function(a){var b=a.getAbsoluteOpacity();1!==b&&this.setAttr("globalAlpha",b)},_applyLineJoin:function(a){var b=a.getLineJoin();b&&this.setAttr("lineJoin",b)},setAttr:function(a,b){this._context[a]=b},arc:function(){var a=arguments;this._context.arc(a[0],a[1],a[2],a[3],a[4],a[5])},beginPath:function(){this._context.beginPath()},bezierCurveTo:function(){var a=arguments;this._context.bezierCurveTo(a[0],a[1],a[2],a[3],a[4],a[5])},clearRect:function(){var a=arguments;this._context.clearRect(a[0],a[1],a[2],a[3])},clip:function(){this._context.clip()},closePath:function(){this._context.closePath()},createImageData:function(){var a=arguments;return 2===a.length?this._context.createImageData(a[0],a[1]):1===a.length?this._context.createImageData(a[0]):void 0},createLinearGradient:function(){var a=arguments;return this._context.createLinearGradient(a[0],a[1],a[2],a[3])},createPattern:function(){var a=arguments;return this._context.createPattern(a[0],a[1])},createRadialGradient:function(){var a=arguments;return this._context.createRadialGradient(a[0],a[1],a[2],a[3],a[4],a[5])},drawImage:function(){var a=arguments,b=this._context;3===a.length?b.drawImage(a[0],a[1],a[2]):5===a.length?b.drawImage(a[0],a[1],a[2],a[3],a[4]):9===a.length&&b.drawImage(a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8])},fill:function(){this._context.fill()},fillText:function(){var a=arguments;this._context.fillText(a[0],a[1],a[2])},getImageData:function(){var a=arguments;return this._context.getImageData(a[0],a[1],a[2],a[3])},lineTo:function(){var a=arguments;this._context.lineTo(a[0],a[1])},moveTo:function(){var a=arguments;this._context.moveTo(a[0],a[1])},rect:function(){var a=arguments;this._context.rect(a[0],a[1],a[2],a[3])},putImageData:function(){var a=arguments;this._context.putImageData(a[0],a[1],a[2])},quadraticCurveTo:function(){var a=arguments;this._context.quadraticCurveTo(a[0],a[1],a[2],a[3])},restore:function(){this._context.restore()},rotate:function(){var a=arguments;this._context.rotate(a[0])},save:function(){this._context.save()},scale:function(){var a=arguments;this._context.scale(a[0],a[1])},setLineDash:function(){var a=arguments,b=this._context;this._context.setLineDash?b.setLineDash(a[0]):"mozDash"in b?b.mozDash=a[0]:"webkitLineDash"in b&&(b.webkitLineDash=a[0])},setTransform:function(){var a=arguments;this._context.setTransform(a[0],a[1],a[2],a[3],a[4],a[5])},stroke:function(){this._context.stroke()},strokeText:function(){var a=arguments;this._context.strokeText(a[0],a[1],a[2])},transform:function(){var a=arguments;this._context.transform(a[0],a[1],a[2],a[3],a[4],a[5])},translate:function(){var a=arguments;this._context.translate(a[0],a[1])},_enableTrace:function(){var a,b,c=this,d=i.length,e=Kinetic.Util._simplifyArray,f=this.setAttr,g=function(a){var d,f=c[a];c[a]=function(){return b=e(Array.prototype.slice.call(arguments,0)),d=f.apply(c,arguments),c._trace({method:a,args:b}),d}};for(a=0;d>a;a++)g(i[a]);c.setAttr=function(){f.apply(c,arguments),c._trace({property:arguments[0],val:arguments[1]})}}},Kinetic.SceneContext=function(a){Kinetic.Context.call(this,a)},Kinetic.SceneContext.prototype={_fillColor:function(a){var b=a.fill()||Kinetic.Util._getRGBAString({red:a.fillRed(),green:a.fillGreen(),blue:a.fillBlue(),alpha:a.fillAlpha()});this.setAttr("fillStyle",b),a._fillFunc(this)},_fillPattern:function(a){var b=a.getFillPatternImage(),c=a.getFillPatternX(),d=a.getFillPatternY(),e=a.getFillPatternScale(),f=Kinetic.getAngle(a.getFillPatternRotation()),g=a.getFillPatternOffset(),h=a.getFillPatternRepeat();(c||d)&&this.translate(c||0,d||0),f&&this.rotate(f),e&&this.scale(e.x,e.y),g&&this.translate(-1*g.x,-1*g.y),this.setAttr("fillStyle",this.createPattern(b,h||"repeat")),this.fill()},_fillLinearGradient:function(a){var b=a.getFillLinearGradientStartPoint(),c=a.getFillLinearGradientEndPoint(),d=a.getFillLinearGradientColorStops(),e=this.createLinearGradient(b.x,b.y,c.x,c.y);if(d){for(var f=0;fh;h++)i=e[h],a[i]=this.getAttr(d+k(i));return a},c.prototype[m]=function(a){var b,c=this.attrs[d];f&&(a=f.call(this,a));for(b in a)this._setAttr(d+k(b),a[b]);return this._fireChangeEvent(d,c,a),g&&g.call(this),this},this.addOverloadedGetterSetter(c,d)},addOverloadedGetterSetter:function(c,d){var e=Kinetic.Util._capitalize(d),f=b+e,g=a+e;c.prototype[d]=function(){return arguments.length?(this[f](arguments[0]),this):this[g]()}},backCompat:function(a,b){var c;for(c in b)a.prototype[c]=a.prototype[b[c]]},afterSetFilter:function(){this._filterUpToDate=!1}},Kinetic.Validators={RGBComponent:function(a){return a>255?255:0>a?0:Math.round(a)},alphaComponent:function(a){return a>1?1:1e-4>a?1e-4:a}}}(),function(){var a="absoluteOpacity",b="absoluteTransform",c="Change",d="children",e=".",f="",g="get",h="id",i="kinetic",j="listening",k="mouseenter",l="mouseleave",m="name",n="set",o="Shape",p=" ",q="stage",r="transform",s="Stage",t="visible",u=["id"],v=["xChange.kinetic","yChange.kinetic","scaleXChange.kinetic","scaleYChange.kinetic","skewXChange.kinetic","skewYChange.kinetic","rotationChange.kinetic","offsetXChange.kinetic","offsetYChange.kinetic","transformsEnabledChange.kinetic"].join(p);Kinetic.Util.addMethods(Kinetic.Node,{_init:function(c){var d=this;this._id=Kinetic.idCounter++,this.eventListeners={},this.attrs={},this._cache={},this._filterUpToDate=!1,this.setAttrs(c),this.on(v,function(){this._clearCache(r),d._clearSelfAndDescendantCache(b)}),this.on("visibleChange.kinetic",function(){d._clearSelfAndDescendantCache(t)}),this.on("listeningChange.kinetic",function(){d._clearSelfAndDescendantCache(j)}),this.on("opacityChange.kinetic",function(){d._clearSelfAndDescendantCache(a)})},_clearCache:function(a){a?delete this._cache[a]:this._cache={}},_getCache:function(a,b){var c=this._cache[a];return void 0===c&&(this._cache[a]=b.call(this)),this._cache[a]},_clearSelfAndDescendantCache:function(a){this._clearCache(a),this.children&&this.getChildren().each(function(b){b._clearSelfAndDescendantCache(a)})},clearCache:function(){return delete this._cache.canvas,this._filterUpToDate=!1,this},cache:function(a){{var b=a||{},c=b.x||0,d=b.y||0,e=b.width||this.width(),f=b.height||this.height(),g=b.drawBorder||!1;this.getLayer()}if(0===e||0===f)return void Kinetic.Util.warn("Width or height of caching configuration equals 0. Cache is ignored.");var h=new Kinetic.SceneCanvas({pixelRatio:1,width:e,height:f}),i=new Kinetic.SceneCanvas({pixelRatio:1,width:e,height:f}),j=new Kinetic.HitCanvas({width:e,height:f}),k=(this.transformsEnabled(),this.x(),this.y(),h.getContext()),l=j.getContext();return this.clearCache(),k.save(),l.save(),g&&(k.save(),k.beginPath(),k.rect(0,0,e,f),k.closePath(),k.setAttr("strokeStyle","red"),k.setAttr("lineWidth",5),k.stroke(),k.restore()),k.translate(-1*c,-1*d),l.translate(-1*c,-1*d),"Shape"===this.nodeType&&(k.translate(-1*this.x(),-1*this.y()),l.translate(-1*this.x(),-1*this.y())),this.drawScene(h,this),this.drawHit(j,this),k.restore(),l.restore(),this._cache.canvas={scene:h,filter:i,hit:j},this},_drawCachedSceneCanvas:function(a){a.save(),this.getLayer()._applyTransform(this,a),a.drawImage(this._getCachedSceneCanvas()._canvas,0,0),a.restore()},_getCachedSceneCanvas:function(){var a,b,c,d,e=this.filters(),f=this._cache.canvas,g=f.scene,h=f.filter,i=h.getContext();if(e){if(!this._filterUpToDate){try{for(a=e.length,i.clear(),i.drawImage(g._canvas,0,0),b=i.getImageData(0,0,h.getWidth(),h.getHeight()),c=0;a>c;c++)d=e[c],d.call(this,b),i.putImageData(b,0,0)}catch(j){Kinetic.Util.warn("Unable to apply filter. "+j.message)}this._filterUpToDate=!0}return h}return g},_drawCachedHitCanvas:function(a){var b=this._cache.canvas,c=b.hit;a.save(),this.getLayer()._applyTransform(this,a),a.drawImage(c._canvas,0,0),a.restore()},on:function(a,b){var c,d,g,h,i,j=a.split(p),k=j.length;for(c=0;k>c;c++)d=j[c],g=d.split(e),h=g[0],i=g[1]||f,this.eventListeners[h]||(this.eventListeners[h]=[]),this.eventListeners[h].push({name:i,handler:b});return this},off:function(a){var b,c,d,f,g,h,i=a.split(p),j=i.length;for(b=0;j>b;b++)if(d=i[b],f=d.split(e),g=f[0],h=f[1],g)this.eventListeners[g]&&this._off(g,h);else for(c in this.eventListeners)this._off(c,h);return this},dispatchEvent:function(a){var b={target:this,type:a.type,evt:a};this.fire(a.type,b)},addEventListener:function(a,b){this.on(a,function(a){b.call(this,a.evt)})},remove:function(){var c=this.getParent();return c&&c.children&&(c.children.splice(this.index,1),c._setChildrenIndices(),delete this.parent),this._clearSelfAndDescendantCache(q),this._clearSelfAndDescendantCache(b),this._clearSelfAndDescendantCache(t),this._clearSelfAndDescendantCache(j),this._clearSelfAndDescendantCache(a),this},destroy:function(){Kinetic._removeId(this.getId()),Kinetic._removeName(this.getName(),this._id),this.remove()},getAttr:function(a){var b=g+Kinetic.Util._capitalize(a);return Kinetic.Util._isFunction(this[b])?this[b]():this.attrs[a]},getAncestors:function(){for(var a=this.getParent(),b=new Kinetic.Collection;a;)b.push(a),a=a.getParent();return b},getAttrs:function(){return this.attrs||{}},setAttrs:function(a){var b,c;if(a)for(b in a)b===d||(c=n+Kinetic.Util._capitalize(b),Kinetic.Util._isFunction(this[c])?this[c](a[b]):this._setAttr(b,a[b]));return this},isListening:function(){return this._getCache(j,this._isListening)},_isListening:function(){var a=this.getListening(),b=this.getParent();return"inherit"===a?b?b.isListening():!0:a},isVisible:function(){return this._getCache(t,this._isVisible)},_isVisible:function(){var a=this.getVisible(),b=this.getParent();return"inherit"===a?b?b.isVisible():!0:a},shouldDrawHit:function(){var a=this.getLayer();return a&&a.hitGraphEnabled()&&this.isListening()&&this.isVisible()&&!Kinetic.isDragging()},show:function(){return this.setVisible(!0),this},hide:function(){return this.setVisible(!1),this},getZIndex:function(){return this.index||0},getAbsoluteZIndex:function(){function a(i){for(b=[],c=i.length,d=0;c>d;d++)e=i[d],h++,e.nodeType!==o&&(b=b.concat(e.getChildren().toArray())),e._id===g._id&&(d=c);b.length>0&&b[0].getDepth()<=f&&a(b)}var b,c,d,e,f=this.getDepth(),g=this,h=0;return g.nodeType!==s&&a(g.getStage().getChildren()),h},getDepth:function(){for(var a=0,b=this.parent;b;)a++,b=b.parent;return a},setPosition:function(a){return this.setX(a.x),this.setY(a.y),this},getPosition:function(){return{x:this.getX(),y:this.getY()}},getAbsolutePosition:function(){var a=this.getAbsoluteTransform().getMatrix(),b=new Kinetic.Transform,c=this.offset();return b.m=a.slice(),b.translate(c.x,c.y),b.getTranslation()},setAbsolutePosition:function(a){var b,c=this._clearTransform();return this.attrs.x=c.x,this.attrs.y=c.y,delete c.x,delete c.y,b=this.getAbsoluteTransform(),b.invert(),b.translate(a.x,a.y),a={x:this.attrs.x+b.getTranslation().x,y:this.attrs.y+b.getTranslation().y},this.setPosition({x:a.x,y:a.y}),this._setTransform(c),this},_setTransform:function(a){var c;for(c in a)this.attrs[c]=a[c];this._clearCache(r),this._clearSelfAndDescendantCache(b)},_clearTransform:function(){var a={x:this.getX(),y:this.getY(),rotation:this.getRotation(),scaleX:this.getScaleX(),scaleY:this.getScaleY(),offsetX:this.getOffsetX(),offsetY:this.getOffsetY(),skewX:this.getSkewX(),skewY:this.getSkewY()};return this.attrs.x=0,this.attrs.y=0,this.attrs.rotation=0,this.attrs.scaleX=1,this.attrs.scaleY=1,this.attrs.offsetX=0,this.attrs.offsetY=0,this.attrs.skewX=0,this.attrs.skewY=0,this._clearCache(r),this._clearSelfAndDescendantCache(b),a},move:function(a){var b=a.x,c=a.y,d=this.getX(),e=this.getY();return void 0!==b&&(d+=b),void 0!==c&&(e+=c),this.setPosition({x:d,y:e}),this},_eachAncestorReverse:function(a,b){var c,d,e=[],f=this.getParent();if(b&&b._id===this._id)return a(this),!0;for(e.unshift(this);f&&(!b||f._id!==b._id);)e.unshift(f),f=f.parent;for(c=e.length,d=0;c>d;d++)a(e[d])},rotate:function(a){return this.setRotation(this.getRotation()+a),this},moveToTop:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveToTop function is ignored.");var a=this.index;return this.parent.children.splice(a,1),this.parent.children.push(this),this.parent._setChildrenIndices(),!0},moveUp:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveUp function is ignored.");var a=this.index,b=this.parent.getChildren().length;return b-1>a?(this.parent.children.splice(a,1),this.parent.children.splice(a+1,0,this),this.parent._setChildrenIndices(),!0):!1},moveDown:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveDown function is ignored.");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.splice(a-1,0,this),this.parent._setChildrenIndices(),!0):!1},moveToBottom:function(){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. moveToBottom function is ignored.");var a=this.index;return a>0?(this.parent.children.splice(a,1),this.parent.children.unshift(this),this.parent._setChildrenIndices(),!0):!1},setZIndex:function(a){if(!this.parent)return void Kinetic.Util.warn("Node has no parent. zIndex parameter is ignored.");var b=this.index;return this.parent.children.splice(b,1),this.parent.children.splice(a,0,this),this.parent._setChildrenIndices(),this},getAbsoluteOpacity:function(){return this._getCache(a,this._getAbsoluteOpacity)},_getAbsoluteOpacity:function(){var a=this.getOpacity();return this.getParent()&&(a*=this.getParent().getAbsoluteOpacity()),a},moveTo:function(a){return Kinetic.Node.prototype.remove.call(this),a.add(this),this},toObject:function(){var a,b,c,d,e=Kinetic.Util,f={},g=this.getAttrs();f.attrs={};for(a in g)b=g[a],e._isFunction(b)||e._isElement(b)||e._isObject(b)&&e._hasMethods(b)||(c=this[a],delete g[a],d=c?c.call(this):null,g[a]=b,d!==b&&(f.attrs[a]=b));return f.className=this.getClassName(),f},toJSON:function(){return JSON.stringify(this.toObject())},getParent:function(){return this.parent},getLayer:function(){var a=this.getParent();return a?a.getLayer():null},getStage:function(){return this._getCache(q,this._getStage)},_getStage:function(){var a=this.getParent();return a?a.getStage():void 0},fire:function(a,b,c){return c?this._fireAndBubble(a,b||{}):this._fire(a,b||{}),this},getAbsoluteTransform:function(a){return a?this._getAbsoluteTransform(a):this._getCache(b,this._getAbsoluteTransform)},_getAbsoluteTransform:function(a){var b,c,d=new Kinetic.Transform;return this._eachAncestorReverse(function(a){b=a.transformsEnabled(),c=a.getTransform(),"all"===b?d.multiply(c):"position"===b&&d.translate(a.x(),a.y())},a),d},getTransform:function(){return this._getCache(r,this._getTransform)},_getTransform:function(){var a=new Kinetic.Transform,b=this.getX(),c=this.getY(),d=Kinetic.getAngle(this.getRotation()),e=this.getScaleX(),f=this.getScaleY(),g=this.getSkewX(),h=this.getSkewY(),i=this.getOffsetX(),j=this.getOffsetY();return(0!==b||0!==c)&&a.translate(b,c),0!==d&&a.rotate(d),(0!==g||0!==h)&&a.skew(g,h),(1!==e||1!==f)&&a.scale(e,f),(0!==i||0!==j)&&a.translate(-1*i,-1*j),a},clone:function(a){var b,c,d,e,f,g=this.getClassName(),h=Kinetic.Util.cloneObject(this.attrs);for(var j in u){var k=u[j];delete h[k]}for(b in a)h[b]=a[b];var l=new Kinetic[g](h);for(b in this.eventListeners)for(c=this.eventListeners[b],d=c.length,e=0;d>e;e++)f=c[e],f.name.indexOf(i)<0&&(l.eventListeners[b]||(l.eventListeners[b]=[]),l.eventListeners[b].push(f));return l},toDataURL:function(a){a=a||{};var b=a.mimeType||null,c=a.quality||null,d=this.getStage(),e=a.x||0,f=a.y||0,g=new Kinetic.SceneCanvas({width:a.width||this.getWidth()||(d?d.getWidth():0),height:a.height||this.getHeight()||(d?d.getHeight():0),pixelRatio:1}),h=g.getContext();return h.save(),(e||f)&&h.translate(-1*e,-1*f),this.drawScene(g),h.restore(),g.toDataURL(b,c)},toImage:function(a){Kinetic.Util._getImage(this.toDataURL(a),function(b){a.callback(b)})},setSize:function(a){return this.setWidth(a.width),this.setHeight(a.height),this},getSize:function(){return{width:this.getWidth(),height:this.getHeight()}},getWidth:function(){return this.attrs.width||0},getHeight:function(){return this.attrs.height||0},getClassName:function(){return this.className||this.nodeType},getType:function(){return this.nodeType},getDragDistance:function(){return void 0!==this.attrs.dragDistance?this.attrs.dragDistance:this.parent?this.parent.getDragDistance():Kinetic.dragDistance},_get:function(a){return this.nodeType===a?[this]:[]},_off:function(a,b){var c,d,e=this.eventListeners[a];for(c=0;ce;e++)c.add(this._createNode(g[e]));return c},Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"position"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"x",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"y",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"opacity",1),Kinetic.Factory.addGetter(Kinetic.Node,"name"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"name"),Kinetic.Factory.addGetter(Kinetic.Node,"id"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"id"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"rotation",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"scale",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleX",1),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleY",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"skew",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"offset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetY",0),Kinetic.Factory.addSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addSetter(Kinetic.Node,"width",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"width"),Kinetic.Factory.addSetter(Kinetic.Node,"height",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"height"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"listening","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"filters",void 0,function(a){return this._filterUpToDate=!1,a}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"visible","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"transformsEnabled","all"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"size"),Kinetic.Factory.backCompat(Kinetic.Node,{rotateDeg:"rotate",setRotationDeg:"setRotation",getRotationDeg:"getRotation"}),Kinetic.Collection.mapMethods(Kinetic.Node)}(),function(){Kinetic.Filters.Grayscale=function(a){var b,c,d=a.data,e=d.length;for(b=0;e>b;b+=4)c=.34*d[b]+.5*d[b+1]+.16*d[b+2],d[b]=c,d[b+1]=c,d[b+2]=c}}(),function(){Kinetic.Filters.Brighten=function(a){var b,c=255*this.brightness(),d=a.data,e=d.length;for(b=0;e>b;b+=4)d[b]+=c,d[b+1]+=c,d[b+2]+=c},Kinetic.Factory.addGetterSetter(Kinetic.Node,"brightness",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Invert=function(a){var b,c=a.data,d=c.length;for(b=0;d>b;b+=4)c[b]=255-c[b],c[b+1]=255-c[b+1],c[b+2]=255-c[b+2]}}(),function(){function a(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}function b(b,e){var f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D=b.data,E=b.width,F=b.height,G=e+e+1,H=E-1,I=F-1,J=e+1,K=J*(J+1)/2,L=new a,M=null,N=L,O=null,P=null,Q=c[e],R=d[e];for(h=1;G>h;h++)N=N.next=new a,h==J&&(M=N);for(N.next=L,l=k=0,g=0;F>g;g++){for(u=v=w=x=m=n=o=p=0,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(h=1;J>h;h++)i=k+((h>H?H:h)<<2),m+=(N.r=y=D[i])*(C=J-h),n+=(N.g=z=D[i+1])*C,o+=(N.b=A=D[i+2])*C,p+=(N.a=B=D[i+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next;for(O=L,P=M,f=0;E>f;f++)D[k+3]=B=p*Q>>R,0!==B?(B=255/B,D[k]=(m*Q>>R)*B,D[k+1]=(n*Q>>R)*B,D[k+2]=(o*Q>>R)*B):D[k]=D[k+1]=D[k+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=l+((i=f+e+1)f;f++){for(v=w=x=u=n=o=p=m=0,k=f<<2,q=J*(y=D[k]),r=J*(z=D[k+1]),s=J*(A=D[k+2]),t=J*(B=D[k+3]),m+=K*y,n+=K*z,o+=K*A,p+=K*B,N=L,h=0;J>h;h++)N.r=y,N.g=z,N.b=A,N.a=B,N=N.next;for(j=E,h=1;e>=h;h++)k=j+f<<2,m+=(N.r=y=D[k])*(C=J-h),n+=(N.g=z=D[k+1])*C,o+=(N.b=A=D[k+2])*C,p+=(N.a=B=D[k+3])*C,u+=y,v+=z,w+=A,x+=B,N=N.next,I>h&&(j+=E);for(k=f,O=L,P=M,g=0;F>g;g++)i=k<<2,D[i+3]=B=p*Q>>R,B>0?(B=255/B,D[i]=(m*Q>>R)*B,D[i+1]=(n*Q>>R)*B,D[i+2]=(o*Q>>R)*B):D[i]=D[i+1]=D[i+2]=0,m-=q,n-=r,o-=s,p-=t,q-=O.r,r-=O.g,s-=O.b,t-=O.a,i=f+((i=g+J)0&&b(a,c)},Kinetic.Factory.addGetterSetter(Kinetic.Node,"blurRadius",0,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a,b,c){var d=4*(c*a.width+b),e=[];return e.push(a.data[d++],a.data[d++],a.data[d++],a.data[d++]),e}function b(a,b){return Math.sqrt(Math.pow(a[0]-b[0],2)+Math.pow(a[1]-b[1],2)+Math.pow(a[2]-b[2],2))}function c(a){for(var b=[0,0,0],c=0;cn?0:255}return l}}function e(a,b){for(var c=0;ch;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=2040===k?255:0}return g}function g(a,b,c){for(var d=[1,1,1,1,1,1,1,1,1],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k>=1020?255:0}return g}function h(a,b,c){for(var d=[1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9,1/9],e=Math.round(Math.sqrt(d.length)),f=Math.floor(e/2),g=[],h=0;c>h;h++)for(var i=0;b>i;i++){for(var j=h*b+i,k=0,l=0;e>l;l++)for(var m=0;e>m;m++){var n=h+l-f,o=i+m-f;if(n>=0&&c>n&&o>=0&&b>o){var p=n*b+o,q=d[l*e+m];k+=a[p]*q}}g[j]=k}return g}Kinetic.Filters.Mask=function(a){var b=this.threshold(),c=d(a,b);return c&&(c=f(c,a.width,a.height),c=g(c,a.width,a.height),c=h(c,a.width,a.height),e(a,c)),a},Kinetic.Factory.addGetterSetter(Kinetic.Node,"threshold",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.RGB=function(a){var b,c,d=a.data,e=d.length,f=this.red(),g=this.green(),h=this.blue();for(b=0;e>b;b+=4)c=(.34*d[b]+.5*d[b+1]+.16*d[b+2])/255,d[b]=c*f,d[b+1]=c*g,d[b+2]=c*h,d[b+3]=d[b+3]},Kinetic.Factory.addGetterSetter(Kinetic.Node,"red",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"green",0,function(a){return this._filterUpToDate=!1,a>255?255:0>a?0:Math.round(a)}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"blue",0,Kinetic.Validators.RGBComponent,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.HSV=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=Math.pow(2,this.value()),j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=i*j*Math.cos(k*Math.PI/180),m=i*j*Math.sin(k*Math.PI/180),n=.299*i+.701*l+.167*m,o=.587*i-.587*l+.33*m,p=.114*i-.114*l-.497*m,q=.299*i-.299*l-.328*m,r=.587*i+.413*l+.035*m,s=.114*i-.114*l+.293*m,t=.299*i-.3*l+1.25*m,u=.587*i-.586*l-1.05*m,v=.114*i+.886*l-.2*m;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=n*c+o*d+p*e,g[b+1]=q*c+r*d+s*e,g[b+2]=t*c+u*d+v*e,g[b+3]=f},Kinetic.Factory.addGetterSetter(Kinetic.Node,"hue",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"saturation",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"value",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Factory.addGetterSetter(Kinetic.Node,"hue",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"saturation",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"luminance",0,null,Kinetic.Factory.afterSetFilter),Kinetic.Filters.HSL=function(a){var b,c,d,e,f,g=a.data,h=g.length,i=1,j=Math.pow(2,this.saturation()),k=Math.abs(this.hue()+360)%360,l=127*this.luminance(),m=i*j*Math.cos(k*Math.PI/180),n=i*j*Math.sin(k*Math.PI/180),o=.299*i+.701*m+.167*n,p=.587*i-.587*m+.33*n,q=.114*i-.114*m-.497*n,r=.299*i-.299*m-.328*n,s=.587*i+.413*m+.035*n,t=.114*i-.114*m+.293*n,u=.299*i-.3*m+1.25*n,v=.587*i-.586*m-1.05*n,w=.114*i+.886*m-.2*n;for(b=0;h>b;b+=4)c=g[b+0],d=g[b+1],e=g[b+2],f=g[b+3],g[b+0]=o*c+p*d+q*e+l,g[b+1]=r*c+s*d+t*e+l,g[b+2]=u*c+v*d+w*e+l,g[b+3]=f}}(),function(){Kinetic.Filters.Emboss=function(a){var b=10*this.embossStrength(),c=255*this.embossWhiteLevel(),d=this.embossDirection(),e=this.embossBlend(),f=0,g=0,h=a.data,i=a.width,j=a.height,k=4*i,l=j;switch(d){case"top-left":f=-1,g=-1;break;case"top":f=-1,g=0;break;case"top-right":f=-1,g=1;break;case"right":f=0,g=1;break;case"bottom-right":f=1,g=1;break;case"bottom":f=1,g=0;break;case"bottom-left":f=1,g=-1;break;case"left":f=0,g=-1}do{var m=(l-1)*k,n=f;1>l+n&&(n=0),l+n>j&&(n=0);var o=(l-1+n)*i*4,p=i;do{var q=m+4*(p-1),r=g;1>p+r&&(r=0),p+r>i&&(r=0);var s=o+4*(p-1+r),t=h[q]-h[s],u=h[q+1]-h[s+1],v=h[q+2]-h[s+2],w=t,x=w>0?w:-w,y=u>0?u:-u,z=v>0?v:-v;if(y>x&&(w=u),z>x&&(w=v),w*=b,e){var A=h[q]+w,B=h[q+1]+w,C=h[q+2]+w;h[q]=A>255?255:0>A?0:A,h[q+1]=B>255?255:0>B?0:B,h[q+2]=C>255?255:0>C?0:C}else{var D=c-w;0>D?D=0:D>255&&(D=255),h[q]=h[q+1]=h[q+2]=D}}while(--p)}while(--l)},Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossStrength",.5,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossWhiteLevel",.5,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossDirection","top-left",null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"embossBlend",!1,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a,b,c,d,e){var f,g=c-b,h=e-d;return 0===g?d+h/2:0===h?d:(f=(a-b)/g,f=h*f+d)}Kinetic.Filters.Enhance=function(b){var c,d,e,f,g=b.data,h=g.length,i=g[0],j=i,k=g[1],l=k,m=g[2],n=m,o=g[3],p=o,q=this.enhance();if(0!==q){for(f=0;h>f;f+=4)c=g[f+0],i>c?i=c:c>j&&(j=c),d=g[f+1],k>d?k=d:d>l&&(l=d),e=g[f+2],m>e?m=e:e>n&&(n=e);j===i&&(j=255,i=0),l===k&&(l=255,k=0),n===m&&(n=255,m=0),p===o&&(p=255,o=0);var r,s,t,u,v,w,x,y,z,A,B,C;for(q>0?(s=j+q*(255-j),t=i-q*(i-0),v=l+q*(255-l),w=k-q*(k-0),y=n+q*(255-n),C=m-q*(m-0),B=p+q*(255-p),z=o-q*(o-0)):(r=.5*(j+i),s=j+q*(j-r),t=i+q*(i-r),u=.5*(l+k),v=l+q*(l-u),w=k+q*(k-u),x=.5*(n+m),y=n+q*(n-x),C=m+q*(m-x),A=.5*(p+o),B=p+q*(p-A),z=o+q*(o-A)),f=0;h>f;f+=4)g[f+0]=a(g[f+0],i,j,t,s),g[f+1]=a(g[f+1],k,l,w,v),g[f+2]=a(g[f+2],m,n,C,y)}},Kinetic.Factory.addGetterSetter(Kinetic.Node,"enhance",0,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Posterize=function(a){var b,c=Math.round(254*this.levels())+1,d=a.data,e=d.length,f=255/c;for(b=0;e>b;b+=1)d[b]=Math.floor(d[b]/f)*f},Kinetic.Factory.addGetterSetter(Kinetic.Node,"levels",.5,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Noise=function(a){var b,c=255*this.noise(),d=a.data,e=d.length,f=c/2;for(b=0;e>b;b+=4)d[b+0]+=f-2*f*Math.random(),d[b+1]+=f-2*f*Math.random(),d[b+2]+=f-2*f*Math.random()},Kinetic.Factory.addGetterSetter(Kinetic.Node,"noise",.2,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Pixelate=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p=Math.ceil(this.pixelSize()),q=a.width,r=a.height,s=Math.ceil(q/p),t=Math.ceil(r/p);for(a=a.data,m=0;s>m;m+=1)for(n=0;t>n;n+=1){for(e=0,f=0,g=0,h=0,i=m*p,j=i+p,k=n*p,l=k+p,o=0,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),e+=a[d+0],f+=a[d+1],g+=a[d+2],h+=a[d+3],o+=1);for(e/=o,f/=o,g/=o,b=i;j>b;b+=1)if(!(b>=q))for(c=k;l>c;c+=1)c>=r||(d=4*(q*c+b),a[d+0]=e,a[d+1]=f,a[d+2]=g,a[d+3]=h)}},Kinetic.Factory.addGetterSetter(Kinetic.Node,"pixelSize",8,null,Kinetic.Factory.afterSetFilter)}(),function(){Kinetic.Filters.Threshold=function(a){var b,c=255*this.threshold(),d=a.data,e=d.length;for(b=0;e>b;b+=1)d[b]=d[b]255?255:h,k[d+1]=i>255?255:i,k[d+2]=j>255?255:j,k[d+3]=k[d+3];while(--c)}while(--m)}}(),function(){Kinetic.Filters.Solarize=function(a){var b=a.data,c=a.width,d=a.height,e=4*c,f=d;do{var g=(f-1)*e,h=c;do{var i=g+4*(h-1),j=b[i],k=b[i+1],l=b[i+2];j>127&&(j=255-j),k>127&&(k=255-k),l>127&&(l=255-l),b[i]=j,b[i+1]=k,b[i+2]=l}while(--h)}while(--f)}}(),function(){var a=function(a,b,c){var d,e,f,g,h=a.data,i=b.data,j=a.width,k=a.height,l=c.polarCenterX||j/2,m=c.polarCenterY||k/2,n=0,o=0,p=0,q=0,r=Math.sqrt(l*l+m*m);e=j-l,f=k-m,g=Math.sqrt(e*e+f*f),r=g>r?g:r;var s,t,u,v,w=k,x=j,y=360/x*Math.PI/180;for(t=0;x>t;t+=1)for(u=Math.sin(t*y),v=Math.cos(t*y),s=0;w>s;s+=1)e=Math.floor(l+r*s/w*v),f=Math.floor(m+r*s/w*u),d=4*(f*j+e),n=h[d+0],o=h[d+1],p=h[d+2],q=h[d+3],d=4*(t+s*j),i[d+0]=n,i[d+1]=o,i[d+2]=p,i[d+3]=q},b=function(a,b,c){var d,e,f,g,h,i,j=a.data,k=b.data,l=a.width,m=a.height,n=c.polarCenterX||l/2,o=c.polarCenterY||m/2,p=0,q=0,r=0,s=0,t=Math.sqrt(n*n+o*o);e=l-n,f=m-o,i=Math.sqrt(e*e+f*f),t=i>t?i:t;var u,v,w,x,y=m,z=l,A=c.polarRotation||0;for(e=0;l>e;e+=1)for(f=0;m>f;f+=1)g=e-n,h=f-o,u=Math.sqrt(g*g+h*h)*y/t,v=(180*Math.atan2(h,g)/Math.PI+360+A)%360,v=v*z/360,w=Math.floor(v),x=Math.floor(u),d=4*(x*l+w),p=j[d+0],q=j[d+1],r=j[d+2],s=j[d+3],d=4*(f*l+e),k[d+0]=p,k[d+1]=q,k[d+2]=r,k[d+3]=s},c=Kinetic.Util.createCanvasElement();Kinetic.Filters.Kaleidoscope=function(d){var e,f,g,h,i,j,k,l,m,n,o=d.width,p=d.height,q=Math.round(this.kaleidoscopePower()),r=Math.round(this.kaleidoscopeAngle()),s=Math.floor(o*(r%360)/360);if(!(1>q)){c.width=o,c.height=p;var t=c.getContext("2d").getImageData(0,0,o,p);a(d,t,{polarCenterX:o/2,polarCenterY:p/2});for(var u=o/Math.pow(2,q);8>=u;)u=2*u,q-=1;u=Math.ceil(u);var v=u,w=0,x=v,y=1;for(s+u>o&&(w=v,x=0,y=-1),f=0;p>f;f+=1)for(e=w;e!==x;e+=y)g=Math.round(e+s)%o,m=4*(o*f+g),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+e),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;for(f=0;p>f;f+=1)for(v=Math.floor(u),h=0;q>h;h+=1){for(e=0;v+1>e;e+=1)m=4*(o*f+e),i=t.data[m+0],j=t.data[m+1],k=t.data[m+2],l=t.data[m+3],n=4*(o*f+2*v-e-1),t.data[n+0]=i,t.data[n+1]=j,t.data[n+2]=k,t.data[n+3]=l;v*=2}b(t,d,{polarRotation:0})}},Kinetic.Factory.addGetterSetter(Kinetic.Node,"kaleidoscopePower",2,null,Kinetic.Factory.afterSetFilter),Kinetic.Factory.addGetterSetter(Kinetic.Node,"kaleidoscopeAngle",0,null,Kinetic.Factory.afterSetFilter)}(),function(){function a(a){Kinetic.root.setTimeout(a,1e3/60)}function b(){return e.apply(Kinetic.root,arguments)}var c=500,d=function(){return Kinetic.root.performance&&Kinetic.root.performance.now?function(){return Kinetic.root.performance.now()}:function(){return(new Date).getTime()}}(),e=function(){return Kinetic.root.requestAnimationFrame||Kinetic.root.webkitRequestAnimationFrame||Kinetic.root.mozRequestAnimationFrame||Kinetic.root.oRequestAnimationFrame||Kinetic.root.msRequestAnimationFrame||a}();Kinetic.Animation=function(a,b){var c=Kinetic.Animation;this.func=a,this.setLayers(b),this.id=c.animIdCounter++,this.frame={time:0,timeDiff:0,lastTime:d()}},Kinetic.Animation.prototype={setLayers:function(a){var b=[];b=a?a.length>0?a:[a]:[],this.layers=b},getLayers:function(){return this.layers},addLayer:function(a){var b,c,d=this.layers;if(d){for(b=d.length,c=0;b>c;c++)if(d[c]._id===a._id)return!1}else this.layers=[];return this.layers.push(a),!0},isRunning:function(){var a,b=Kinetic.Animation,c=b.animations,d=c.length;for(a=0;d>a;a++)if(c[a].id===this.id)return!0;return!1},start:function(){var a=Kinetic.Animation;this.stop(),this.frame.timeDiff=0,this.frame.lastTime=d(),a._addAnimation(this)},stop:function(){Kinetic.Animation._removeAnimation(this)},_updateFrameObject:function(a){this.frame.timeDiff=a-this.frame.lastTime,this.frame.lastTime=a,this.frame.time+=this.frame.timeDiff,this.frame.frameRate=1e3/this.frame.timeDiff}},Kinetic.Animation.animations=[],Kinetic.Animation.animIdCounter=0,Kinetic.Animation.animRunning=!1,Kinetic.Animation._addAnimation=function(a){this.animations.push(a),this._handleAnimation()},Kinetic.Animation._removeAnimation=function(a){var b,c=a.id,d=this.animations,e=d.length;for(b=0;e>b;b++)if(d[b].id===c){this.animations.splice(b,1);break}},Kinetic.Animation._runFrames=function(){var a,b,c,e,f,g,h,i,j={},k=this.animations;for(e=0;ef;f++)h=b[f],void 0!==h._id&&(j[h._id]=h);c&&c.call(a,a.frame)}for(i in j)j[i].draw()},Kinetic.Animation._animationLoop=function(){var a=Kinetic.Animation;a.animations.length?(b(a._animationLoop),a._runFrames()):a.animRunning=!1},Kinetic.Animation._handleAnimation=function(){var a=this;this.animRunning||(this.animRunning=!0,a._animationLoop())};var f=Kinetic.Node.prototype.moveTo;Kinetic.Node.prototype.moveTo=function(a){f.call(this,a)},Kinetic.Layer.prototype.batchDraw=function(){var a=this,b=Kinetic.Animation;this.batchAnim||(this.batchAnim=new b(function(){a.lastBatchDrawTime&&d()-a.lastBatchDrawTime>c&&a.batchAnim.stop()},this)),this.lastBatchDrawTime=d(),this.batchAnim.isRunning()||(this.draw(),this.batchAnim.start())},Kinetic.Stage.prototype.batchDraw=function(){this.getChildren().each(function(a){a.batchDraw()})}}((1,eval)("this")),function(){var a={node:1,duration:1,easing:1,onFinish:1,yoyo:1},b=1,c=2,d=3,e=0;Kinetic.Tween=function(b){var c,d=this,g=b.node,h=g._id,i=b.duration||1,j=b.easing||Kinetic.Easings.Linear,k=!!b.yoyo;this.node=g,this._id=e++,this.anim=new Kinetic.Animation(function(){d.tween.onEnterFrame()},g.getLayer()),this.tween=new f(c,function(a){d._tweenFunc(a)},j,0,1,1e3*i,k),this._addListeners(),Kinetic.Tween.attrs[h]||(Kinetic.Tween.attrs[h]={}),Kinetic.Tween.attrs[h][this._id]||(Kinetic.Tween.attrs[h][this._id]={}),Kinetic.Tween.tweens[h]||(Kinetic.Tween.tweens[h]={});for(c in b)void 0===a[c]&&this._addAttr(c,b[c]);this.reset(),this.onFinish=b.onFinish,this.onReset=b.onReset},Kinetic.Tween.attrs={},Kinetic.Tween.tweens={},Kinetic.Tween.prototype={_addAttr:function(a,b){var c,d,e,f,g,h=this.node,i=h._id;if(e=Kinetic.Tween.tweens[i][a],e&&delete Kinetic.Tween.attrs[i][e][a],c=h.getAttr(a),Kinetic.Util._isArray(b))for(d=[],g=b.length,f=0;g>f;f++)d.push(b[f]-c[f]);else d=b-c;Kinetic.Tween.attrs[i][this._id][a]={start:c,diff:d},Kinetic.Tween.tweens[i][a]=this._id},_tweenFunc:function(a){var b,c,d,e,f,g,h,i=this.node,j=Kinetic.Tween.attrs[i._id][this._id];for(b in j){if(c=j[b],d=c.start,e=c.diff,Kinetic.Util._isArray(d))for(f=[],h=d.length,g=0;h>g;g++)f.push(d[g]+e[g]*a);else f=d+e*a;i.setAttr(b,f)}},_addListeners:function(){var a=this;this.tween.onPlay=function(){a.anim.start()},this.tween.onReverse=function(){a.anim.start()},this.tween.onPause=function(){a.anim.stop()},this.tween.onFinish=function(){a.onFinish&&a.onFinish()},this.tween.onReset=function(){a.onReset&&a.onReset()}},play:function(){return this.tween.play(),this},reverse:function(){return this.tween.reverse(),this},reset:function(){this.node;return this.tween.reset(),this},seek:function(a){this.node;return this.tween.seek(1e3*a),this},pause:function(){return this.tween.pause(),this},finish:function(){this.node;return this.tween.finish(),this},destroy:function(){var a,b=this.node._id,c=this._id,d=Kinetic.Tween.tweens[b];this.pause();for(a in d)delete Kinetic.Tween.tweens[b][a];delete Kinetic.Tween.attrs[b][c]}};var f=function(a,b,c,d,e,f,g){this.prop=a,this.propFunc=b,this.begin=d,this._pos=d,this.duration=f,this._change=0,this.prevPos=0,this.yoyo=g,this._time=0,this._position=0,this._startTime=0,this._finish=0,this.func=c,this._change=e-this.begin,this.pause()};f.prototype={fire:function(a){var b=this[a];b&&b()},setTime:function(a){a>this.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():0>a?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=a,this.update())},getTime:function(){return this._time},setPosition:function(a){this.prevPos=this._pos,this.propFunc(a),this._pos=a},getPosition:function(a){return void 0===a&&(a=this._time),this.func(a,this.begin,this._change,this.duration)},play:function(){this.state=c,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},reverse:function(){this.state=d,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},seek:function(a){this.pause(),this._time=a,this.update(),this.fire("onSeek")},reset:function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var a=this.getTimer()-this._startTime;this.state===c?this.setTime(a):this.state===d&&this.setTime(this.duration-a)},pause:function(){this.state=b,this.fire("onPause")},getTimer:function(){return(new Date).getTime()}},Kinetic.Easings={BackEaseIn:function(a,b,c,d){var e=1.70158;return c*(a/=d)*a*((e+1)*a-e)+b},BackEaseOut:function(a,b,c,d){var e=1.70158;return c*((a=a/d-1)*a*((e+1)*a+e)+1)+b},BackEaseInOut:function(a,b,c,d){var e=1.70158;return(a/=d/2)<1?c/2*a*a*(((e*=1.525)+1)*a-e)+b:c/2*((a-=2)*a*(((e*=1.525)+1)*a+e)+2)+b},ElasticEaseIn:function(a,b,c,d,e,f){var g=0;return 0===a?b:1==(a/=d)?b+c:(f||(f=.3*d),!e||ea?-.5*e*Math.pow(2,10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)+b:e*Math.pow(2,-10*(a-=1))*Math.sin(2*(a*d-g)*Math.PI/f)*.5+c+b)},BounceEaseOut:function(a,b,c,d){return(a/=d)<1/2.75?7.5625*c*a*a+b:2/2.75>a?c*(7.5625*(a-=1.5/2.75)*a+.75)+b:2.5/2.75>a?c*(7.5625*(a-=2.25/2.75)*a+.9375)+b:c*(7.5625*(a-=2.625/2.75)*a+.984375)+b},BounceEaseIn:function(a,b,c,d){return c-Kinetic.Easings.BounceEaseOut(d-a,0,c,d)+b},BounceEaseInOut:function(a,b,c,d){return d/2>a?.5*Kinetic.Easings.BounceEaseIn(2*a,0,c,d)+b:.5*Kinetic.Easings.BounceEaseOut(2*a-d,0,c,d)+.5*c+b},EaseIn:function(a,b,c,d){return c*(a/=d)*a+b},EaseOut:function(a,b,c,d){return-c*(a/=d)*(a-2)+b},EaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a+b:-c/2*(--a*(a-2)-1)+b},StrongEaseIn:function(a,b,c,d){return c*(a/=d)*a*a*a*a+b},StrongEaseOut:function(a,b,c,d){return c*((a=a/d-1)*a*a*a*a+1)+b},StrongEaseInOut:function(a,b,c,d){return(a/=d/2)<1?c/2*a*a*a*a*a+b:c/2*((a-=2)*a*a*a*a+2)+b},Linear:function(a,b,c,d){return c*a/d+b}}}(),function(){Kinetic.DD={anim:new Kinetic.Animation,isDragging:!1,offset:{x:0,y:0},node:null,_drag:function(a){var b=Kinetic.DD,c=b.node;if(c){if(!b.isDragging){var d=c.getStage().getPointerPosition(),e=c.dragDistance(),f=Math.max(Math.abs(d.x-b.startPointerPos.x),Math.abs(d.y-b.startPointerPos.y));if(e>f)return}c._setDragPosition(a),b.isDragging||(b.isDragging=!0,c.fire("dragstart",{type:"dragstart",target:c,evt:a},!0)),c.fire("dragmove",{type:"dragmove",target:c,evt:a},!0)}},_endDragBefore:function(a){var b,c,d=Kinetic.DD,e=d.node;e&&(b=e.nodeType,c=e.getLayer(),d.anim.stop(),d.isDragging&&(d.isDragging=!1,Kinetic.listenClickTap=!1,a&&(a.dragEndNode=e)),delete d.node,(c||e).draw())},_endDragAfter:function(a){a=a||{};var b=a.dragEndNode;a&&b&&b.fire("dragend",{type:"dragend",target:b,evt:a},!0)}},Kinetic.Node.prototype.startDrag=function(){var a=Kinetic.DD,b=this.getStage(),c=this.getLayer(),d=b.getPointerPosition(),e=this.getAbsolutePosition();d&&(a.node&&a.node.stopDrag(),a.node=this,a.startPointerPos=d,a.offset.x=d.x-e.x,a.offset.y=d.y-e.y,a.anim.setLayers(c||this.getLayers()),a.anim.start(),this._setDragPosition())},Kinetic.Node.prototype._setDragPosition=function(a){var b=Kinetic.DD,c=this.getStage().getPointerPosition(),d=this.getDragBoundFunc();if(c){var e={x:c.x-b.offset.x,y:c.y-b.offset.y};void 0!==d&&(e=d.call(this,e,a)),this.setAbsolutePosition(e)}},Kinetic.Node.prototype.stopDrag=function(){var a=Kinetic.DD,b={};a._endDragBefore(b),a._endDragAfter(b)},Kinetic.Node.prototype.setDraggable=function(a){this._setAttr("draggable",a),this._dragChange()};var a=Kinetic.Node.prototype.destroy;Kinetic.Node.prototype.destroy=function(){var b=Kinetic.DD;b.node&&b.node._id===this._id&&this.stopDrag(),a.call(this)},Kinetic.Node.prototype.isDragging=function(){var a=Kinetic.DD;return a.node&&a.node._id===this._id&&a.isDragging},Kinetic.Node.prototype._listenDrag=function(){var a=this;this._dragCleanup(),"Stage"===this.getClassName()?this.on("contentMousedown.kinetic contentTouchstart.kinetic",function(b){Kinetic.DD.node||a.startDrag(b)}):this.on("mousedown.kinetic touchstart.kinetic",function(b){Kinetic.DD.node||a.startDrag(b)})},Kinetic.Node.prototype._dragChange=function(){if(this.attrs.draggable)this._listenDrag();else{this._dragCleanup();var a=this.getStage(),b=Kinetic.DD;a&&b.node&&b.node._id===this._id&&b.node.stopDrag()}},Kinetic.Node.prototype._dragCleanup=function(){"Stage"===this.getClassName()?(this.off("contentMousedown.kinetic"),this.off("contentTouchstart.kinetic")):(this.off("mousedown.kinetic"),this.off("touchstart.kinetic"))},Kinetic.Factory.addGetterSetter(Kinetic.Node,"dragBoundFunc"),Kinetic.Factory.addGetter(Kinetic.Node,"draggable",!1),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"draggable");var b=Kinetic.document.documentElement;b.addEventListener("mouseup",Kinetic.DD._endDragBefore,!0),b.addEventListener("touchend",Kinetic.DD._endDragBefore,!0),b.addEventListener("mouseup",Kinetic.DD._endDragAfter,!1),b.addEventListener("touchend",Kinetic.DD._endDragAfter,!1)}(),function(){Kinetic.Util.addMethods(Kinetic.Container,{__init:function(a){this.children=new Kinetic.Collection,Kinetic.Node.call(this,a)},getChildren:function(a){if(a){var b=new Kinetic.Collection;return this.children.each(function(c){a(c)&&b.push(c)}),b}return this.children},hasChildren:function(){return this.getChildren().length>0},removeChildren:function(){for(var a,b=Kinetic.Collection.toCollection(this.children),c=0;c1)){if(a.getParent())return void a.moveTo(this);var b=this.children;return this._validateAdd(a),a.index=b.length,a.parent=this,b.push(a),this._fire("add",{child:a}),this}for(var c=0;cb;b++)if(d=j[b],"#"===d.charAt(0))f=this._getNodeById(d.slice(1)),f&&i.push(f);else if("."===d.charAt(0))e=this._getNodesByName(d.slice(1)),i=i.concat(e);else for(g=this.getChildren(),h=g.length,c=0;h>c;c++)i=i.concat(g[c]._get(d));return Kinetic.Collection.toCollection(i)},_getNodeById:function(a){var b=Kinetic.ids[a];return void 0!==b&&this.isAncestorOf(b)?b:null},_getNodesByName:function(a){var b=Kinetic.names[a]||[];return this._getDescendants(b)},_get:function(a){for(var b=Kinetic.Node.prototype._get.call(this,a),c=this.getChildren(),d=c.length,e=0;d>e;e++)b=b.concat(c[e]._get(a));return b},toObject:function(){var a=Kinetic.Node.prototype.toObject.call(this);a.children=[];for(var b=this.getChildren(),c=b.length,d=0;c>d;d++){var e=b[d];a.children.push(e.toObject())}return a},_getDescendants:function(a){for(var b=[],c=a.length,d=0;c>d;d++){var e=a[d];this.isAncestorOf(e)&&b.push(e)}return b},isAncestorOf:function(a){for(var b=a.getParent();b;){if(b._id===this._id)return!0;b=b.getParent()}return!1},clone:function(a){var b=Kinetic.Node.prototype.clone.call(this,a);return this.getChildren().each(function(a){b.add(a.clone())}),b},getAllIntersections:function(a){var b=[];return this.find("Shape").each(function(c){c.isVisible()&&c.intersects(a)&&b.push(c)}),b},_setChildrenIndices:function(){this.children.each(function(a,b){a.index=b})},drawScene:function(a,b){var c=this.getLayer(),d=a||c&&c.getCanvas(),e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.scene;return this.isVisible()&&(g?this._drawCachedSceneCanvas(e):this._drawChildren(d,"drawScene",b)),this },drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas,e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.hit;return this.shouldDrawHit()&&(g?this._drawCachedHitCanvas(e):this._drawChildren(d,"drawHit",b)),this},_drawChildren:function(a,b,c){var d,e,f=this.getLayer(),g=a&&a.getContext(),h=this.getClipWidth(),i=this.getClipHeight(),j=h&&i;j&&f&&(d=this.getClipX(),e=this.getClipY(),g.save(),f._applyTransform(this,g),g.beginPath(),g.rect(d,e,h,i),g.clip(),g.reset()),this.children.each(function(d){d[b](a,c)}),j&&g.restore()}}),Kinetic.Util.extend(Kinetic.Container,Kinetic.Node),Kinetic.Container.prototype.get=Kinetic.Container.prototype.find,Kinetic.Factory.addComponentsGetterSetter(Kinetic.Container,"clip",["x","y","width","height"]),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipX"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipY"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipWidth"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipHeight"),Kinetic.Collection.mapMethods(Kinetic.Container)}(),function(){function a(a){a.fill()}function b(a){a.stroke()}function c(a){a.fill()}function d(a){a.stroke()}function e(){this._clearCache(f)}var f="hasShadow";Kinetic.Util.addMethods(Kinetic.Shape,{__init:function(f){this.nodeType="Shape",this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=c,this._strokeFuncHit=d;for(var g,h=Kinetic.shapes;;)if(g=Kinetic.Util.getRandomColor(),g&&!(g in h))break;this.colorKey=g,h[g]=this,Kinetic.Node.call(this,f),this.on("shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChange.kinetic",e)},hasChildren:function(){return!1},getChildren:function(){return[]},getContext:function(){return this.getLayer().getContext()},getCanvas:function(){return this.getLayer().getCanvas()},hasShadow:function(){return this._getCache(f,this._hasShadow)},_hasShadow:function(){return this.getShadowEnabled()&&0!==this.getShadowOpacity()&&!!(this.getShadowColor()||this.getShadowBlur()||this.getShadowOffsetX()||this.getShadowOffsetY())},hasFill:function(){return!!(this.getFill()||this.getFillPatternImage()||this.getFillLinearGradientColorStops()||this.getFillRadialGradientColorStops())},hasStroke:function(){return!!(this.stroke()||this.strokeRed()||this.strokeGreen()||this.strokeBlue())},_get:function(a){return this.className===a||this.nodeType===a?[this]:[]},intersects:function(a){var b,c=this.getStage(),d=c.bufferHitCanvas;return d.getContext().clear(),this.drawScene(d),b=d.context.getImageData(Math.round(a.x),Math.round(a.y),1,1).data,b[3]>0},destroy:function(){Kinetic.Node.prototype.destroy.call(this),delete Kinetic.shapes[this.colorKey]},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasFill()&&this.hasStroke()&&this.getStage()},drawScene:function(a,b){var c,d,e,f=this.getLayer(),g=a||f.getCanvas(),h=g.getContext(),i=this._cache.canvas,j=this.sceneFunc(),k=this.hasShadow();return this.isVisible()&&(i?this._drawCachedSceneCanvas(h):j&&(h.save(),this._useBufferCanvas()?(c=this.getStage(),d=c.bufferCanvas,e=d.getContext(),e.clear(),e.save(),e._applyLineJoin(this),f._applyTransform(this,e,b),j.call(this,e),e.restore(),k&&(h.save(),h._applyShadow(this),h.drawImage(d._canvas,0,0),h.restore()),h._applyOpacity(this),h.drawImage(d._canvas,0,0)):(h._applyLineJoin(this),f._applyTransform(this,h,b),k&&(h.save(),h._applyShadow(this),j.call(this,h),h.restore()),h._applyOpacity(this),j.call(this,h)),h.restore())),this},drawHit:function(a,b){var c=this.getLayer(),d=a||c.hitCanvas,e=d.getContext(),f=this.hitFunc()||this.sceneFunc(),g=this._cache.canvas,h=g&&g.hit;return this.shouldDrawHit()&&(h?this._drawCachedHitCanvas(e):f&&(e.save(),e._applyLineJoin(this),c._applyTransform(this,e,b),f.call(this,e),e.restore())),this},drawHitFromCache:function(a){var b,c,d,e,f,g,h,i,j=a||0,k=this._cache.canvas,l=this._getCachedSceneCanvas(),m=l.getContext(),n=k.hit,o=n.getContext(),p=l.getWidth(),q=l.getHeight();o.clear();try{for(b=m.getImageData(0,0,p,q),c=b.data,d=o.getImageData(0,0,p,q),e=d.data,f=c.length,g=Kinetic.Util._hexToRgb(this.colorKey),h=0;f>h;h+=4)i=c[h+3],i>j&&(e[h]=g.r,e[h+1]=g.g,e[h+2]=g.b,e[h+3]=255);o.putImageData(d,0,0)}catch(r){Kinetic.Util.warn("Unable to draw hit graph from cached scene canvas. "+r.message)}return this}}),Kinetic.Util.extend(Kinetic.Shape,Kinetic.Node),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"stroke"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeRed",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeGreen",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeBlue",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeAlpha",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeWidth",2),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"lineJoin"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"lineCap"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"sceneFunc"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"hitFunc"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"dash"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowColor"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowRed",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowGreen",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowBlue",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowAlpha",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowBlur"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowOpacity"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"shadowOffset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowOffsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowOffsetY",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternImage"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fill"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRed",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillGreen",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillBlue",0,Kinetic.Validators.RGBComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillAlpha",1,Kinetic.Validators.alphaComponent),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternY",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientColorStops"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientStartRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientEndRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientColorStops"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternRepeat","repeat"),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"shadowEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"dashEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"strokeScaleEnabled",!0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPriority","color"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillPatternOffset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternOffsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternOffsetY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillPatternScale",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternScaleX",1),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternScaleY",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillLinearGradientStartPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientStartPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientStartPointY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillLinearGradientEndPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientEndPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillLinearGradientEndPointY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillRadialGradientStartPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientStartPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientStartPointY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Shape,"fillRadialGradientEndPoint",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientEndPointX",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillRadialGradientEndPointY",0),Kinetic.Factory.addGetterSetter(Kinetic.Shape,"fillPatternRotation",0),Kinetic.Factory.backCompat(Kinetic.Shape,{dashArray:"dash",getDashArray:"getDash",setDashArray:"getDash",drawFunc:"sceneFunc",getDrawFunc:"getSceneFunc",setDrawFunc:"setSceneFunc",drawHitFunc:"hitFunc",getDrawHitFunc:"getHitFunc",setDrawHitFunc:"setHitFunc"}),Kinetic.Collection.mapMethods(Kinetic.Shape)}(),function(){function a(a,b){a.content.addEventListener(b,function(c){a[I+b](c)},!1)}var b="Stage",c="string",d="px",e="mouseout",f="mouseleave",g="mouseover",h="mouseenter",i="mousemove",j="mousedown",k="mouseup",l="click",m="dblclick",n="touchstart",o="touchend",p="tap",q="dbltap",r="touchmove",s="contentMouseout",t="contentMouseover",u="contentMousemove",v="contentMousedown",w="contentMouseup",x="contentClick",y="contentDblclick",z="contentTouchstart",A="contentTouchend",B="contentDbltap",C="contentTouchmove",D="div",E="relative",F="inline-block",G="kineticjs-content",H=" ",I="_",J="container",K="",L=[j,i,k,e,n,r,o,g],M=L.length;Kinetic.Util.addMethods(Kinetic.Stage,{___init:function(a){this.nodeType=b,Kinetic.Container.call(this,a),this._id=Kinetic.idCounter++,this._buildDOM(),this._bindContentEvents(),this._enableNestedTransforms=!1,Kinetic.stages.push(this)},_validateAdd:function(a){"Layer"!==a.getType()&&Kinetic.Util.error("You may only add layers to the stage.")},setContainer:function(a){if(typeof a===c){var b=a;if(a=Kinetic.document.getElementById(a),!a)throw"Can not find container in document with id "+b}return this._setAttr(J,a),this},shouldDrawHit:function(){return!0},draw:function(){return Kinetic.Node.prototype.draw.call(this),this},setHeight:function(a){return Kinetic.Node.prototype.setHeight.call(this,a),this._resizeDOM(),this},setWidth:function(a){return Kinetic.Node.prototype.setWidth.call(this,a),this._resizeDOM(),this},clear:function(){var a,b=this.children,c=b.length;for(a=0;c>a;a++)b[a].clear();return this},clone:function(a){return a||(a={}),a.container=Kinetic.document.createElement(D),Kinetic.Container.prototype.clone.call(this,a)},destroy:function(){var a=this.content;Kinetic.Container.prototype.destroy.call(this),a&&Kinetic.Util._isInDocument(a)&&this.getContainer().removeChild(a);var b=Kinetic.stages.indexOf(this);b>-1&&Kinetic.stages.splice(b,1)},getPointerPosition:function(){return this.pointerPos},getStage:function(){return this},getContent:function(){return this.content},toDataURL:function(a){function b(e){var f=i[e],j=f.toDataURL(),k=new Kinetic.window.Image;k.onload=function(){h.drawImage(k,0,0),e=0;b--)if(c=d[b].getIntersection(a))return c;return null},_resizeDOM:function(){if(this.content){var a,b,c=this.getWidth(),e=this.getHeight(),f=this.getChildren(),g=f.length;for(this.content.style.width=c+d,this.content.style.height=e+d,this.bufferCanvas.setSize(c,e),this.bufferHitCanvas.setSize(c,e),a=0;g>a;a++)b=f[a],b.getCanvas().setSize(c,e),b.hitCanvas.setSize(c,e),b.draw()}},add:function(a){if(!(arguments.length>1))return Kinetic.Container.prototype.add.call(this,a),a._setCanvasSize(this.width(),this.height()),a.draw(),this.content.appendChild(a.canvas._canvas),this;for(var b=0;bb;b++)a(this,L[b])},_mouseover:function(a){Kinetic.UA.mobile||(this._setPointerPosition(a),this._fire(t,{evt:a}))},_mouseout:function(a){if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.targetShape;b&&!Kinetic.isDragging()&&(b._fireAndBubble(e,{evt:a}),b._fireAndBubble(f,{evt:a}),this.targetShape=null),this.pointerPos=void 0,this._fire(s,{evt:a})}},_mousemove:function(a){if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=Kinetic.DD,c=this.getIntersection(this.getPointerPosition());c&&c.isListening()?Kinetic.isDragging()||this.targetShape&&this.targetShape._id===c._id?c._fireAndBubble(i,{evt:a}):(this.targetShape&&(this.targetShape._fireAndBubble(e,{evt:a},c),this.targetShape._fireAndBubble(f,{evt:a},c)),c._fireAndBubble(g,{evt:a},this.targetShape),c._fireAndBubble(h,{evt:a},this.targetShape),this.targetShape=c):this.targetShape&&!Kinetic.isDragging()&&(this.targetShape._fireAndBubble(e,{evt:a}),this.targetShape._fireAndBubble(f,{evt:a}),this.targetShape=null),this._fire(u,{evt:a}),b&&b._drag(a)}a.preventDefault&&a.preventDefault()},_mousedown:function(a){if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Kinetic.listenClickTap=!0,b&&b.isListening()&&(this.clickStartShape=b,b._fireAndBubble(j,{evt:a})),this._fire(v,{evt:a})}a.preventDefault&&a.preventDefault()},_mouseup:function(a){if(!Kinetic.UA.mobile){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=this.clickStartShape,d=!1;Kinetic.inDblClickWindow?(d=!0,Kinetic.inDblClickWindow=!1):Kinetic.inDblClickWindow=!0,setTimeout(function(){Kinetic.inDblClickWindow=!1},Kinetic.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(k,{evt:a}),Kinetic.listenClickTap&&c&&c._id===b._id&&(b._fireAndBubble(l,{evt:a}),d&&b._fireAndBubble(m,{evt:a}))),this._fire(w,{evt:a}),Kinetic.listenClickTap&&(this._fire(x,{evt:a}),d&&this._fire(y,{evt:a})),Kinetic.listenClickTap=!1}a.preventDefault&&a.preventDefault()},_touchstart:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition());Kinetic.listenClickTap=!0,b&&b.isListening()&&(this.tapStartShape=b,b._fireAndBubble(n,{evt:a}),b.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(z,{evt:a})},_touchend:function(a){this._setPointerPosition(a);var b=this.getIntersection(this.getPointerPosition()),c=!1;Kinetic.inDblClickWindow?(c=!0,Kinetic.inDblClickWindow=!1):Kinetic.inDblClickWindow=!0,setTimeout(function(){Kinetic.inDblClickWindow=!1},Kinetic.dblClickWindow),b&&b.isListening()&&(b._fireAndBubble(o,{evt:a}),Kinetic.listenClickTap&&b._id===this.tapStartShape._id&&(b._fireAndBubble(p,{evt:a}),c&&b._fireAndBubble(q,{evt:a})),b.isListening()&&a.preventDefault&&a.preventDefault()),Kinetic.listenClickTap&&(this._fire(A,{evt:a}),c&&this._fire(B,{evt:a})),Kinetic.listenClickTap=!1},_touchmove:function(a){this._setPointerPosition(a);var b=Kinetic.DD,c=this.getIntersection(this.getPointerPosition());c&&c.isListening()&&(c._fireAndBubble(r,{evt:a}),c.isListening()&&a.preventDefault&&a.preventDefault()),this._fire(C,{evt:a}),b&&b._drag(a)},_setPointerPosition:function(a){var b,c=this._getContentPosition(),d=a.offsetX,e=a.clientX,f=null,g=null;a=a?a:window.event,void 0!==a.touches?a.touches.length>0&&(b=a.touches[0],f=b.clientX-c.left,g=b.clientY-c.top):void 0!==d?(f=d,g=a.offsetY):"mozilla"===Kinetic.UA.browser?(f=a.layerX,g=a.layerY):void 0!==e&&c&&(f=e-c.left,g=a.clientY-c.top),null!==f&&null!==g&&(this.pointerPos={x:f,y:g})},_getContentPosition:function(){var a=this.content.getBoundingClientRect?this.content.getBoundingClientRect():{top:0,left:0};return{top:a.top,left:a.left}},_buildDOM:function(){var a=this.getContainer();if(!a){if(Kinetic.Util.isBrowser())throw"Stage has not container. But container is required";a=Kinetic.document.createElement(D)}a.innerHTML=K,this.content=Kinetic.document.createElement(D),this.content.style.position=E,this.content.style.display=F,this.content.className=G,this.content.setAttribute("role","presentation"),a.appendChild(this.content),this.bufferCanvas=new Kinetic.SceneCanvas({pixelRatio:1}),this.bufferHitCanvas=new Kinetic.HitCanvas,this._resizeDOM()},_onContent:function(a,b){var c,d,e=a.split(H),f=e.length;for(c=0;f>c;c++)d=e[c],this.content.addEventListener(d,b,!1)},cache:function(){Kinetic.Util.warn("Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.")},clearCache:function(){}}),Kinetic.Util.extend(Kinetic.Stage,Kinetic.Container),Kinetic.Factory.addGetter(Kinetic.Stage,"container"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Stage,"container")}(),function(){Kinetic.Util.addMethods(Kinetic.BaseLayer,{___init:function(a){this.nodeType="Layer",Kinetic.Container.call(this,a)},createPNGStream:function(){return this.canvas._canvas.createPNGStream()},getCanvas:function(){return this.canvas},getHitCanvas:function(){return this.hitCanvas},getContext:function(){return this.getCanvas().getContext()},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this},setZIndex:function(a){Kinetic.Node.prototype.setZIndex.call(this,a);var b=this.getStage();return b&&(b.content.removeChild(this.getCanvas()._canvas),ac;c++){if(f=d[c],b=this._getIntersection({x:a.x+f.x,y:a.y+f.y}),g=b.shape)return g;if(!b.antialiased)return null}},_getIntersection:function(b){var c,d,e=this.hitCanvas.context._context.getImageData(b.x,b.y,1,1).data,f=e[3];return 255===f?(c=Kinetic.Util._rgbToHex(e[0],e[1],e[2]),d=Kinetic.shapes[a+c],{shape:d}):f>0?{antialiased:!0}:{}},drawScene:function(a,d){var e=this.getLayer(),f=a||e&&e.getCanvas();return this._fire(b,{node:this}),this.getClearBeforeDraw()&&f.getContext().clear(),Kinetic.Container.prototype.drawScene.call(this,f,d),this._fire(c,{node:this}),this},_applyTransform:function(a,b,c){var d=a.getAbsoluteTransform(c).getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas;return c&&c.getClearBeforeDraw()&&c.getHitCanvas().getContext().clear(),Kinetic.Container.prototype.drawHit.call(this,d,b),this},clear:function(a){return this.getContext().clear(a),this.getHitCanvas().getContext().clear(a),this},setVisible:function(a){return Kinetic.Node.prototype.setVisible.call(this,a),a?(this.getCanvas()._canvas.style.display="block",this.hitCanvas._canvas.style.display="block"):(this.getCanvas()._canvas.style.display="none",this.hitCanvas._canvas.style.display="none"),this},enableHitGraph:function(){return this.setHitGraphEnabled(!0),this},disableHitGraph:function(){return this.setHitGraphEnabled(!1),this}}),Kinetic.Util.extend(Kinetic.Layer,Kinetic.BaseLayer),Kinetic.Factory.addGetterSetter(Kinetic.Layer,"hitGraphEnabled",!0),Kinetic.Collection.mapMethods(Kinetic.Layer)}(),function(){Kinetic.Util.addMethods(Kinetic.FastLayer,{____init:function(a){this.nodeType="Layer",this.canvas=new Kinetic.SceneCanvas,Kinetic.BaseLayer.call(this,a)},_validateAdd:function(a){var b=a.getType();"Shape"!==b&&Kinetic.Util.error("You may only add shapes to a fast layer.")},_setCanvasSize:function(a,b){this.canvas.setSize(a,b)},hitGraphEnabled:function(){return!1},getIntersection:function(){return null},drawScene:function(a){var b=this.getLayer(),c=a||b&&b.getCanvas();return this.getClearBeforeDraw()&&c.getContext().clear(),Kinetic.Container.prototype.drawScene.call(this,c),this},_applyTransform:function(a,b,c){if(!c||c._id!==this._id){var d=a.getTransform().getMatrix();b.transform(d[0],d[1],d[2],d[3],d[4],d[5])}},draw:function(){return this.drawScene(),this},clear:function(a){return this.getContext().clear(a),this},setVisible:function(a){return Kinetic.Node.prototype.setVisible.call(this,a),this.getCanvas()._canvas.style.display=a?"block":"none",this}}),Kinetic.Util.extend(Kinetic.FastLayer,Kinetic.BaseLayer),Kinetic.Collection.mapMethods(Kinetic.FastLayer)}(),function(){Kinetic.Util.addMethods(Kinetic.Group,{___init:function(a){this.nodeType="Group",Kinetic.Container.call(this,a)},_validateAdd:function(a){var b=a.getType();"Group"!==b&&"Shape"!==b&&Kinetic.Util.error("You may only add groups and shapes to groups.")}}),Kinetic.Util.extend(Kinetic.Group,Kinetic.Container),Kinetic.Collection.mapMethods(Kinetic.Group)}(),function(){Kinetic.Rect=function(a){this.___init(a)},Kinetic.Rect.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Rect",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=this.getCornerRadius(),c=this.getWidth(),d=this.getHeight();a.beginPath(),b?(a.moveTo(b,0),a.lineTo(c-b,0),a.arc(c-b,b,b,3*Math.PI/2,0,!1),a.lineTo(c,d-b),a.arc(c-b,d-b,b,0,Math.PI/2,!1),a.lineTo(b,d),a.arc(b,d-b,b,Math.PI/2,Math.PI,!1),a.lineTo(0,b),a.arc(b,b,b,Math.PI,3*Math.PI/2,!1)):a.rect(0,0,c,d),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Rect,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Rect,"cornerRadius",0),Kinetic.Collection.mapMethods(Kinetic.Rect)}(),function(){var a=2*Math.PI-1e-4,b="Circle";Kinetic.Circle=function(a){this.___init(a)},Kinetic.Circle.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getRadius(),0,a,!1),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadius()},getHeight:function(){return 2*this.getRadius()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.setRadius(a/2)},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.setRadius(a/2)}},Kinetic.Util.extend(Kinetic.Circle,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Circle,"radius",0),Kinetic.Collection.mapMethods(Kinetic.Circle)}(),function(){var a=2*Math.PI-1e-4,b="Ellipse";Kinetic.Ellipse=function(a){this.___init(a)},Kinetic.Ellipse.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className=b,this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){var c=this.getRadius(),d=c.x,e=c.y;b.beginPath(),b.save(),d!==e&&b.scale(1,e/d),b.arc(0,0,d,0,a,!1),b.restore(),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getRadius().x},getHeight:function(){return 2*this.getRadius().y},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.setRadius({x:a/2})},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.setRadius({y:a/2})}},Kinetic.Util.extend(Kinetic.Ellipse,Kinetic.Shape),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Ellipse,"radius",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Ellipse,"radiusX",0),Kinetic.Factory.addGetterSetter(Kinetic.Ellipse,"radiusY",0),Kinetic.Collection.mapMethods(Kinetic.Ellipse)}(),function(){var a=2*Math.PI-1e-4;Kinetic.Ring=function(a){this.___init(a)},Kinetic.Ring.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Ring",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(b){b.beginPath(),b.arc(0,0,this.getInnerRadius(),0,a,!1),b.moveTo(this.getOuterRadius(),0),b.arc(0,0,this.getOuterRadius(),a,0,!0),b.closePath(),b.fillStrokeShape(this)},getWidth:function(){return 2*this.getOuterRadius()},getHeight:function(){return 2*this.getOuterRadius()},setWidth:function(a){Kinetic.Node.prototype.setWidth.call(this,a),this.setOuterRadius(a/2)},setHeight:function(a){Kinetic.Node.prototype.setHeight.call(this,a),this.setOuterRadius(a/2)}},Kinetic.Util.extend(Kinetic.Ring,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Ring,"innerRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Ring,"outerRadius",0),Kinetic.Collection.mapMethods(Kinetic.Ring)}(),function(){Kinetic.Wedge=function(a){this.___init(a)},Kinetic.Wedge.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Wedge",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){a.beginPath(),a.arc(0,0,this.getRadius(),0,Kinetic.getAngle(this.getAngle()),this.getClockwise()),a.lineTo(0,0),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Wedge,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,"radius",0),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,"angle",0),Kinetic.Factory.addGetterSetter(Kinetic.Wedge,"clockwise",!1),Kinetic.Factory.backCompat(Kinetic.Wedge,{angleDeg:"angle",getAngleDeg:"getAngle",setAngleDeg:"setAngle"}),Kinetic.Collection.mapMethods(Kinetic.Wedge)}(),function(){Math.PI/180;Kinetic.Arc=function(a){this.___init(a)},Kinetic.Arc.prototype={___init:function(a){Kinetic.Shape.call(this,a),this.className="Arc",this.sceneFunc(this._sceneFunc)},_sceneFunc:function(a){var b=Kinetic.getAngle(this.angle()),c=this.clockwise();a.beginPath(),a.arc(0,0,this.getOuterRadius(),0,b,c),a.arc(0,0,this.getInnerRadius(),b,0,!c),a.closePath(),a.fillStrokeShape(this)}},Kinetic.Util.extend(Kinetic.Arc,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"innerRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"outerRadius",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"angle",0),Kinetic.Factory.addGetterSetter(Kinetic.Arc,"clockwise",!1),Kinetic.Collection.mapMethods(Kinetic.Arc)}(),function(){var a="Image";Kinetic.Image=function(a){this.___init(a)},Kinetic.Image.prototype={___init:function(b){Kinetic.Shape.call(this,b),this.className=a,this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasStroke()},_sceneFunc:function(a){var b,c,d,e,f=this.getWidth(),g=this.getHeight(),h=this.getImage();h&&(b=this.getCrop(),c=b.width,d=b.height,e=c&&d?[h,b.x,b.y,c,d,0,0,f,g]:[h,0,0,f,g]),a.beginPath(),a.rect(0,0,f,g),a.closePath(),a.fillStrokeShape(this),h&&a.drawImage.apply(a,e)},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},getWidth:function(){var a=this.getImage();return this.attrs.width||(a?a.width:0)},getHeight:function(){var a=this.getImage();return this.attrs.height||(a?a.height:0)}},Kinetic.Util.extend(Kinetic.Image,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Image,"image"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Image,"crop",["x","y","width","height"]),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropX",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropY",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropWidth",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropHeight",0),Kinetic.Collection.mapMethods(Kinetic.Image)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c="auto",d="center",e="Change.kinetic",f="2d",g="-",h="",i="left",j="text",k="Text",l="middle",m="normal",n="px ",o=" ",p="right",q="word",r="char",s="none",t=["fontFamily","fontSize","fontStyle","fontVariant","padding","align","lineHeight","text","width","height","wrap"],u=t.length,v=Kinetic.Util.createCanvasElement().getContext(f);Kinetic.Text=function(a){this.___init(a)},Kinetic.Text.prototype={___init:function(d){var f=this;void 0===d.width&&(d.width=c),void 0===d.height&&(d.height=c),Kinetic.Shape.call(this,d),this._fillFunc=a,this._strokeFunc=b,this.className=k;for(var g=0;u>g;g++)this.on(t[g]+e,f._setTextData);this._setTextData(),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b,c=this.getPadding(),e=this.getTextHeight(),f=this.getLineHeight()*e,g=this.textArr,h=g.length,j=this.getWidth();for(a.setAttr("font",this._getContextFont()),a.setAttr("textBaseline",l),a.setAttr("textAlign",i),a.save(),a.translate(c,0),a.translate(0,c+e/2),b=0;h>b;b++){var k=g[b],m=k.text,n=k.width;a.save(),this.getAlign()===p?a.translate(j-n-2*c,0):this.getAlign()===d&&a.translate((j-n-2*c)/2,0),this.partialText=m,a.fillStrokeShape(this),a.restore(),a.translate(0,f)}a.restore()},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},setText:function(a){var b=Kinetic.Util._isString(a)?a:a.toString();return this._setAttr(j,b),this},getWidth:function(){return this.attrs.width===c?this.getTextWidth()+2*this.getPadding():this.attrs.width},getHeight:function(){return this.attrs.height===c?this.getTextHeight()*this.textArr.length*this.getLineHeight()+2*this.getPadding():this.attrs.height},getTextWidth:function(){return this.textWidth},getTextHeight:function(){return this.textHeight},_getTextSize:function(a){var b,c=v,d=this.getFontSize();return c.save(),c.font=this._getContextFont(),b=c.measureText(a),c.restore(),{width:b.width,height:parseInt(d,10)}},_getContextFont:function(){return this.getFontStyle()+o+this.getFontVariant()+o+this.getFontSize()+n+this.getFontFamily()},_addTextLine:function(a,b){return this.textArr.push({text:a,width:b})},_getTextWidth:function(a){return v.measureText(a).width},_setTextData:function(){var a=this.getText().split("\n"),b=+this.getFontSize(),d=0,e=this.getLineHeight()*b,f=this.attrs.width,h=this.attrs.height,i=f!==c,j=h!==c,k=this.getPadding(),l=f-2*k,m=h-2*k,n=0,p=this.getWrap(),q=p!==s,t=p!==r&&q;this.textArr=[],v.save(),v.font=this._getContextFont(); diff --git a/src/Animation.js b/src/Animation.js index 96fe2611..c8f73376 100644 --- a/src/Animation.js +++ b/src/Animation.js @@ -43,13 +43,13 @@ * @param {Kinetic.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null. * Not specifying a node will result in no redraw. * @example - * // move a node to the right at 50 pixels / second
- * var velocity = 50;

+ * // move a node to the right at 50 pixels / second + * var velocity = 50; * - * var anim = new Kinetic.Animation(function(frame) {
- * var dist = velocity * (frame.timeDiff / 1000);
- * node.move(dist, 0);
- * }, layer);

+ * var anim = new Kinetic.Animation(function(frame) { + * var dist = velocity * (frame.timeDiff / 1000); + * node.move(dist, 0); + * }, layer); * * anim.start(); */ diff --git a/src/BaseLayer.js b/src/BaseLayer.js index d5664d74..89628e40 100644 --- a/src/BaseLayer.js +++ b/src/BaseLayer.js @@ -41,7 +41,7 @@ * @param {Number} [bounds.width] * @param {Number} [bounds.height] * @example - * layer.clear();
+ * layer.clear(); * layer.clear(0, 0, 100, 100); */ clear: function(bounds) { @@ -142,13 +142,13 @@ * @param {Boolean} clearBeforeDraw * @returns {Boolean} * @example - * // get clearBeforeDraw flag
- * var clearBeforeDraw = layer.clearBeforeDraw();

+ * // get clearBeforeDraw flag + * var clearBeforeDraw = layer.clearBeforeDraw(); * - * // disable clear before draw
- * layer.clearBeforeDraw(false);

+ * // disable clear before draw + * layer.clearBeforeDraw(false); * - * // enable clear before draw
+ * // enable clear before draw * layer.clearBeforeDraw(true); */ diff --git a/src/Container.js b/src/Container.js index 4da676ac..eeebaeea 100644 --- a/src/Container.js +++ b/src/Container.js @@ -11,12 +11,12 @@ * @param {Function} [filterFunc] filter function * @returns {Kinetic.Collection} * @example - * // get all children
- * var children = layer.getChildren();

+ * // get all children + * var children = layer.getChildren(); * - * // get only circles
- * var circles = layer.getChildren(function(node){
- * return node.getClassName() === 'Circle';
+ * // get only circles + * var circles = layer.getChildren(function(node){ + * return node.getClassName() === 'Circle'; * }); */ getChildren: function(predicate) { @@ -131,19 +131,19 @@ * @param {String} selector * @returns {Collection} * @example - * // select node with id foo
- * var node = stage.find('#foo');

+ * // select node with id foo + * var node = stage.find('#foo'); * - * // select nodes with name bar inside layer
- * var nodes = layer.find('.bar');

+ * // select nodes with name bar inside layer + * var nodes = layer.find('.bar'); * - * // select all groups inside layer
- * var nodes = layer.find('Group');

+ * // select all groups inside layer + * var nodes = layer.find('Group'); * - * // select all rectangles inside layer
- * var nodes = layer.find('Rect');

+ * // select all rectangles inside layer + * var nodes = layer.find('Rect'); * - * // select node with an id of foo or a name of bar inside layer
+ * // select node with an id of foo or a name of bar inside layer * var nodes = layer.find('#foo, .bar'); */ find: function(selector) { @@ -364,15 +364,15 @@ * @param {Number} clip.height * @returns {Object} * @example - * // get clip
- * var clip = container.clip();

+ * // get clip + * var clip = container.clip(); * - * // set clip
- * container.setClip({
- * x: 20,
- * y: 20,
- * width: 20,
- * height: 20
+ * // set clip + * container.setClip({ + * x: 20, + * y: 20, + * width: 20, + * height: 20 * }); */ @@ -385,10 +385,10 @@ * @param {Number} x * @returns {Number} * @example - * // get clip x
- * var clipX = container.clipX();

+ * // get clip x + * var clipX = container.clipX(); * - * // set clip x
+ * // set clip x * container.clipX(10); */ @@ -401,10 +401,10 @@ * @param {Number} y * @returns {Number} * @example - * // get clip y
- * var clipY = container.clipY();

+ * // get clip y + * var clipY = container.clipY(); * - * // set clip y
+ * // set clip y * container.clipY(10); */ @@ -417,10 +417,10 @@ * @param {Number} width * @returns {Number} * @example - * // get clip width
- * var clipWidth = container.clipWidth();

+ * // get clip width + * var clipWidth = container.clipWidth(); * - * // set clip width
+ * // set clip width * container.clipWidth(100); */ @@ -433,10 +433,10 @@ * @param {Number} height * @returns {Number} * @example - * // get clip height
- * var clipHeight = container.clipHeight();

+ * // get clip height + * var clipHeight = container.clipHeight(); * - * // set clip height
+ * // set clip height * container.clipHeight(100); */ diff --git a/src/DragAndDrop.js b/src/DragAndDrop.js index a179c3fb..ba47b935 100644 --- a/src/DragAndDrop.js +++ b/src/DragAndDrop.js @@ -246,15 +246,15 @@ * @param {Function} dragBoundFunc * @returns {Function} * @example - * // get drag bound function
- * var dragBoundFunc = node.dragBoundFunc();

+ * // get drag bound function + * var dragBoundFunc = node.dragBoundFunc(); * - * // create vertical drag and drop
- * node.dragBoundFunc(function(){
- * return {
- * x: this.getAbsolutePosition().x,
- * y: pos.y
- * };
+ * // create vertical drag and drop + * node.dragBoundFunc(function(){ + * return { + * x: this.getAbsolutePosition().x, + * y: pos.y + * }; * }); */ @@ -269,13 +269,13 @@ * @param {Boolean} draggable * @returns {Boolean} * @example - * // get draggable flag
- * var draggable = node.draggable();

+ * // get draggable flag + * var draggable = node.draggable(); * - * // enable drag and drop
- * node.draggable(true);

+ * // enable drag and drop + * node.draggable(true); * - * // disable drag and drop
+ * // disable drag and drop * node.draggable(false); */ diff --git a/src/FastLayer.js b/src/FastLayer.js index 0ed93f38..e3c32393 100644 --- a/src/FastLayer.js +++ b/src/FastLayer.js @@ -61,7 +61,7 @@ * @param {Number} [bounds.width] * @param {Number} [bounds.height] * @example - * layer.clear();
+ * layer.clear(); * layer.clear(0, 0, 100, 100); */ clear: function(bounds) { diff --git a/src/Global.js b/src/Global.js index ff4a53c3..2e158da7 100644 --- a/src/Global.js +++ b/src/Global.js @@ -108,19 +108,19 @@ var Kinetic = {}; * @@shapeParams * @@nodeParams * @example - * var customShape = new Kinetic.Shape({
- * x: 5,
- * y: 10,
- * fill: 'red',
- * // a Kinetic.Canvas renderer is passed into the drawFunc function
- * drawFunc: function(context) {
- * context.beginPath();
- * context.moveTo(200, 50);
- * context.lineTo(420, 80);
- * context.quadraticCurveTo(300, 100, 260, 170);
- * context.closePath();
- * context.fillStrokeShape(this);
- * }
+ * var customShape = new Kinetic.Shape({ + * x: 5, + * y: 10, + * fill: 'red', + * // a Kinetic.Canvas renderer is passed into the drawFunc function + * drawFunc: function(context) { + * context.beginPath(); + * context.moveTo(200, 50); + * context.lineTo(420, 80); + * context.quadraticCurveTo(300, 100, 260, 170); + * context.closePath(); + * context.fillStrokeShape(this); + * } *}); */ Shape: function(config) { @@ -151,10 +151,10 @@ var Kinetic = {}; * @@nodeParams * @@containerParams * @example - * var stage = new Kinetic.Stage({
- * width: 500,
- * height: 800,
- * container: 'containerId'
+ * var stage = new Kinetic.Stage({ + * width: 500, + * height: 800, + * container: 'containerId' * }); */ Stage: function(config) { diff --git a/src/Layer.js b/src/Layer.js index cb80670b..94731408 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -148,7 +148,7 @@ * @param {Number} [bounds.width] * @param {Number} [bounds.height] * @example - * layer.clear();
+ * layer.clear(); * layer.clear(0, 0, 100, 100); */ clear: function(bounds) { @@ -205,13 +205,13 @@ * @param {Boolean} enabled * @returns {Boolean} * @example - * // get hitGraphEnabled flag
- * var hitGraphEnabled = layer.hitGraphEnabled();

+ * // get hitGraphEnabled flag + * var hitGraphEnabled = layer.hitGraphEnabled(); * - * // disable hit graph
- * layer.hitGraphEnabled(false);

+ * // disable hit graph + * layer.hitGraphEnabled(false); * - * // enable hit graph
+ * // enable hit graph * layer.hitGraphEnabled(true); */ diff --git a/src/Node.js b/src/Node.js index ff7fc73f..57f6d5f7 100644 --- a/src/Node.js +++ b/src/Node.js @@ -120,27 +120,27 @@ * region for debugging purposes * @returns {Kinetic.Node} * @example - * // cache a shape with the x,y position of the bounding box at the center and
- * // the width and height of the bounding box equal to the width and height of
- * // the shape obtained from shape.width() and shape.height()
- * image.cache();

+ * // cache a shape with the x,y position of the bounding box at the center and + * // the width and height of the bounding box equal to the width and height of + * // the shape obtained from shape.width() and shape.height() + * image.cache(); * - * // cache a node and define the bounding box position and size
- * node.cache({
- * x: -30,
- * y: -30,
- * width: 100,
- * height: 200
- * });

+ * // cache a node and define the bounding box position and size + * node.cache({ + * x: -30, + * y: -30, + * width: 100, + * height: 200 + * }); * - * // cache a node and draw a red border around the bounding box
- * // for debugging purposes
- * node.cache({
- * x: -30,
- * y: -30,
- * width: 100,
- * height: 200,
- * drawBorder: true
+ * // cache a node and draw a red border around the bounding box + * // for debugging purposes + * node.cache({ + * x: -30, + * y: -30, + * width: 100, + * height: 200, + * drawBorder: true * }); */ cache: function(config) { @@ -282,45 +282,45 @@ * @param {Function} handler The handler function is passed an event object * @returns {Kinetic.Node} * @example - * // add click listener
- * node.on('click', function() {
- * console.log('you clicked me!');
- * });

+ * // add click listener + * node.on('click', function() { + * console.log('you clicked me!'); + * }); * - * // get the target node
- * node.on('click', function(evt) {
- * console.log(evt.target);
- * });

+ * // get the target node + * node.on('click', function(evt) { + * console.log(evt.target); + * }); * - * // stop event propagation
- * node.on('click', function(evt) {
- * evt.cancelBubble = true;
- * });

+ * // stop event propagation + * node.on('click', function(evt) { + * evt.cancelBubble = true; + * }); * - * // bind multiple listeners
- * node.on('click touchstart', function() {
- * console.log('you clicked/touched me!');
- * });

+ * // bind multiple listeners + * node.on('click touchstart', function() { + * console.log('you clicked/touched me!'); + * }); * - * // namespace listener
- * node.on('click.foo', function() {
- * console.log('you clicked/touched me!');
- * });

+ * // namespace listener + * node.on('click.foo', function() { + * console.log('you clicked/touched me!'); + * }); * - * // get the event type
- * node.on('click tap', function(evt) {
- * var eventType = evt.type;
- * });

+ * // get the event type + * node.on('click tap', function(evt) { + * var eventType = evt.type; + * }); * - * // get native event object
- * node.on('click tap', function(evt) {
- * var nativeEvent = evt.evt;
- * });

+ * // get native event object + * node.on('click tap', function(evt) { + * var nativeEvent = evt.evt; + * }); * - * // for change events, get the old and new val
- * node.on('xChange', function(evt) {
- * var oldVal = evt.oldVal;
- * var newVal = evt.newVal;
+ * // for change events, get the old and new val + * node.on('xChange', function(evt) { + * var oldVal = evt.oldVal; + * var newVal = evt.newVal; * }); */ on: function(evtStr, handler) { @@ -375,13 +375,13 @@ * @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar' * @returns {Kinetic.Node} * @example - * // remove listener
- * node.off('click');

+ * // remove listener + * node.off('click'); * - * // remove multiple listeners
- * node.off('click touchstart');

+ * // remove multiple listeners + * node.off('click touchstart'); * - * // remove listener by name
+ * // remove listener by name * node.off('click.foo'); */ off: function(evtStr) { @@ -520,10 +520,10 @@ * @param {Object} config object containing key value pairs * @returns {Kinetic.Node} * @example - * node.setAttrs({
- * x: 5,
- * fill: 'red'
- * });
+ * node.setAttrs({ + * x: 5, + * fill: 'red' + * }); */ setAttrs: function(config) { var key, method; @@ -708,7 +708,7 @@ return index; }, /** - * get node depth in node tree. Returns an integer.

+ * get node depth in node tree. Returns an integer. * e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always * be >= 2 * @method @@ -835,10 +835,10 @@ * @param {Number} change.y * @returns {Kinetic.Node} * @example - * // move node in x direction by 1px and y direction by 2px
- * node.move({
- * x: 1,
- * y: 2)
+ * // move node in x direction by 1px and y direction by 2px + * node.move({ + * x: 1, + * y: 2) * }); */ move: function(change) { @@ -1013,7 +1013,7 @@ * @param {Container} newContainer * @returns {Kinetic.Node} * @example - * // move node from current layer into layer2
+ * // move node from current layer into layer2 * node.moveTo(layer2); */ moveTo: function(newContainer) { @@ -1110,18 +1110,18 @@ * not bubbling. Setting the value to true will result in the event bubbling. * @returns {Kinetic.Node} * @example - * // manually fire click event
- * node.fire('click');

+ * // manually fire click event + * node.fire('click'); * - * // fire custom event
- * node.fire('foo');

+ * // fire custom event + * node.fire('foo'); * - * // fire custom event with custom event object
- * node.fire('foo', {
- * bar: 10
- * });

+ * // fire custom event with custom event object + * node.fire('foo', { + * bar: 10 + * }); * - * // fire click event that bubbles
+ * // fire click event that bubbles * node.fire('click', null, true); */ fire: function(eventType, evt, bubble) { @@ -1218,12 +1218,12 @@ * @param {Object} attrs override attrs * @returns {Kinetic.Node} * @example - * // simple clone
- * var clone = node.clone();

+ * // simple clone + * var clone = node.clone(); * - * // clone a node and override the x position
- * var clone = rect.clone({
- * x: 5
+ * // clone a node and override the x position + * var clone = rect.clone({ + * x: 5 * }); */ clone: function(obj) { @@ -1325,10 +1325,10 @@ * you can specify the quality from 0 to 1, where 0 is very poor quality and 1 * is very high quality * @example - * var image = node.toImage({
- * callback: function(img) {
- * // do stuff with img
- * }
+ * var image = node.toImage({ + * callback: function(img) { + * // do stuff with img + * } * }); */ toImage: function(config) { @@ -1597,13 +1597,13 @@ * @param {Nubmer} pos.y * @returns {Object} * @example - * // get position
- * var position = node.position();

+ * // get position + * var position = node.position(); * - * // set position
- * node.position({
- * x: 5
- * y: 10
+ * // set position + * node.position({ + * x: 5 + * y: 10 * }); */ @@ -1617,10 +1617,10 @@ * @param {Number} x * @returns {Object} * @example - * // get x
- * var x = node.x();

+ * // get x + * var x = node.x(); * - * // set x
+ * // set x * node.x(5); */ @@ -1634,10 +1634,10 @@ * @param {Number} y * @returns {Integer} * @example - * // get y
- * var y = node.y();

+ * // get y + * var y = node.y(); * - * // set y
+ * // set y * node.y(5); */ @@ -1653,10 +1653,10 @@ * @param {Object} opacity * @returns {Number} * @example - * // get opacity
- * var opacity = node.opacity();

+ * // get opacity + * var opacity = node.opacity(); * - * // set opacity
+ * // set opacity * node.opacity(0.5); */ @@ -1671,10 +1671,10 @@ * @param {String} name * @returns {String} * @example - * // get name
- * var name = node.name();

+ * // get name + * var name = node.name(); * - * // set name
+ * // set name * node.name('foo'); */ @@ -1689,10 +1689,10 @@ * @param {String} id * @returns {String} * @example - * // get id
- * var name = node.id();

+ * // get id + * var name = node.id(); * - * // set id
+ * // set id * node.id('foo'); */ @@ -1706,10 +1706,10 @@ * @param {Number} rotation * @returns {Number} * @example - * // get rotation in degrees
- * var rotation = node.rotation();

+ * // get rotation in degrees + * var rotation = node.rotation(); * - * // set rotation in degrees
+ * // set rotation in degrees * node.rotation(45); */ @@ -1725,13 +1725,13 @@ * @memberof Kinetic.Node.prototype * @returns {Object} * @example - * // get scale
- * var scale = node.scale();

+ * // get scale + * var scale = node.scale(); * - * // set scale
- * shape.scale({
- * x: 2
- * y: 3
+ * // set scale + * shape.scale({ + * x: 2 + * y: 3 * }); */ @@ -1745,10 +1745,10 @@ * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get scale x
- * var scaleX = node.scaleX();

+ * // get scale x + * var scaleX = node.scaleX(); * - * // set scale x
+ * // set scale x * node.scaleX(2); */ @@ -1762,10 +1762,10 @@ * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get scale y
- * var scaleY = node.scaleY();

+ * // get scale y + * var scaleY = node.scaleY(); * - * // set scale y
+ * // set scale y * node.scaleY(2); */ @@ -1781,12 +1781,12 @@ * @memberof Kinetic.Node.prototype * @returns {Object} * @example - * // get skew
- * var skew = node.skew();

+ * // get skew + * var skew = node.skew(); * - * // set skew
- * node.skew({
- * x: 20
+ * // set skew + * node.skew({ + * x: 20 * y: 10 * }); */ @@ -1801,10 +1801,10 @@ * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get skew x
- * var skewX = node.skewX();

+ * // get skew x + * var skewX = node.skewX(); * - * // set skew x
+ * // set skew x * node.skewX(3); */ @@ -1818,10 +1818,10 @@ * @memberof Kinetic.Node.prototype * @returns {Number} * @example - * // get skew y
- * var skewY = node.skewY();

+ * // get skew y + * var skewY = node.skewY(); * - * // set skew y
+ * // set skew y * node.skewY(3); */ @@ -1836,13 +1836,13 @@ * @param {Number} offset.y * @returns {Object} * @example - * // get offset
- * var offset = node.offset();

+ * // get offset + * var offset = node.offset(); * - * // set offset
- * node.offset({
- * x: 20
- * y: 10
+ * // set offset + * node.offset({ + * x: 20 + * y: 10 * }); */ @@ -1855,10 +1855,10 @@ * @param {Number} x * @returns {Number} * @example - * // get offset x
- * var offsetX = node.offsetX();

+ * // get offset x + * var offsetX = node.offsetX(); * - * // set offset x
+ * // set offset x * node.offsetX(3); */ @@ -1871,13 +1871,13 @@ * @param {Number} distance * @returns {Number} * @example - * // get drag distance
- * var dragDistance = node.dragDistance();

+ * // get drag distance + * var dragDistance = node.dragDistance(); * - * // set distance
- * // node starts dragging only if pointer moved more then 3 pixels
- * node.dragDistance(3);
- * // or set globally
+ * // set distance + * // node starts dragging only if pointer moved more then 3 pixels + * node.dragDistance(3); + * // or set globally * Kinetic.dragDistance = 3; */ @@ -1892,10 +1892,10 @@ * @param {Number} y * @returns {Number} * @example - * // get offset y
- * var offsetY = node.offsetY();

+ * // get offset y + * var offsetY = node.offsetY(); * - * // set offset y
+ * // set offset y * node.offsetY(3); */ @@ -1909,10 +1909,10 @@ * @param {Number} width * @returns {Number} * @example - * // get width
- * var width = node.width();

+ * // get width + * var width = node.width(); * - * // set width
+ * // set width * node.width(100); */ @@ -1926,10 +1926,10 @@ * @param {Number} height * @returns {Number} * @example - * // get height
- * var height = node.height();

+ * // get height + * var height = node.height(); * - * // set height
+ * // set height * node.height(100); */ @@ -1943,16 +1943,16 @@ * @param {Boolean|String} listening Can be "inherit", true, or false. The default is "inherit". * @returns {Boolean|String} * @example - * // get listening attr
- * var listening = node.listening();

+ * // get listening attr + * var listening = node.listening(); * - * // stop listening for events
- * node.listening(false);

+ * // stop listening for events + * node.listening(false); * - * // listen for events
- * node.listening(true);

+ * // listen for events + * node.listening(true); * - * // listen to events according to the parent
+ * // listen to events according to the parent * node.listening('inherit'); */ @@ -1965,19 +1965,19 @@ * @param {Array} filters array of filters * @returns {Array} * @example - * // get filters
- * var filters = node.filters();

+ * // get filters + * var filters = node.filters(); * - * // set a single filter
- * node.cache();
- * node.filters([Kinetic.Filters.Blur]);

+ * // set a single filter + * node.cache(); + * node.filters([Kinetic.Filters.Blur]); * - * // set multiple filters
- * node.cache();
- * node.filters([
- * Kinetic.Filters.Blur,
- * Kinetic.Filters.Sepia,
- * Kinetic.Filters.Invert
+ * // set multiple filters + * node.cache(); + * node.filters([ + * Kinetic.Filters.Blur, + * Kinetic.Filters.Sepia, + * Kinetic.Filters.Invert * ]); */ @@ -1992,16 +1992,16 @@ * @param {Boolean|String} visible * @returns {Boolean|String} * @example - * // get visible attr
- * var visible = node.visible();

+ * // get visible attr + * var visible = node.visible(); * - * // make invisible
- * node.visible(false);

+ * // make invisible + * node.visible(false); * - * // make visible
- * node.visible(true);

+ * // make visible + * node.visible(true); * - * // make visible according to the parent
+ * // make visible according to the parent * node.visible('inherit'); */ @@ -2016,10 +2016,10 @@ * @param {String} enabled * @returns {String} * @example - * // enable position transform only to improve draw performance
- * node.transformsEnabled('position');

+ * // enable position transform only to improve draw performance + * node.transformsEnabled('position'); * - * // enable all transforms
+ * // enable all transforms * node.transformsEnabled('all'); */ @@ -2035,15 +2035,15 @@ * @param {Number} size.height * @returns {Object} * @example - * // get node size
- * var size = node.size();
- * var x = size.x;
- * var y = size.y;

+ * // get node size + * var size = node.size(); + * var x = size.x; + * var y = size.y; * - * // set size
- * node.size({
- * width: 100,
- * height: 200
+ * // set size + * node.size({ + * width: 100, + * height: 200 * }); */ Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'size'); diff --git a/src/Shape.js b/src/Shape.js index b4f19855..19b7f0ac 100644 --- a/src/Shape.js +++ b/src/Shape.js @@ -283,19 +283,19 @@ * @param {String} color * @returns {String} * @example - * // get stroke color
- * var stroke = shape.stroke();

+ * // get stroke color + * var stroke = shape.stroke(); * - * // set stroke color with color string
- * shape.stroke('green');

+ * // set stroke color with color string + * shape.stroke('green'); * - * // set stroke color with hex
- * shape.stroke('#00ff00');

+ * // set stroke color with hex + * shape.stroke('#00ff00'); * - * // set stroke color with rgb
- * shape.stroke('rgb(0,255,0)');

+ * // set stroke color with rgb + * shape.stroke('rgb(0,255,0)'); * - * // set stroke color with rgba and make it 50% opaque
+ * // set stroke color with rgba and make it 50% opaque * shape.stroke('rgba(0,255,0,0.5'); */ @@ -309,10 +309,10 @@ * @param {Integer} red * @returns {Integer} * @example - * // get stroke red component
- * var strokeRed = shape.strokeRed();

+ * // get stroke red component + * var strokeRed = shape.strokeRed(); * - * // set stroke red component
+ * // set stroke red component * shape.strokeRed(0); */ @@ -326,10 +326,10 @@ * @param {Integer} green * @returns {Integer} * @example - * // get stroke green component
- * var strokeGreen = shape.strokeGreen();

+ * // get stroke green component + * var strokeGreen = shape.strokeGreen(); * - * // set stroke green component
+ * // set stroke green component * shape.strokeGreen(255); */ @@ -343,10 +343,10 @@ * @param {Integer} blue * @returns {Integer} * @example - * // get stroke blue component
- * var strokeBlue = shape.strokeBlue();

+ * // get stroke blue component + * var strokeBlue = shape.strokeBlue(); * - * // set stroke blue component
+ * // set stroke blue component * shape.strokeBlue(0); */ @@ -361,10 +361,10 @@ * @param {Number} alpha * @returns {Number} * @example - * // get stroke alpha component
- * var strokeAlpha = shape.strokeAlpha();

+ * // get stroke alpha component + * var strokeAlpha = shape.strokeAlpha(); * - * // set stroke alpha component
+ * // set stroke alpha component * shape.strokeAlpha(0.5); */ @@ -378,10 +378,10 @@ * @param {Number} strokeWidth * @returns {Number} * @example - * // get stroke width
- * var strokeWidth = shape.strokeWidth();

+ * // get stroke width + * var strokeWidth = shape.strokeWidth(); * - * // set stroke width
+ * // set stroke width * shape.strokeWidth(); */ @@ -396,10 +396,10 @@ * @param {String} lineJoin * @returns {String} * @example - * // get line join
- * var lineJoin = shape.lineJoin();

+ * // get line join + * var lineJoin = shape.lineJoin(); * - * // set line join
+ * // set line join * shape.lineJoin('round'); */ @@ -413,10 +413,10 @@ * @param {String} lineCap * @returns {String} * @example - * // get line cap
- * var lineCap = shape.lineCap();

+ * // get line cap + * var lineCap = shape.lineCap(); * - * // set line cap
+ * // set line cap * shape.lineCap('round'); */ @@ -430,15 +430,15 @@ * @param {Function} drawFunc drawing function * @returns {Function} * @example - * // get scene draw function
- * var sceneFunc = shape.sceneFunc();

+ * // get scene draw function + * var sceneFunc = shape.sceneFunc(); * - * // set scene draw function
- * shape.sceneFunc(function(context) {
- * context.beginPath();
- * context.rect(0, 0, this.width(), this.height());
- * context.closePath();
- * context.fillStrokeShape(this);
+ * // set scene draw function + * shape.sceneFunc(function(context) { + * context.beginPath(); + * context.rect(0, 0, this.width(), this.height()); + * context.closePath(); + * context.fillStrokeShape(this); * }); */ @@ -452,15 +452,15 @@ * @param {Function} drawFunc drawing function * @returns {Function} * @example - * // get hit draw function
- * var hitFunc = shape.hitFunc();

+ * // get hit draw function + * var hitFunc = shape.hitFunc(); * - * // set hit draw function
- * shape.hitFunc(function(context) {
- * context.beginPath();
- * context.rect(0, 0, this.width(), this.height());
- * context.closePath();
- * context.fillStrokeShape(this);
+ * // set hit draw function + * shape.hitFunc(function(context) { + * context.beginPath(); + * context.rect(0, 0, this.width(), this.height()); + * context.closePath(); + * context.fillStrokeShape(this); * }); */ @@ -474,12 +474,12 @@ * @param {Array} dash * @returns {Array} * @example - * // apply dashed stroke that is 10px long and 5 pixels apart
- * line.dash([10, 5]);

+ * // apply dashed stroke that is 10px long and 5 pixels apart + * line.dash([10, 5]); * - * // apply dashed stroke that is made up of alternating dashed
- * // lines that are 10px long and 20px apart, and dots that have
- * // a radius of 5px and are 20px apart
+ * // apply dashed stroke that is made up of alternating dashed + * // lines that are 10px long and 20px apart, and dots that have + * // a radius of 5px and are 20px apart * line.dash([10, 20, 0.001, 20]); */ @@ -494,19 +494,19 @@ * @param {String} color * @returns {String} * @example - * // get shadow color
- * var shadow = shape.shadowColor();

+ * // get shadow color + * var shadow = shape.shadowColor(); * - * // set shadow color with color string
- * shape.shadowColor('green');

+ * // set shadow color with color string + * shape.shadowColor('green'); * - * // set shadow color with hex
- * shape.shadowColor('#00ff00');

+ * // set shadow color with hex + * shape.shadowColor('#00ff00'); * - * // set shadow color with rgb
- * shape.shadowColor('rgb(0,255,0)');

+ * // set shadow color with rgb + * shape.shadowColor('rgb(0,255,0)'); * - * // set shadow color with rgba and make it 50% opaque
+ * // set shadow color with rgba and make it 50% opaque * shape.shadowColor('rgba(0,255,0,0.5'); */ @@ -520,10 +520,10 @@ * @param {Integer} red * @returns {Integer} * @example - * // get shadow red component
- * var shadowRed = shape.shadowRed();

+ * // get shadow red component + * var shadowRed = shape.shadowRed(); * - * // set shadow red component
+ * // set shadow red component * shape.shadowRed(0); */ @@ -537,10 +537,10 @@ * @param {Integer} green * @returns {Integer} * @example - * // get shadow green component
- * var shadowGreen = shape.shadowGreen();

+ * // get shadow green component + * var shadowGreen = shape.shadowGreen(); * - * // set shadow green component
+ * // set shadow green component * shape.shadowGreen(255); */ @@ -554,10 +554,10 @@ * @param {Integer} blue * @returns {Integer} * @example - * // get shadow blue component
- * var shadowBlue = shape.shadowBlue();

+ * // get shadow blue component + * var shadowBlue = shape.shadowBlue(); * - * // set shadow blue component
+ * // set shadow blue component * shape.shadowBlue(0); */ @@ -572,10 +572,10 @@ * @param {Number} alpha * @returns {Number} * @example - * // get shadow alpha component
- * var shadowAlpha = shape.shadowAlpha();

+ * // get shadow alpha component + * var shadowAlpha = shape.shadowAlpha(); * - * // set shadow alpha component
+ * // set shadow alpha component * shape.shadowAlpha(0.5); */ @@ -589,10 +589,10 @@ * @param {Number} blur * @returns {Number} * @example - * // get shadow blur
- * var shadowBlur = shape.shadowBlur();

+ * // get shadow blur + * var shadowBlur = shape.shadowBlur(); * - * // set shadow blur
+ * // set shadow blur * shape.shadowBlur(10); */ @@ -606,10 +606,10 @@ * @param {Number} opacity * @returns {Number} * @example - * // get shadow opacity
- * var shadowOpacity = shape.shadowOpacity();

+ * // get shadow opacity + * var shadowOpacity = shape.shadowOpacity(); * - * // set shadow opacity
+ * // set shadow opacity * shape.shadowOpacity(0.5); */ @@ -625,13 +625,13 @@ * @param {Number} offset.y * @returns {Object} * @example - * // get shadow offset
- * var shadowOffset = shape.shadowOffset();

+ * // get shadow offset + * var shadowOffset = shape.shadowOffset(); * - * // set shadow offset
- * shape.shadowOffset({
- * x: 20
- * y: 10
+ * // set shadow offset + * shape.shadowOffset({ + * x: 20 + * y: 10 * }); */ @@ -645,10 +645,10 @@ * @param {Number} x * @returns {Number} * @example - * // get shadow offset x
- * var shadowOffsetX = shape.shadowOffsetX();

+ * // get shadow offset x + * var shadowOffsetX = shape.shadowOffsetX(); * - * // set shadow offset x
+ * // set shadow offset x * shape.shadowOffsetX(5); */ @@ -662,10 +662,10 @@ * @param {Number} y * @returns {Number} * @example - * // get shadow offset y
- * var shadowOffsetY = shape.shadowOffsetY();

+ * // get shadow offset y + * var shadowOffsetY = shape.shadowOffsetY(); * - * // set shadow offset y
+ * // set shadow offset y * shape.shadowOffsetY(5); */ @@ -679,14 +679,14 @@ * @param {Image} image object * @returns {Image} * @example - * // get fill pattern image
- * var fillPatternImage = shape.fillPatternImage();

+ * // get fill pattern image + * var fillPatternImage = shape.fillPatternImage(); * - * // set fill pattern image
- * var imageObj = new Image();
- * imageObj.onload = function() {
- * shape.fillPatternImage(imageObj);
- * };
+ * // set fill pattern image + * var imageObj = new Image(); + * imageObj.onload = function() { + * shape.fillPatternImage(imageObj); + * }; * imageObj.src = 'path/to/image/jpg'; */ @@ -700,19 +700,19 @@ * @param {String} color * @returns {String} * @example - * // get fill color
- * var fill = shape.fill();

+ * // get fill color + * var fill = shape.fill(); * - * // set fill color with color string
- * shape.fill('green');

+ * // set fill color with color string + * shape.fill('green'); * - * // set fill color with hex
- * shape.fill('#00ff00');

+ * // set fill color with hex + * shape.fill('#00ff00'); * - * // set fill color with rgb
- * shape.fill('rgb(0,255,0)');

+ * // set fill color with rgb + * shape.fill('rgb(0,255,0)'); * - * // set fill color with rgba and make it 50% opaque
+ * // set fill color with rgba and make it 50% opaque * shape.fill('rgba(0,255,0,0.5'); */ @@ -726,10 +726,10 @@ * @param {Integer} red * @returns {Integer} * @example - * // get fill red component
- * var fillRed = shape.fillRed();

+ * // get fill red component + * var fillRed = shape.fillRed(); * - * // set fill red component
+ * // set fill red component * shape.fillRed(0); */ @@ -743,10 +743,10 @@ * @param {Integer} green * @returns {Integer} * @example - * // get fill green component
- * var fillGreen = shape.fillGreen();

+ * // get fill green component + * var fillGreen = shape.fillGreen(); * - * // set fill green component
+ * // set fill green component * shape.fillGreen(255); */ @@ -760,10 +760,10 @@ * @param {Integer} blue * @returns {Integer} * @example - * // get fill blue component
- * var fillBlue = shape.fillBlue();

+ * // get fill blue component + * var fillBlue = shape.fillBlue(); * - * // set fill blue component
+ * // set fill blue component * shape.fillBlue(0); */ @@ -778,10 +778,10 @@ * @param {Number} alpha * @returns {Number} * @example - * // get fill alpha component
- * var fillAlpha = shape.fillAlpha();

+ * // get fill alpha component + * var fillAlpha = shape.fillAlpha(); * - * // set fill alpha component
+ * // set fill alpha component * shape.fillAlpha(0.5); */ @@ -796,10 +796,10 @@ * @param {Number} x * @returns {Number} * @example - * // get fill pattern x
- * var fillPatternX = shape.fillPatternX();

+ * // get fill pattern x + * var fillPatternX = shape.fillPatternX(); * - * // set fill pattern x
+ * // set fill pattern x * shape.fillPatternX(20); */ @@ -813,10 +813,10 @@ * @param {Number} y * @returns {Number} * @example - * // get fill pattern y
- * var fillPatternY = shape.fillPatternY();

+ * // get fill pattern y + * var fillPatternY = shape.fillPatternY(); * - * // set fill pattern y
+ * // set fill pattern y * shape.fillPatternY(20); */ @@ -830,11 +830,11 @@ * @param {Array} colorStops * @returns {Array} colorStops * @example - * // get fill linear gradient color stops
- * var colorStops = shape.fillLinearGradientColorStops();

+ * // get fill linear gradient color stops + * var colorStops = shape.fillLinearGradientColorStops(); * - * // create a linear gradient that starts with red, changes to blue
- * // halfway through, and then changes to green
+ * // create a linear gradient that starts with red, changes to blue + * // halfway through, and then changes to green * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); */ @@ -848,10 +848,10 @@ * @param {Number} radius * @returns {Number} * @example - * // get radial gradient start radius
- * var startRadius = shape.fillRadialGradientStartRadius();

+ * // get radial gradient start radius + * var startRadius = shape.fillRadialGradientStartRadius(); * - * // set radial gradient start radius
+ * // set radial gradient start radius * shape.fillRadialGradientStartRadius(0); */ @@ -865,10 +865,10 @@ * @param {Number} radius * @returns {Number} * @example - * // get radial gradient end radius
- * var endRadius = shape.fillRadialGradientEndRadius();

+ * // get radial gradient end radius + * var endRadius = shape.fillRadialGradientEndRadius(); * - * // set radial gradient end radius
+ * // set radial gradient end radius * shape.fillRadialGradientEndRadius(100); */ @@ -882,11 +882,11 @@ * @param {Number} colorStops * @returns {Array} * @example - * // get fill radial gradient color stops
- * var colorStops = shape.fillRadialGradientColorStops();

+ * // get fill radial gradient color stops + * var colorStops = shape.fillRadialGradientColorStops(); * - * // create a radial gradient that starts with red, changes to blue
- * // halfway through, and then changes to green
+ * // create a radial gradient that starts with red, changes to blue + * // halfway through, and then changes to green * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green'); */ @@ -900,13 +900,13 @@ * @param {String} repeat * @returns {String} * @example - * // get fill pattern repeat
- * var repeat = shape.fillPatternRepeat();

+ * // get fill pattern repeat + * var repeat = shape.fillPatternRepeat(); * - * // repeat pattern in x direction only
- * shape.fillPatternRepeat('repeat-x');

+ * // repeat pattern in x direction only + * shape.fillPatternRepeat('repeat-x'); * - * // do not repeat the pattern
+ * // do not repeat the pattern * shape.fillPatternRepeat('no repeat'); */ @@ -920,13 +920,13 @@ * @param {Boolean} enabled * @returns {Boolean} * @example - * // get fill enabled flag
- * var fillEnabled = shape.fillEnabled();

+ * // get fill enabled flag + * var fillEnabled = shape.fillEnabled(); * - * // disable fill
- * shape.fillEnabled(false);

+ * // disable fill + * shape.fillEnabled(false); * - * // enable fill
+ * // enable fill * shape.fillEnabled(true); */ @@ -940,13 +940,13 @@ * @param {Boolean} enabled * @returns {Boolean} * @example - * // get stroke enabled flag
- * var strokeEnabled = shape.strokeEnabled();

+ * // get stroke enabled flag + * var strokeEnabled = shape.strokeEnabled(); * - * // disable stroke
- * shape.strokeEnabled(false);

+ * // disable stroke + * shape.strokeEnabled(false); * - * // enable stroke
+ * // enable stroke * shape.strokeEnabled(true); */ @@ -960,13 +960,13 @@ * @param {Boolean} enabled * @returns {Boolean} * @example - * // get shadow enabled flag
- * var shadowEnabled = shape.shadowEnabled();

+ * // get shadow enabled flag + * var shadowEnabled = shape.shadowEnabled(); * - * // disable shadow
- * shape.shadowEnabled(false);

+ * // disable shadow + * shape.shadowEnabled(false); * - * // enable shadow
+ * // enable shadow * shape.shadowEnabled(true); */ @@ -980,13 +980,13 @@ * @param {Boolean} enabled * @returns {Boolean} * @example - * // get dash enabled flag
- * var dashEnabled = shape.dashEnabled();

+ * // get dash enabled flag + * var dashEnabled = shape.dashEnabled(); * - * // disable dash
- * shape.dashEnabled(false);

+ * // disable dash + * shape.dashEnabled(false); * - * // enable dash
+ * // enable dash * shape.dashEnabled(true); */ @@ -1000,13 +1000,13 @@ * @param {Boolean} enabled * @returns {Boolean} * @example - * // get stroke scale enabled flag
- * var strokeScaleEnabled = shape.strokeScaleEnabled();

+ * // get stroke scale enabled flag + * var strokeScaleEnabled = shape.strokeScaleEnabled(); * - * // disable stroke scale
- * shape.strokeScaleEnabled(false);

+ * // disable stroke scale + * shape.strokeScaleEnabled(false); * - * // enable stroke scale
+ * // enable stroke scale * shape.strokeScaleEnabled(true); */ @@ -1021,10 +1021,10 @@ * @param {String} priority * @returns {String} * @example - * // get fill priority
- * var fillPriority = shape.fillPriority();

+ * // get fill priority + * var fillPriority = shape.fillPriority(); * - * // set fill priority
+ * // set fill priority * shape.fillPriority('linear-gradient'); */ @@ -1040,13 +1040,13 @@ * @param {Number} offset.y * @returns {Object} * @example - * // get fill pattern offset
- * var patternOffset = shape.fillPatternOffset();

+ * // get fill pattern offset + * var patternOffset = shape.fillPatternOffset(); * - * // set fill pattern offset
- * shape.fillPatternOffset({
- * x: 20
- * y: 10
+ * // set fill pattern offset + * shape.fillPatternOffset({ + * x: 20 + * y: 10 * }); */ @@ -1060,10 +1060,10 @@ * @param {Number} x * @returns {Number} * @example - * // get fill pattern offset x
- * var patternOffsetX = shape.fillPatternOffsetX();

+ * // get fill pattern offset x + * var patternOffsetX = shape.fillPatternOffsetX(); * - * // set fill pattern offset x
+ * // set fill pattern offset x * shape.fillPatternOffsetX(20); */ @@ -1076,10 +1076,10 @@ * @param {Number} y * @returns {Number} * @example - * // get fill pattern offset y
- * var patternOffsetY = shape.fillPatternOffsetY();

+ * // get fill pattern offset y + * var patternOffsetY = shape.fillPatternOffsetY(); * - * // set fill pattern offset y
+ * // set fill pattern offset y * shape.fillPatternOffsetY(10); */ @@ -1095,13 +1095,13 @@ * @param {Number} scale.y * @returns {Object} * @example - * // get fill pattern scale
- * var patternScale = shape.fillPatternScale();

+ * // get fill pattern scale + * var patternScale = shape.fillPatternScale(); * - * // set fill pattern scale
- * shape.fillPatternScale({
- * x: 2
- * y: 2
+ * // set fill pattern scale + * shape.fillPatternScale({ + * x: 2 + * y: 2 * }); */ @@ -1115,10 +1115,10 @@ * @param {Number} x * @returns {Number} * @example - * // get fill pattern scale x
- * var patternScaleX = shape.fillPatternScaleX();

+ * // get fill pattern scale x + * var patternScaleX = shape.fillPatternScaleX(); * - * // set fill pattern scale x
+ * // set fill pattern scale x * shape.fillPatternScaleX(2); */ @@ -1131,10 +1131,10 @@ * @param {Number} y * @returns {Number} * @example - * // get fill pattern scale y
- * var patternScaleY = shape.fillPatternScaleY();

+ * // get fill pattern scale y + * var patternScaleY = shape.fillPatternScaleY(); * - * // set fill pattern scale y
+ * // set fill pattern scale y * shape.fillPatternScaleY(2); */ @@ -1150,13 +1150,13 @@ * @param {Number} startPoint.y * @returns {Object} * @example - * // get fill linear gradient start point
- * var startPoint = shape.fillLinearGradientStartPoint();

+ * // get fill linear gradient start point + * var startPoint = shape.fillLinearGradientStartPoint(); * - * // set fill linear gradient start point
- * shape.fillLinearGradientStartPoint({
- * x: 20
- * y: 10
+ * // set fill linear gradient start point + * shape.fillLinearGradientStartPoint({ + * x: 20 + * y: 10 * }); */ @@ -1169,10 +1169,10 @@ * @param {Number} x * @returns {Number} * @example - * // get fill linear gradient start point x
- * var startPointX = shape.fillLinearGradientStartPointX();

+ * // get fill linear gradient start point x + * var startPointX = shape.fillLinearGradientStartPointX(); * - * // set fill linear gradient start point x
+ * // set fill linear gradient start point x * shape.fillLinearGradientStartPointX(20); */ @@ -1185,10 +1185,10 @@ * @param {Number} y * @returns {Number} * @example - * // get fill linear gradient start point y
- * var startPointY = shape.fillLinearGradientStartPointY();

+ * // get fill linear gradient start point y + * var startPointY = shape.fillLinearGradientStartPointY(); * - * // set fill linear gradient start point y
+ * // set fill linear gradient start point y * shape.fillLinearGradientStartPointY(20); */ @@ -1204,13 +1204,13 @@ * @param {Number} endPoint.y * @returns {Object} * @example - * // get fill linear gradient end point
- * var endPoint = shape.fillLinearGradientEndPoint();

+ * // get fill linear gradient end point + * var endPoint = shape.fillLinearGradientEndPoint(); * - * // set fill linear gradient end point
- * shape.fillLinearGradientEndPoint({
- * x: 20
- * y: 10
+ * // set fill linear gradient end point + * shape.fillLinearGradientEndPoint({ + * x: 20 + * y: 10 * }); */ @@ -1223,10 +1223,10 @@ * @param {Number} x * @returns {Number} * @example - * // get fill linear gradient end point x
- * var endPointX = shape.fillLinearGradientEndPointX();

+ * // get fill linear gradient end point x + * var endPointX = shape.fillLinearGradientEndPointX(); * - * // set fill linear gradient end point x
+ * // set fill linear gradient end point x * shape.fillLinearGradientEndPointX(20); */ @@ -1239,10 +1239,10 @@ * @param {Number} y * @returns {Number} * @example - * // get fill linear gradient end point y
- * var endPointY = shape.fillLinearGradientEndPointY();

+ * // get fill linear gradient end point y + * var endPointY = shape.fillLinearGradientEndPointY(); * - * // set fill linear gradient end point y
+ * // set fill linear gradient end point y * shape.fillLinearGradientEndPointY(20); */ @@ -1258,13 +1258,13 @@ * @param {Number} startPoint.y * @returns {Object} * @example - * // get fill radial gradient start point
- * var startPoint = shape.fillRadialGradientStartPoint();

+ * // get fill radial gradient start point + * var startPoint = shape.fillRadialGradientStartPoint(); * - * // set fill radial gradient start point
- * shape.fillRadialGradientStartPoint({
- * x: 20
- * y: 10
+ * // set fill radial gradient start point + * shape.fillRadialGradientStartPoint({ + * x: 20 + * y: 10 * }); */ @@ -1277,10 +1277,10 @@ * @param {Number} x * @returns {Number} * @example - * // get fill radial gradient start point x
- * var startPointX = shape.fillRadialGradientStartPointX();

+ * // get fill radial gradient start point x + * var startPointX = shape.fillRadialGradientStartPointX(); * - * // set fill radial gradient start point x
+ * // set fill radial gradient start point x * shape.fillRadialGradientStartPointX(20); */ @@ -1293,10 +1293,10 @@ * @param {Number} y * @returns {Number} * @example - * // get fill radial gradient start point y
- * var startPointY = shape.fillRadialGradientStartPointY();

+ * // get fill radial gradient start point y + * var startPointY = shape.fillRadialGradientStartPointY(); * - * // set fill radial gradient start point y
+ * // set fill radial gradient start point y * shape.fillRadialGradientStartPointY(20); */ @@ -1312,13 +1312,13 @@ * @param {Number} endPoint.y * @returns {Object} * @example - * // get fill radial gradient end point
- * var endPoint = shape.fillRadialGradientEndPoint();

+ * // get fill radial gradient end point + * var endPoint = shape.fillRadialGradientEndPoint(); * - * // set fill radial gradient end point
- * shape.fillRadialGradientEndPoint({
- * x: 20
- * y: 10
+ * // set fill radial gradient end point + * shape.fillRadialGradientEndPoint({ + * x: 20 + * y: 10 * }); */ @@ -1331,10 +1331,10 @@ * @param {Number} x * @returns {Number} * @example - * // get fill radial gradient end point x
- * var endPointX = shape.fillRadialGradientEndPointX();

+ * // get fill radial gradient end point x + * var endPointX = shape.fillRadialGradientEndPointX(); * - * // set fill radial gradient end point x
+ * // set fill radial gradient end point x * shape.fillRadialGradientEndPointX(20); */ @@ -1347,10 +1347,10 @@ * @param {Number} y * @returns {Number} * @example - * // get fill radial gradient end point y
- * var endPointY = shape.fillRadialGradientEndPointY();

+ * // get fill radial gradient end point y + * var endPointY = shape.fillRadialGradientEndPointY(); * - * // set fill radial gradient end point y
+ * // set fill radial gradient end point y * shape.fillRadialGradientEndPointY(20); */ @@ -1364,10 +1364,10 @@ * @param {Number} rotation * @returns {Kinetic.Shape} * @example - * // get fill pattern rotation
- * var patternRotation = shape.fillPatternRotation();

+ * // get fill pattern rotation + * var patternRotation = shape.fillPatternRotation(); * - * // set fill pattern rotation
+ * // set fill pattern rotation * shape.fillPatternRotation(20); */ diff --git a/src/Stage.js b/src/Stage.js index 593adebf..ea2c1894 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -705,12 +705,12 @@ * @memberof Kinetic.Stage.prototype * @returns {DomElement} container * @example - * // get container
- * var container = stage.container();

+ * // get container + * var container = stage.container(); * - * // set container
- * var container = document.createElement('div');
- * body.appendChild(container);
+ * // set container + * var container = document.createElement('div'); + * body.appendChild(container); * stage.container(container); */ diff --git a/src/Tween.js b/src/Tween.js index 36b1dd30..e39b42c9 100644 --- a/src/Tween.js +++ b/src/Tween.js @@ -21,17 +21,17 @@ * @memberof Kinetic * @example * // instantiate new tween which fully rotates a node in 1 second - * var tween = new Kinetic.Tween({
- * node: node,
- * rotationDeg: 360,
- * duration: 1,
- * easing: Kinetic.Easings.EaseInOut
- * });

+ * var tween = new Kinetic.Tween({ + * node: node, + * rotationDeg: 360, + * duration: 1, + * easing: Kinetic.Easings.EaseInOut + * }); * - * // play tween
- * tween.play();

+ * // play tween + * tween.play(); * - * // pause tween
+ * // pause tween * tween.pause(); */ Kinetic.Tween = function(config) { diff --git a/src/Util.js b/src/Util.js index a99d171e..775b4a2c 100644 --- a/src/Util.js +++ b/src/Util.js @@ -23,8 +23,8 @@ * @param {Function} func * @example * // get all nodes with name foo inside layer, and set x to 10 for each - * layer.get('.foo').each(function(shape, n) {
- * shape.setX(10);
+ * layer.get('.foo').each(function(shape, n) { + * shape.setX(10); * }); */ Kinetic.Collection.prototype.each = function(func) { @@ -539,9 +539,9 @@ * @memberof Kinetic.Util.prototype * @param {String} color * @example - * // each of the following examples return {r:0, g:0, b:255}
- * var rgb = Kinetic.Util.getRGB('blue');
- * var rgb = Kinetic.Util.getRGB('#0000ff');
+ * // each of the following examples return {r:0, g:0, b:255} + * var rgb = Kinetic.Util.getRGB('blue'); + * var rgb = Kinetic.Util.getRGB('#0000ff'); * var rgb = Kinetic.Util.getRGB('rgb(0,0,255)'); */ getRGB: function(color) { diff --git a/src/plugins/Label.js b/src/plugins/Label.js index 57159978..dac4b7c6 100644 --- a/src/plugins/Label.js +++ b/src/plugins/Label.js @@ -20,34 +20,34 @@ * @@nodeParams * @example * // create label - * var label = new Kinetic.Label({
- * x: 100,
- * y: 100,
- * draggable: true
- * });

+ * var label = new Kinetic.Label({ + * x: 100, + * y: 100, + * draggable: true + * }); * - * // add a tag to the label
- * label.add(new Kinetic.Tag({
- * fill: '#bbb',
- * stroke: '#333',
- * shadowColor: 'black',
- * shadowBlur: 10,
- * shadowOffset: [10, 10],
- * shadowOpacity: 0.2,
- * lineJoin: 'round',
- * pointerDirection: 'up',
- * pointerWidth: 20,
- * pointerHeight: 20,
- * cornerRadius: 5
- * }));

+ * // add a tag to the label + * label.add(new Kinetic.Tag({ + * fill: '#bbb', + * stroke: '#333', + * shadowColor: 'black', + * shadowBlur: 10, + * shadowOffset: [10, 10], + * shadowOpacity: 0.2, + * lineJoin: 'round', + * pointerDirection: 'up', + * pointerWidth: 20, + * pointerHeight: 20, + * cornerRadius: 5 + * })); * - * // add text to the label
- * label.add(new Kinetic.Text({
- * text: 'Hello World!',
- * fontSize: 50,
- * lineHeight: 1.2,
- * padding: 10,
- * fill: 'green'
+ * // add text to the label + * label.add(new Kinetic.Text({ + * text: 'Hello World!', + * fontSize: 50, + * lineHeight: 1.2, + * padding: 10, + * fill: 'green' * })); */ Kinetic.Label = function(config) { diff --git a/src/plugins/Path.js b/src/plugins/Path.js index 489394bf..d0f6ac3b 100644 --- a/src/plugins/Path.js +++ b/src/plugins/Path.js @@ -10,12 +10,12 @@ * @@shapeParams * @@nodeParams * @example - * var path = new Kinetic.Path({
- * x: 240,
- * y: 40,
- * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
- * fill: 'green',
- * scale: 2
+ * var path = new Kinetic.Path({ + * x: 240, + * y: 40, + * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z', + * fill: 'green', + * scale: 2 * }); */ Kinetic.Path = function (config) { diff --git a/src/plugins/RegularPolygon.js b/src/plugins/RegularPolygon.js index 353fd971..2809c0e9 100644 --- a/src/plugins/RegularPolygon.js +++ b/src/plugins/RegularPolygon.js @@ -10,14 +10,14 @@ * @@shapeParams * @@nodeParams * @example - * var hexagon = new Kinetic.RegularPolygon({
- * x: 100,
- * y: 200,
- * sides: 6,
- * radius: 70,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 4
+ * var hexagon = new Kinetic.RegularPolygon({ + * x: 100, + * y: 200, + * sides: 6, + * radius: 70, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 4 * }); */ Kinetic.RegularPolygon = function(config) { diff --git a/src/plugins/Star.js b/src/plugins/Star.js index eb3ce42b..bbb2dfd3 100644 --- a/src/plugins/Star.js +++ b/src/plugins/Star.js @@ -11,15 +11,15 @@ * @@shapeParams * @@nodeParams * @example - * var star = new Kinetic.Star({
- * x: 100,
- * y: 200,
- * numPoints: 5,
- * innerRadius: 70,
- * outerRadius: 70,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 4
+ * var star = new Kinetic.Star({ + * x: 100, + * y: 200, + * numPoints: 5, + * innerRadius: 70, + * outerRadius: 70, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 4 * }); */ Kinetic.Star = function(config) { diff --git a/src/plugins/TextPath.js b/src/plugins/TextPath.js index 9b424395..3af62ff5 100644 --- a/src/plugins/TextPath.js +++ b/src/plugins/TextPath.js @@ -19,14 +19,14 @@ * @@shapeParams * @@nodeParams * @example - * var textpath = new Kinetic.TextPath({
- * x: 100,
- * y: 50,
- * fill: '#333',
- * fontSize: '24',
- * fontFamily: 'Arial',
- * text: 'All the world\'s a stage, and all the men and women merely players.',
- * data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
+ * var textpath = new Kinetic.TextPath({ + * x: 100, + * y: 50, + * fill: '#333', + * fontSize: '24', + * fontFamily: 'Arial', + * text: 'All the world\'s a stage, and all the men and women merely players.', + * data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50' * }); */ Kinetic.TextPath = function(config) { diff --git a/src/shapes/Arc.js b/src/shapes/Arc.js index 0338aac2..5a095744 100644 --- a/src/shapes/Arc.js +++ b/src/shapes/Arc.js @@ -13,15 +13,15 @@ * @@shapeParams * @@nodeParams * @example - * // draw a Arc that's pointing downwards
- * var arc = new Kinetic.Arc({
- * innerRadius: 40,
- * outerRadius: 80,
- * fill: 'red',
- * stroke: 'black'
- * strokeWidth: 5,
- * angle: 60,
- * rotationDeg: -120
+ * // draw a Arc that's pointing downwards + * var arc = new Kinetic.Arc({ + * innerRadius: 40, + * outerRadius: 80, + * fill: 'red', + * stroke: 'black' + * strokeWidth: 5, + * angle: 60, + * rotationDeg: -120 * }); */ Kinetic.Arc = function(config) { @@ -76,10 +76,10 @@ * @param {Number} outerRadius * @returns {Number} * @example - * // get outer radius
- * var outerRadius = arc.outerRadius();

+ * // get outer radius + * var outerRadius = arc.outerRadius(); * - * // set outer radius
+ * // set outer radius * arc.outerRadius(20); */ @@ -93,10 +93,10 @@ * @param {Number} angle * @returns {Number} * @example - * // get angle
- * var angle = arc.angle();

+ * // get angle + * var angle = arc.angle(); * - * // set angle
+ * // set angle * arc.angle(20); */ @@ -110,13 +110,13 @@ * @param {Boolean} clockwise * @returns {Boolean} * @example - * // get clockwise flag
- * var clockwise = arc.clockwise();

+ * // get clockwise flag + * var clockwise = arc.clockwise(); * - * // draw arc counter-clockwise
- * arc.clockwise(false);

+ * // draw arc counter-clockwise + * arc.clockwise(false); * - * // draw arc clockwise
+ * // draw arc clockwise * arc.clockwise(true); */ diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js index bc4343a4..6e74d57a 100644 --- a/src/shapes/Circle.js +++ b/src/shapes/Circle.js @@ -14,11 +14,11 @@ * @@nodeParams * @example * // create circle - * var circle = new Kinetic.Circle({
- * radius: 40,
- * fill: 'red',
- * stroke: 'black'
- * strokeWidth: 5
+ * var circle = new Kinetic.Circle({ + * radius: 40, + * fill: 'red', + * stroke: 'black' + * strokeWidth: 5 * }); */ Kinetic.Circle = function(config) { @@ -70,11 +70,11 @@ * @param {Number} radius * @returns {Number} * @example - * // get radius
- * var radius = circle.radius();

+ * // get radius + * var radius = circle.radius(); * - * // set radius
- * circle.radius(10);
+ * // set radius + * circle.radius(10); */ Kinetic.Collection.mapMethods(Kinetic.Circle); diff --git a/src/shapes/Ellipse.js b/src/shapes/Ellipse.js index 5c5e307f..a85fa828 100644 --- a/src/shapes/Ellipse.js +++ b/src/shapes/Ellipse.js @@ -12,12 +12,12 @@ * @@ShapeParams * @@NodeParams * @example - * var ellipse = new Kinetic.Ellipse({
- * radius : {
- * x : 50,
- * y : 50
- * },
- * fill: 'red'
+ * var ellipse = new Kinetic.Ellipse({ + * radius : { + * x : 50, + * y : 50 + * }, + * fill: 'red' * }); */ Kinetic.Ellipse = function(config) { @@ -84,13 +84,13 @@ * @param {Number} radius.y * @returns {Object} * @example - * // get radius
- * var radius = ellipse.radius();

+ * // get radius + * var radius = ellipse.radius(); * - * // set radius
- * ellipse.radius({
- * x: 200,
- * y: 100
+ * // set radius + * ellipse.radius({ + * x: 200, + * y: 100 * }); */ @@ -103,10 +103,10 @@ * @param {Number} x * @returns {Number} * @example - * // get radius x
- * var radiusX = ellipse.radiusX();

+ * // get radius x + * var radiusX = ellipse.radiusX(); * - * // set radius x
+ * // set radius x * ellipse.radiusX(200); */ @@ -119,10 +119,10 @@ * @param {Number} y * @returns {Number} * @example - * // get radius y
- * var radiusY = ellipse.radiusY();

+ * // get radius y + * var radiusY = ellipse.radiusY(); * - * // set radius y
+ * // set radius y * ellipse.radiusY(200); */ diff --git a/src/shapes/Image.js b/src/shapes/Image.js index 0af3c968..98324c67 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -14,16 +14,16 @@ * @@shapeParams * @@nodeParams * @example - * var imageObj = new Image();
- * imageObj.onload = function() {
- * var image = new Kinetic.Image({
- * x: 200,
- * y: 50,
- * image: imageObj,
- * width: 100,
- * height: 100
- * });
- * };
+ * var imageObj = new Image(); + * imageObj.onload = function() { + * var image = new Kinetic.Image({ + * x: 200, + * y: 50, + * image: imageObj, + * width: 100, + * height: 100 + * }); + * }; * imageObj.src = '/path/to/image.jpg' */ Kinetic.Image = function(config) { @@ -119,15 +119,15 @@ * @param {Number} crop.height * @returns {Object} * @example - * // get crop
- * var crop = image.crop();

+ * // get crop + * var crop = image.crop(); * - * // set crop
- * image.crop({
- * x: 20,
- * y: 20,
- * width: 20,
- * height: 20
+ * // set crop + * image.crop({ + * x: 20, + * y: 20, + * width: 20, + * height: 20 * }); */ @@ -140,10 +140,10 @@ * @param {Number} x * @returns {Number} * @example - * // get crop x
- * var cropX = image.cropX();

+ * // get crop x + * var cropX = image.cropX(); * - * // set crop x
+ * // set crop x * image.cropX(20); */ @@ -156,10 +156,10 @@ * @param {Number} y * @returns {Number} * @example - * // get crop y
- * var cropY = image.cropY();

+ * // get crop y + * var cropY = image.cropY(); * - * // set crop y
+ * // set crop y * image.cropY(20); */ @@ -172,10 +172,10 @@ * @param {Number} width * @returns {Number} * @example - * // get crop width
- * var cropWidth = image.cropWidth();

+ * // get crop width + * var cropWidth = image.cropWidth(); * - * // set crop width
+ * // set crop width * image.cropWidth(20); */ @@ -188,10 +188,10 @@ * @param {Number} height * @returns {Number} * @example - * // get crop height
- * var cropHeight = image.cropHeight();

+ * // get crop height + * var cropHeight = image.cropHeight(); * - * // set crop height
+ * // set crop height * image.cropHeight(20); */ diff --git a/src/shapes/Line.js b/src/shapes/Line.js index 1f0ee237..45fb41bb 100644 --- a/src/shapes/Line.js +++ b/src/shapes/Line.js @@ -13,12 +13,12 @@ * @@shapeParams * @@nodeParams * @example - * var line = new Kinetic.Line({
- * x: 100,
- * y: 50,
- * points: [73, 70, 340, 23, 450, 60, 500, 20],
- * stroke: 'red',
- * tension: 1
+ * var line = new Kinetic.Line({ + * x: 100, + * y: 50, + * points: [73, 70, 340, 23, 450, 60, 500, 20], + * stroke: 'red', + * tension: 1 * }); */ Kinetic.Line = function(config) { @@ -151,13 +151,13 @@ * @param {Boolean} closed * @returns {Boolean} * @example - * // get closed flag
- * var closed = line.closed();

+ * // get closed flag + * var closed = line.closed(); * - * // close the shape
- * line.closed(true);

+ * // close the shape + * line.closed(true); * - * // open the shape
+ * // open the shape * line.closed(false); */ @@ -172,10 +172,10 @@ * The default is 0 * @returns {Number} * @example - * // get tension
- * var tension = line.tension();

+ * // get tension + * var tension = line.tension(); * - * // set tension
+ * // set tension * line.tension(3); */ @@ -188,13 +188,13 @@ * @param {Array} points * @returns {Array} * @example - * // get points
- * var points = line.points();

+ * // get points + * var points = line.points(); * - * // set points
- * line.points([10, 20, 30, 40, 50, 60]);

+ * // set points + * line.points([10, 20, 30, 40, 50, 60]); * - * // push a new point
+ * // push a new point * line.points(line.points().concat([70, 80])); */ diff --git a/src/shapes/Rect.js b/src/shapes/Rect.js index 5469b09f..20a94af6 100644 --- a/src/shapes/Rect.js +++ b/src/shapes/Rect.js @@ -9,12 +9,12 @@ * @@shapeParams * @@nodeParams * @example - * var rect = new Kinetic.Rect({
- * width: 100,
- * height: 50,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 5
+ * var rect = new Kinetic.Rect({ + * width: 100, + * height: 50, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 5 * }); */ Kinetic.Rect = function(config) { @@ -67,10 +67,10 @@ * @param {Number} cornerRadius * @returns {Number} * @example - * // get corner radius
- * var cornerRadius = rect.cornerRadius();

+ * // get corner radius + * var cornerRadius = rect.cornerRadius(); * - * // set corner radius
+ * // set corner radius * rect.cornerRadius(10); */ diff --git a/src/shapes/Ring.js b/src/shapes/Ring.js index e9e7f678..87dfe092 100644 --- a/src/shapes/Ring.js +++ b/src/shapes/Ring.js @@ -13,12 +13,12 @@ * @@shapeParams * @@nodeParams * @example - * var ring = new Kinetic.Ring({
- * innerRadius: 40,
- * outerRadius: 80,
- * fill: 'red',
- * stroke: 'black',
- * strokeWidth: 5
+ * var ring = new Kinetic.Ring({ + * innerRadius: 40, + * outerRadius: 80, + * fill: 'red', + * stroke: 'black', + * strokeWidth: 5 * }); */ Kinetic.Ring = function(config) { @@ -72,10 +72,10 @@ * @param {Number} innerRadius * @returns {Number} * @example - * // get inner radius
- * var innerRadius = ring.innerRadius();

+ * // get inner radius + * var innerRadius = ring.innerRadius(); * - * // set inner radius
+ * // set inner radius * ring.innerRadius(20); */ @@ -89,10 +89,10 @@ * @param {Number} outerRadius * @returns {Number} * @example - * // get outer radius
- * var outerRadius = ring.outerRadius();

+ * // get outer radius + * var outerRadius = ring.outerRadius(); * - * // set outer radius
+ * // set outer radius * ring.outerRadius(20); */ diff --git a/src/shapes/Sprite.js b/src/shapes/Sprite.js index e4d63630..77542f6e 100644 --- a/src/shapes/Sprite.js +++ b/src/shapes/Sprite.js @@ -12,37 +12,37 @@ * @@shapeParams * @@nodeParams * @example - * var imageObj = new Image();
- * imageObj.onload = function() {
- * var sprite = new Kinetic.Sprite({
- * x: 200,
- * y: 100,
- * image: imageObj,
- * animation: 'standing',
- * animations: {
- * standing: [
- * // x, y, width, height (6 frames)
- * 0, 0, 49, 109,
- * 52, 0, 49, 109,
- * 105, 0, 49, 109,
- * 158, 0, 49, 109,
- * 210, 0, 49, 109,
- * 262, 0, 49, 109
- * ],
- * kicking: [
- * // x, y, width, height (6 frames)
- * 0, 109, 45, 98,
- * 45, 109, 45, 98,
- * 95, 109, 63, 98,
- * 156, 109, 70, 98,
- * 229, 109, 60, 98,
- * 287, 109, 41, 98
- * ]
- * },
- * frameRate: 7,
- * frameIndex: 0
- * });
- * };
+ * var imageObj = new Image(); + * imageObj.onload = function() { + * var sprite = new Kinetic.Sprite({ + * x: 200, + * y: 100, + * image: imageObj, + * animation: 'standing', + * animations: { + * standing: [ + * // x, y, width, height (6 frames) + * 0, 0, 49, 109, + * 52, 0, 49, 109, + * 105, 0, 49, 109, + * 158, 0, 49, 109, + * 210, 0, 49, 109, + * 262, 0, 49, 109 + * ], + * kicking: [ + * // x, y, width, height (6 frames) + * 0, 109, 45, 98, + * 45, 109, 45, 98, + * 95, 109, 63, 98, + * 156, 109, 70, 98, + * 229, 109, 60, 98, + * 287, 109, 41, 98 + * ] + * }, + * frameRate: 7, + * frameIndex: 0 + * }); + * }; * imageObj.src = '/path/to/image.jpg' */ Kinetic.Sprite = function(config) { @@ -173,10 +173,10 @@ * @param {String} anim animation key * @returns {String} * @example - * // get animation key
- * var animation = sprite.animation();

+ * // get animation key + * var animation = sprite.animation(); * - * // set animation key
+ * // set animation key * sprite.animation('kicking'); */ @@ -190,29 +190,29 @@ * @param {Object} animations * @returns {Object} * @example - * // get animations map
- * var animations = sprite.animations();

+ * // get animations map + * var animations = sprite.animations(); * - * // set animations map
- * sprite.animations({
- * standing: [
- * // x, y, width, height (6 frames)
- * 0, 0, 49, 109,
- * 52, 0, 49, 109,
- * 105, 0, 49, 109,
- * 158, 0, 49, 109,
- * 210, 0, 49, 109,
- * 262, 0, 49, 109
- * ],
- * kicking: [
- * // x, y, width, height (6 frames)
- * 0, 109, 45, 98,
- * 45, 109, 45, 98,
- * 95, 109, 63, 98,
- * 156, 109, 70, 98,
- * 229, 109, 60, 98,
- * 287, 109, 41, 98
- * ]
+ * // set animations map + * sprite.animations({ + * standing: [ + * // x, y, width, height (6 frames) + * 0, 0, 49, 109, + * 52, 0, 49, 109, + * 105, 0, 49, 109, + * 158, 0, 49, 109, + * 210, 0, 49, 109, + * 262, 0, 49, 109 + * ], + * kicking: [ + * // x, y, width, height (6 frames) + * 0, 109, 45, 98, + * 45, 109, 45, 98, + * 95, 109, 63, 98, + * 156, 109, 70, 98, + * 229, 109, 60, 98, + * 287, 109, 41, 98 + * ] * }); */ @@ -227,9 +227,9 @@ * @returns {Image} * @example * // get image - * var image = sprite.image();

+ * var image = sprite.image(); * - * // set image
+ * // set image * sprite.image(imageObj); */ @@ -243,10 +243,10 @@ * @param {Integer} frameIndex * @returns {Integer} * @example - * // get animation frame index
- * var frameIndex = sprite.frameIndex();

+ * // get animation frame index + * var frameIndex = sprite.frameIndex(); * - * // set animation frame index
+ * // set animation frame index * sprite.frameIndex(3); */ @@ -262,10 +262,10 @@ * @param {Integer} frameRate * @returns {Integer} * @example - * // get frame rate
- * var frameRate = sprite.frameRate();

+ * // get frame rate + * var frameRate = sprite.frameRate(); * - * // set frame rate to 2 frames per second
+ * // set frame rate to 2 frames per second * sprite.frameRate(2); */ diff --git a/src/shapes/Text.js b/src/shapes/Text.js index d0aae523..c602f8ce 100644 --- a/src/shapes/Text.js +++ b/src/shapes/Text.js @@ -44,13 +44,13 @@ * @@shapeParams * @@nodeParams * @example - * var text = new Kinetic.Text({
- * x: 10,
- * y: 15,
- * text: 'Simple Text',
- * fontSize: 30,
- * fontFamily: 'Calibri',
- * fill: 'green'
+ * var text = new Kinetic.Text({ + * x: 10, + * y: 15, + * text: 'Simple Text', + * fontSize: 30, + * fontFamily: 'Calibri', + * fill: 'green' * }); */ Kinetic.Text = function(config) { @@ -324,10 +324,10 @@ * @param {String} fontFamily * @returns {String} * @example - * // get font family
- * var fontFamily = text.fontFamily();


+ * // get font family + * var fontFamily = text.fontFamily(); * - * // set font family
+ * // set font family * text.fontFamily('Arial'); */ @@ -341,10 +341,10 @@ * @param {Number} fontSize * @returns {Number} * @example - * // get font size
- * var fontSize = text.fontSize();

+ * // get font size + * var fontSize = text.fontSize(); * - * // set font size to 22px
+ * // set font size to 22px * text.fontSize(22); */ @@ -358,10 +358,10 @@ * @param {String} fontStyle * @returns {String} * @example - * // get font style
- * var fontStyle = text.fontStyle();

+ * // get font style + * var fontStyle = text.fontStyle(); * - * // set font style
+ * // set font style * text.fontStyle('bold'); */ @@ -375,10 +375,10 @@ * @param {String} fontVariant * @returns {String} * @example - * // get font variant
- * var fontVariant = text.fontVariant();

+ * // get font variant + * var fontVariant = text.fontVariant(); * - * // set font variant
+ * // set font variant * text.fontVariant('small-caps'); */ @@ -392,10 +392,10 @@ * @param {Number} padding * @returns {Number} * @example - * // get padding
- * var padding = text.padding();

+ * // get padding + * var padding = text.padding(); * - * // set padding to 10 pixels
+ * // set padding to 10 pixels * text.padding(10); */ @@ -409,13 +409,13 @@ * @param {String} align * @returns {String} * @example - * // get text align
- * var align = text.align();

+ * // get text align + * var align = text.align(); * - * // center text
- * text.align('center');

+ * // center text + * text.align('center'); * - * // align text to right
+ * // align text to right * text.align('right'); */ @@ -429,10 +429,10 @@ * @param {Number} lineHeight * @returns {Number} * @example - * // get line height
- * var lineHeight = text.lineHeight();


+ * // get line height + * var lineHeight = text.lineHeight(); * - * // set the line height
+ * // set the line height * text.lineHeight(2); */ @@ -446,10 +446,10 @@ * @param {String} wrap * @returns {String} * @example - * // get wrap
- * var wrap = text.wrap();

+ * // get wrap + * var wrap = text.wrap(); * - * // set wrap
+ * // set wrap * text.wrap('word'); */ @@ -464,10 +464,10 @@ * @param {String} text * @returns {String} * @example - * // get text
- * var text = text.text();

+ * // get text + * var text = text.text(); * - * // set text
+ * // set text * text.text('Hello world!'); */ diff --git a/src/shapes/Wedge.js b/src/shapes/Wedge.js index ed37d5c5..946ff578 100644 --- a/src/shapes/Wedge.js +++ b/src/shapes/Wedge.js @@ -10,14 +10,14 @@ * @@shapeParams * @@nodeParams * @example - * // draw a wedge that's pointing downwards
- * var wedge = new Kinetic.Wedge({
- * radius: 40,
- * fill: 'red',
- * stroke: 'black'
- * strokeWidth: 5,
- * angleDeg: 60,
- * rotationDeg: -120
+ * // draw a wedge that's pointing downwards + * var wedge = new Kinetic.Wedge({ + * radius: 40, + * fill: 'red', + * stroke: 'black' + * strokeWidth: 5, + * angleDeg: 60, + * rotationDeg: -120 * }); */ Kinetic.Wedge = function(config) { @@ -52,11 +52,11 @@ * @param {Number} radius * @returns {Number} * @example - * // get radius
- * var radius = wedge.radius();

+ * // get radius + * var radius = wedge.radius(); * - * // set radius
- * wedge.radius(10);
+ * // set radius + * wedge.radius(10); */ Kinetic.Factory.addGetterSetter(Kinetic.Wedge, 'angle', 0); @@ -69,10 +69,10 @@ * @param {Number} angle * @returns {Number} * @example - * // get angle
- * var angle = wedge.angle();

+ * // get angle + * var angle = wedge.angle(); * - * // set angle
+ * // set angle * wedge.angle(20); */ @@ -86,13 +86,13 @@ * @param {Number} clockwise * @returns {Number} * @example - * // get clockwise flag
- * var clockwise = wedge.clockwise();

+ * // get clockwise flag + * var clockwise = wedge.clockwise(); * - * // draw wedge counter-clockwise
- * wedge.clockwise(false);

+ * // draw wedge counter-clockwise + * wedge.clockwise(false); * - * // draw wedge clockwise
+ * // draw wedge clockwise * wedge.clockwise(true); */