SVGShape.js revision e1d9c39d1eb1062e5c99cf8994b981636d8841cc
0fdefaa9ca017edfb76b736c825b34186f33045aTripp * <a href="http://www.w3.org/TR/SVG/">SVG</a> implementation of the <a href="Shape.html">`Shape`</a> class.
0fdefaa9ca017edfb76b736c825b34186f33045aTripp * `SVGShape` is not intended to be used directly. Instead, use the <a href="Shape.html">`Shape`</a> class.
0fdefaa9ca017edfb76b736c825b34186f33045aTripp * If the browser has <a href="http://www.w3.org/TR/SVG/">SVG</a> capabilities, the <a href="Shape.html">`Shape`</a>
0fdefaa9ca017edfb76b736c825b34186f33045aTripp * class will point to the `SVGShape` class.
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp * @module graphics
09688ec5ffb8b9cf9883a770e2f9ebd60b28888dTripp * @class SVGShape
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @constructor
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {Object} cfg (optional) Attribute configs
a89ad754cce3cfc8aee71760e10217b54020360dTripp SVGShape.superclass.constructor.apply(this, arguments);
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Init method, invoked during construction.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Calls `initializer` method.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method init
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @protected
828c58761d90445b8b9d20a82d85dc1479317f71Tripp init: function()
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Initializes the shape
0fdefaa9ca017edfb76b736c825b34186f33045aTripp * @method initializer
828c58761d90445b8b9d20a82d85dc1479317f71Tripp var host = this;
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Add a class name to each node.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method addClass
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {String} className the class name to add to the node's class attribute
828c58761d90445b8b9d20a82d85dc1479317f71Tripp node.className.baseVal = Y_LANG.trim([node.className.baseVal, className].join(' '));
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Removes a class name from each node.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method removeClass
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {String} className the class name to remove from the node's class attribute
828c58761d90445b8b9d20a82d85dc1479317f71Tripp classString = classString.replace(new RegExp(className + ' '), className).replace(new RegExp(className), '');
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Gets the current position of the node in page coordinates.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method getXY
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return Array The XY position of the shape.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp getXY: function()
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Set the position of the shape in page coordinates, regardless of how the node is positioned.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method setXY
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {Array} Contains x & y values for new position (coordinates are page-based)
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method contains
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {SVGShape | HTMLElement} needle The possible node or descendent
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return Boolean Whether or not this shape is the needle or its ancestor.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Compares nodes to determine if they match.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Node instances can be compared to each other and/or HTMLElements.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method compareTo
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {HTMLElement | Node} refNode The reference node to compare to the node.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return {Boolean} True if the nodes match, false if they do not.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Test if the supplied node matches the supplied selector.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method test
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {String} selector The CSS selector to test against.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return Boolean Wheter or not the shape matches the selector.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Value function for fill attribute
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method _getDefaultFill
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return Object
828c58761d90445b8b9d20a82d85dc1479317f71Tripp _getDefaultFill: function() {
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Value function for stroke attribute
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method _getDefaultStroke
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return Object
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Creates the dom node for the shape.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method createNode
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return HTMLElement
b79c07ef87dd1a48a03fc33a91c37d04f3addae2Tripp var node = DOCUMENT.createElementNS("http://www.w3.org/2000/svg", "svg:" + this._type),
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp this.addClass("yui3-" + SHAPE + " yui3-" + this.name);
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Overrides default `on` method. Checks to see if its a dom interaction event. If so,
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * return an event attached to the `node` element. If not, return the normal functionality.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method on
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {String} type event type
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {Object} callback function
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Adds a stroke to the shape node.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method _strokeChangeHandler
828c58761d90445b8b9d20a82d85dc1479317f71Tripp dash = Y_LANG.isArray(dashstyle) ? dashstyle.toString() : dashstyle;
828c58761d90445b8b9d20a82d85dc1479317f71Tripp stroke.opacity = Y_LANG.isNumber(strokeOpacity) ? strokeOpacity : 1;
828c58761d90445b8b9d20a82d85dc1479317f71Tripp node.setAttribute("stroke-miterlimit", Math.max(linejoin, 1));
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Adds a fill to the shape node.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method _fillChangeHandler
828c58761d90445b8b9d20a82d85dc1479317f71Tripp node.setAttribute("fill", "url(#grad" + this.get("id") + ")");
2cf39f73ff3df5a2421fadc3c7fb24ed07e051b9Tripp fillOpacity = Y_LANG.isNumber(fillOpacity) ? fillOpacity : 1;
a4d2446149b07f9e5c32947091dcbcf4d2eee765Tripp * Creates a gradient fill
a4d2446149b07f9e5c32947091dcbcf4d2eee765Tripp * @method _setGradientFill
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {String} type gradient type
828c58761d90445b8b9d20a82d85dc1479317f71Tripp gradientNode = graphic.getGradientNode("grad" + this.get("id"), type),
a4d2446149b07f9e5c32947091dcbcf4d2eee765Tripp tanRadians = parseFloat(parseFloat(Math.tan(rotation * radCon)).toFixed(8)),
a4d2446149b07f9e5c32947091dcbcf4d2eee765Tripp gradientNode.setAttribute("x1", Math.round(100 * x1/w) + "%");
a4d2446149b07f9e5c32947091dcbcf4d2eee765Tripp gradientNode.setAttribute("y1", Math.round(100 * y1/h) + "%");
a4d2446149b07f9e5c32947091dcbcf4d2eee765Tripp gradientNode.setAttribute("x2", Math.round(100 * x2/w) + "%");
a4d2446149b07f9e5c32947091dcbcf4d2eee765Tripp gradientNode.setAttribute("y2", Math.round(100 * y2/h) + "%");
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Sets the value of an attribute.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method set
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * be passed in to set multiple attributes at once.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {Any} value The value to set the attribute to. This value is ignored if an object is received as
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * the name param.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp set: function()
828c58761d90445b8b9d20a82d85dc1479317f71Tripp var host = this;
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Specifies a 2d translation.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method translate
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @param {Number} x The value to transate on the x-axis.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @param {Number} y The value to translate on the y-axis.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp translate: function(x, y)
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Translates the shape along the x-axis. When translating x and y coordinates,
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * use the `translate` method.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @method translateX
0fdefaa9ca017edfb76b736c825b34186f33045aTripp * @param {Number} x The value to translate.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp translateX: function(x)
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Translates the shape along the y-axis. When translating x and y coordinates,
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * use the `translate` method.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @method translateY
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @param {Number} y The value to translate.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp translateY: function(y)
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Skews the shape around the x-axis and y-axis.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @method skew
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @param {Number} x The value to skew on the x-axis.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * @param {Number} y The value to skew on the y-axis.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp skew: function(x, y)
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Skews the shape around the x-axis.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method skewX
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {Number} x x-coordinate
828c58761d90445b8b9d20a82d85dc1479317f71Tripp skewX: function(x)
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Skews the shape around the y-axis.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method skewY
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {Number} y y-coordinate
828c58761d90445b8b9d20a82d85dc1479317f71Tripp skewY: function(y)
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Rotates the shape clockwise around it transformOrigin.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method rotate
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {Number} deg The degree of the rotation.
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * Specifies a 2d scaling operation.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method scale
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @param {Number} val
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp scale: function(x, y)
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Adds a transform to the shape.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method _addTransform
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {String} type The transform being applied.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @param {Array} args The arguments for the transform.
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp this._transform = Y_LANG.trim(this._transform + " " + type + "(" + args.join(", ") + ")");
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Applies all transforms.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method _updateTransform
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp if(isPath || (this._transforms && this._transforms.length > 0))
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp //need to use translate for x/y coords
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp //adjust origin for custom shapes
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp if(!(this instanceof Y.SVGPath))
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp tx = this._left + (transformOrigin[0] * this.get("width"));
60aa9bb9c10c290c922d51d05a4dfa7176cfd40eTripp ty = this._top + (transformOrigin[1] * this.get("height"));
8ab6afc0ff1f6b225e52d7489864024d814b37fcTripp normalizedMatrix.init({dx: x + this._left, dy: y + this._top});
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp for(; i < len; ++i)
8ab6afc0ff1f6b225e52d7489864024d814b37fcTripp normalizedMatrix[key].apply(normalizedMatrix, this._transforms[i]);
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Draws the shape.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method _draw
828c58761d90445b8b9d20a82d85dc1479317f71Tripp _draw: function()
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * Updates `Shape` based on attribute changes.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method _updateHandler
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp * Storage for the transform attribute.
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp * @property _transform
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp * @type String
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Returns the bounds for a shape.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp * The calculated bounding box is used by the graphic instance to calculate its viewBox.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @method getBounds
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @return Object
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp //The svg path element does not have x and y coordinates. Shapes based on path use translate to "fake" x and y. As a
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp //result, these values will show up in the transform matrix and should not be used in any conversion formula.
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp bounds.left = Math.min(x3, Math.min(x1, Math.min(x2, x4)));
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp bounds.right = Math.max(x3, Math.max(x1, Math.max(x2, x4)));
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp bounds.top = Math.min(y2, Math.min(y4, Math.min(y3, y1)));
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp bounds.bottom = Math.max(y2, Math.max(y4, Math.max(y3, y1)));
ed59119d8c00addb07c7ee6c8aefcd1d9cb876f1Tripp //if there is a stroke, extend the bounds to accomodate
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * Returns the x coordinate for a bounding box's corner based on the corner's original x/y coordinates, rotation and transform origin of the rotation.
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @method _getRotatedCornerX
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} x original x-coordinate of corner
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} y original y-coordinate of corner
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} tox transform origin x-coordinate of rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} toy transform origin y-coordinate of rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} cosRadians cosine (in radians) of rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} sinRadians sin (in radians) or rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @return Number
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp _getRotatedCornerX: function(x, y, tox, toy, cosRadians, sinRadians)
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp return (tox + (x - tox) * cosRadians + (y - toy) * sinRadians);
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * Returns the y coordinate for a bounding box's corner based on the corner's original x/y coordinates, rotation and transform origin of the rotation.
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @method _getRotatedCornerY
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} x original x-coordinate of corner
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} y original y-coordinate of corner
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} tox transform origin x-coordinate of rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} toy transform origin y-coordinate of rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} cosRadians cosine (in radians) of rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @param {Number} sinRadians sin (in radians) or rotation
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp * @return Number
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp _getRotatedCornerY: function(x, y, tox, toy, cosRadians, sinRadians)
c7ba96d16d58075a9ab8d5c1e46c6c83ce11cb4eTripp return (toy - (x - tox) * sinRadians + (y - toy) * cosRadians);
117557654069e56f5003be755819b76fe0f77107Tripp * Destroys the shape instance.
66ca16dd76367c074fe4df1dcf7b555489a9bf85Tripp * @method destroy
a89ad754cce3cfc8aee71760e10217b54020360dTripp destroy: function()
117557654069e56f5003be755819b76fe0f77107Tripp * Implementation for shape destruction
117557654069e56f5003be755819b76fe0f77107Tripp * @method destroy
117557654069e56f5003be755819b76fe0f77107Tripp * @protected
117557654069e56f5003be755819b76fe0f77107Tripp this.node = null;
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config transformOrigin
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Array
828c58761d90445b8b9d20a82d85dc1479317f71Tripp valueFn: function()
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <p>A string containing, in order, transform operations applied to the shape instance. The `transform` string can contain the following values:
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>rotate</dt><dd>Rotates the shape clockwise around it transformOrigin.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>translate</dt><dd>Specifies a 2d translation.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>skew</dt><dd>Skews the shape around the x-axis and y-axis.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>scale</dt><dd>Specifies a 2d scaling operation.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>translateX</dt><dd>Translates the shape along the x-axis.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>translateY</dt><dd>Translates the shape along the y-axis.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>skewX</dt><dd>Skews the shape around the x-axis.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <dt>skewY</dt><dd>Skews the shape around the y-axis.</dd>
091085b5a65d589ca99904fd9e9dec757e17d543Tripp * <dt>matrix</dt><dd>Specifies a 2D transformation matrix comprised of the specified six values.</dd>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <p>Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * that will apply the transform to the current matrix. The below code illustrates how you might use the `transform` attribute to instantiate a recangle with a rotation of 45 degrees.</p>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp var myRect = new Y.Rect({
6a3585e2672045e8e28e6a45f279f80aef446959Tripp type:"rect",
6a3585e2672045e8e28e6a45f279f80aef446959Tripp height: 40,
6a3585e2672045e8e28e6a45f279f80aef446959Tripp transform: "rotate(45)"
6a3585e2672045e8e28e6a45f279f80aef446959Tripp * <p>The code below would apply `translate` and `rotate` to an existing shape.</p>
6a3585e2672045e8e28e6a45f279f80aef446959Tripp myRect.set("transform", "translate(40, 50) rotate(45)");
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp * @config transform
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp * @type String
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp this._transforms = this.matrix.getTransformArray(val);
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp getter: function()
2ebe57b26e070070dacbe6e2b3351d5cefaee874Tripp return this._transform;
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Unique id for class instance.
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config id
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type String
828c58761d90445b8b9d20a82d85dc1479317f71Tripp valueFn: function()
828c58761d90445b8b9d20a82d85dc1479317f71Tripp return Y.guid();
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Indicates the x position of shape.
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config x
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Number
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Indicates the y position of shape.
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config y
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Number
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Indicates the width of the shape
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config width
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Number
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Indicates the height of the shape
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config height
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Number
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Indicates whether the shape is visible.
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config visible
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Boolean
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Contains information about the fill of the shape.
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>color</dt><dd>The color of the fill.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>type</dt><dd>Type of fill.
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>solid</dt><dd>Solid single color fill. (default)</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>linear</dt><dd>Linear gradient fill.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>radial</dt><dd>Radial gradient fill.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <p>If a `linear` or `radial` is specified as the fill type. The following additional property is used:
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>stops</dt><dd>An array of objects containing the following properties:
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>color</dt><dd>The color of the stop.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>offset</dt><dd>Number between 0 and 1 indicating where the color stop is positioned.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <p>Linear gradients also have the following property:</p>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>rotation</dt><dd>Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <p>Radial gradients have the following additional properties:</p>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>r</dt><dd>Radius of the gradient circle.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>fx</dt><dd>Focal point x-coordinate of the gradient.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>fy</dt><dd>Focal point y-coordinate of the gradient.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>cx</dt><dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <p>The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` classes which are used on Android or IE 6 - 8.</p>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>cy</dt><dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <p>The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.</p>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <p><strong>Note: </strong>Currently, this property is not implemented for corresponding `CanvasShape` and `VMLShape` classes which are used on Android or IE 6 - 8.</p>
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config fill
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Object
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * Contains information about the stroke of the shape.
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>color</dt><dd>The color of the stroke.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>weight</dt><dd>Number that indicates the width of the stroke.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>dashstyle</dt>Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * length of the dash. The second index indicates the length of gap.
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>linecap</dt><dd>Specifies the linecap for the stroke. The following values can be specified:
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>butt (default)</dt><dd>Specifies a butt linecap.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>square</dt><dd>Specifies a sqare linecap.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>round</dt><dd>Specifies a round linecap.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>linejoin</dt><dd>Specifies a linejoin for the stroke. The following values can be specified:
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>round (default)</dt><dd>Specifies that the linejoin will be round.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>bevel</dt><dd>Specifies a bevel for the linejoin.</dd>
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * <dt>miter limit</dt><dd>An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having
e0caea9528bfbb244d27129aa9dea5aebc07fc18Tripp * separate miter and miter limit values.</dd>
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config stroke
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type Object
2b904e83040752143af70b087f637e39035bb2e6Tripp var tmpl = this.get("stroke") || this._getDefaultStroke(),
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp //Not used. Remove in future.
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp // Only implemented in SVG
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp // Determines whether the instance will receive mouse events.
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp // @config pointerEvents
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp // @type string
828c58761d90445b8b9d20a82d85dc1479317f71Tripp valueFn: function()
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * The node used for gradient fills.
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config gradientNode
828c58761d90445b8b9d20a82d85dc1479317f71Tripp * @type HTMLElement
a75ebc38c1de401b679953a9b87bd323f0f48d02Tripp //Not used. Remove in future.
828c58761d90445b8b9d20a82d85dc1479317f71Tripp getter: function()
e7c7565d9550eaa87043aef0df77125ada996deaTripp * Dom node for the shape.
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config node
e7c7565d9550eaa87043aef0df77125ada996deaTripp * @type HTMLElement
e7c7565d9550eaa87043aef0df77125ada996deaTripp * @readOnly
828c58761d90445b8b9d20a82d85dc1479317f71Tripp getter: function()
828c58761d90445b8b9d20a82d85dc1479317f71Tripp return this.node;
e7c7565d9550eaa87043aef0df77125ada996deaTripp * Reference to the parent graphic instance
c093c1aed867e18aa4778708592e1ceb45d18cffTripp * @config graphic
e7c7565d9550eaa87043aef0df77125ada996deaTripp * @type SVGGraphic
e7c7565d9550eaa87043aef0df77125ada996deaTripp * @readOnly
828c58761d90445b8b9d20a82d85dc1479317f71Tripp getter: function()
828c58761d90445b8b9d20a82d85dc1479317f71Tripp return this._graphic;