graphics-svg-debug.js revision 45be085c4155ae7ef409ffa4d79457928742f18f
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * Set of drawing methods for SVG based classes.
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @module graphics
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @class SVGDrawing
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @constructor
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * Indicates the type of shape
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @property _type
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @type String
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * Draws a bezier curve.
8001ba81cb851b38d86650a2fef5817facffb763johanengelen * @method curveTo
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} cp1x x-coordinate for the first control point.
981b809bc6ed10a21e89444d9447e5475801874fjohanengelen * @param {Number} cp1y y-coordinate for the first control point.
981b809bc6ed10a21e89444d9447e5475801874fjohanengelen * @param {Number} cp2x x-coordinate for the second control point.
981b809bc6ed10a21e89444d9447e5475801874fjohanengelen * @param {Number} cp2y y-coordinate for the second control point.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} x x-coordinate for the end point.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} y y-coordinate for the end point.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński curveTo: function(cp1x, cp1y, cp2x, cp2y, x, y) {
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen currentArray = this._pathArray[Math.max(0, this._pathArray.length - 1)];
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen this._pathArray[pathArrayLen] = this._pathArray[pathArrayLen].concat([Math.round(cp1x), Math.round(cp1y), Math.round(cp2x) , Math.round(cp2y), x, y]);
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * Draws a quadratic bezier curve.
40742313779ee5e43be93a9191f1c86412cf183bKrzysztof Kosiński * @method quadraticCurveTo
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} cpx x-coordinate for the control point.
981b809bc6ed10a21e89444d9447e5475801874fjohanengelen * @param {Number} cpy y-coordinate for the control point.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} x x-coordinate for the end point.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} y y-coordinate for the end point.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński quadraticCurveTo: function(cpx, cpy, x, y) {
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen currentArray = this._pathArray[Math.max(0, this._pathArray.length - 1)];
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen this._pathArray[pathArrayLen] = this._pathArray[pathArrayLen].concat([Math.round(cpx), Math.round(cpy), Math.round(x), Math.round(y)]);
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * Draws a rectangle.
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @method drawRect
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} x x-coordinate
d8fa3c4faade9a5a8e7f79450544b1925e1ade41johanengelen * @param {Number} y y-coordinate
d8fa3c4faade9a5a8e7f79450544b1925e1ade41johanengelen * @param {Number} w width
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} h height
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen drawRect: function(x, y, w, h) {
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen this.lineTo(x + w, y);
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen this.lineTo(x + w, y + h);
d8fa3c4faade9a5a8e7f79450544b1925e1ade41johanengelen this.lineTo(x, y + h);
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * Draws a rectangle with rounded corners.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @method drawRect
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} x x-coordinate
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} y y-coordinate
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} w width
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} h height
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} ew width of the ellipse used to draw the rounded corners
d8fa3c4faade9a5a8e7f79450544b1925e1ade41johanengelen * @param {Number} eh height of the ellipse used to draw the rounded corners
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen this.quadraticCurveTo(x, y + h, x + ew, y + h);
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński this.quadraticCurveTo(x + w, y + h, x + w, y + h - eh);
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen this.quadraticCurveTo(x + w, y, x + w - ew, y);
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * Draws a wedge.
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} x x-coordinate of the wedge's center point
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} y y-coordinate of the wedge's center point
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} startAngle starting angle in degrees
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} arc sweep of the wedge. Negative values draw clockwise.
d37634d73670180f99a3e0ea583621373d90ec4fJohan Engelen * @param {Number} radius radius of wedge. If [optional] yRadius is defined, then radius is the x radius.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński * @param {Number} yRadius [optional] y radius for wedge.
d6519bf53baba32bd74436ad9c85f1fa2c6b6ae9Krzysztof Kosiński drawWedge: function(x, y, startAngle, arc, radius, yRadius)
pathArrayLen++;
pathArrayLen++;
for(; i < segs; ++i)
* Draws a line segment using the current line style from the current drawing position to the specified x and y coordinates.
len,
_getCurrentArray: function()
if(!currentArray)
currentArray = [];
return currentArray;
moveTo: function(x, y) {
var pathArrayLen,
this._trackSize(x, y);
end: function()
this._closePath();
clear: function()
this._pathArray = [];
_closePath: function()
var pathArray,
len,
val,
val2,
if(this._pathArray)
switch(pathType)
if(path)
this._fillChangeHandler();
this._strokeChangeHandler();
this._updateTransform();
_trackSize: function(w, h) {
if (w > this._right) {
this._right = w;
if(w < this._left)
this._left = w;
if (h < this._top)
this._top = h;
if (h > this._bottom)
this._bottom = h;
init: function()
var host = this;
classString = classString.replace(new RegExp(className + ' '), className).replace(new RegExp(className), '');
getXY: function()
_getDefaultFill: function() {
_getDefaultStroke: function()
createNode: function()
if(id)
if(pointerEvents)
_strokeChangeHandler: function(e)
dash,
_fillChangeHandler: function(e)
type;
if(fill)
var offset,
len,
def,
stop,
r = fill.r;
y2 = h;
y1 = h;
x1 = w;
x2 = w;
* @param {String|Object} name The name of the attribute. Alternatively, an object of key value pairs can
* @param {Any} value The value to set the attribute to. This value is ignored if an object is received as
set: function()
var host = this;
translate: function(x, y)
this._translateX = x;
this._translateY = y;
_translate: function(x, y)
skewX: function(x)
skewY: function(y)
matrix: function(a, b, c, d, e, f)
if(!this._transformArgs)
this._transformArgs = {};
if(this.initialized)
this._updateTransform();
_updateTransform: function()
key,
args,
val,
test,
if(this._transformArgs)
if(transform)
_draw: function()
this._fillChangeHandler();
this._strokeChangeHandler();
this._updateTransform();
_updateHandler: function(e)
this._draw();
getBounds: function()
right = x + w,
bottom = y + h,
tlx,
tly,
blx,
bly,
brx,
bry,
trx,
trY,
bounds = {},
return bounds;
* 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.
* 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.
destroy: function()
* 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
valueFn: function()
rotation: {
getter: function()
return this._rotation;
id: {
valueFn: function()
return Y.guid();
if(node)
return val;
width: {
height: {
visible: {
value: true,
return val;
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.</dd>
* <p>If a gradient (linear or radial) is specified as the fill type. The following properties are used:
* <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 <= 8</dd>
fill: {
var fill,
return fill;
* <dt>opacity</dt><dd>Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.</dd>
* <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
stroke: {
autoSize: {
value: false
valueFn: function()
if(node)
return val;
if(node)
return val;
translateX: {
getter: function()
return this._translateX;
return val;
translateY: {
getter: function()
return this._translateY;
return val;
gradientNode: {
return val;
autoDraw: {
getter: function()
node: {
readOnly: true,
getter: function()
return this.node;
graphic: {
readOnly: true,
getter: function()
return this._graphic;
translate: function(x, y)
this._translateX = x;
this._translateY = y;
_draw: function()
this._fillChangeHandler();
this._strokeChangeHandler();
getBounds: function()
bounds = {},
return bounds;
path: {
readOnly: true,
getter: function()
return this._path;
width: {
getter: function()
return val;
height: {
getter: function()
SVGRect = function()
_draw: function()
this._fillChangeHandler();
this._strokeChangeHandler();
this._updateTransform();
xRadius: {
getter: function()
if(val)
return val;
yRadius: {
getter: function()
if(val)
return val;
_draw: function()
this._fillChangeHandler();
this._strokeChangeHandler();
this._updateTransform();
width: {
return val;
getter: function()
height: {
return val;
getter: function()
radius: {
SVGPieSlice = function()
_draw: function(e)
this.clear();
this.end();
cx: {
cy: {
startAngle: {
arc: {
radius: {
render: {},
id: {
valueFn: function()
return Y.guid();
if(node)
return val;
shapes: {
readOnly: true,
getter: function()
return this._shapes;
* Object containing size and coordinate data for the content of a Graphic in relation to the coordSpace node.
readOnly: true,
getter: function()
return this._contentBounds;
node: {
readOnly: true,
getter: function()
return this._node;
width: {
if(this._node)
return val;
height: {
if(this._node)
return val;
* Determines how the size of instance is calculated. If true, the width and height are determined by the size of the contents.
* If false, the width and height values are either explicitly set or determined by the size of the parent node's dimensions.
autoSize: {
value: false
* When overflow is set to true, by default, the contentBounds will resize to greater values but not to smaller values. (for performance)
resizeDown: {
getter: function()
return this._resizeDown;
this._redraw();
return val;
getter: function()
return this._x;
if(this._node)
return val;
getter: function()
return this._y;
if(this._node)
return val;
* Indicates whether or not the instance will automatically redraw after a change is made to a shape.
autoDraw: {
value: true
visible: {
value: true,
return val;
getXY: function()
xy;
if(node)
return xy;
_resizeDown: false,
initializer: function() {
this._shapes = {};
this._contentBounds = {
this._gradients = {};
if(render)
destroy: function()
this.removeAllShapes();
return shape;
this._redraw();
return shape;
removeAllShapes: function()
for(i in shapes)
this._shapes = {};
var child;
clear: function() {
this.removeAllShapes();
if(shapes)
for(i in shapes)
if(shape)
return shape;
return val;
_shapeClass: {
return shape;
method();
this._redraw();
_getDocFrag: function()
if(!this._frag)
return this._frag;
_redraw: function()
this._contentNode.setAttribute("viewBox", "" + box.left + " " + box.top + " " + box.width + " " + box.height + "");
if(this._frag)
this._frag = null;
var shapeBox,
box;
this._redraw();
_getUpdatedContentBounds: function()
var bounds,
box = {
for(i in queue)
return box;
_createGraphics: function() {
return contentNode;
return node;
if(!this._defs)
return gradient;