lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-22 20:14:01 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

now using setAttrs for all Shape and shapes setters

Browse Source
This commit is contained in:
Eric Rowell
2012-06-10 00:02:16 -07:00
parent 13105969b1
commit 6b70e1b18f
12 changed files with 298 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
dist/kinetic-core.js vendored
View File

@@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Jun 09 2012 * Date: Jun 10 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *
@@ -2990,9 +2990,9 @@ Kinetic.Shape.prototype = {
* radial gradient object, or pattern object * radial gradient object, or pattern object
* @param {String|Object} fill * @param {String|Object} fill
*/ */
setFill: function(config) { setFill: function(fill) {
this.setAttrs({ this.setAttrs({
fill: config fill: fill
}); });
}, },
/** /**
@@ -3006,7 +3006,9 @@ Kinetic.Shape.prototype = {
* @param {String} stroke * @param {String} stroke
*/ */
setStroke: function(stroke) { setStroke: function(stroke) {
this.attrs.stroke = stroke; this.setAttrs({
stroke: stroke
});
}, },
/** /**
* get stroke color * get stroke color
@@ -3020,7 +3022,9 @@ Kinetic.Shape.prototype = {
* default is miter * default is miter
*/ */
setLineJoin: function(lineJoin) { setLineJoin: function(lineJoin) {
this.attrs.lineJoin = lineJoin; this.setAttrs({
lineJoin: lineJoin
});
}, },
/** /**
* get line join * get line join
@@ -3033,7 +3037,9 @@ Kinetic.Shape.prototype = {
* @param {Number} strokeWidth * @param {Number} strokeWidth
*/ */
setStrokeWidth: function(strokeWidth) { setStrokeWidth: function(strokeWidth) {
this.attrs.strokeWidth = strokeWidth; this.setAttrs({
strokeWidth: strokeWidth
});
}, },
/** /**
* get stroke width * get stroke width
@@ -3061,7 +3067,9 @@ Kinetic.Shape.prototype = {
* @param {Function} func drawing function * @param {Function} func drawing function
*/ */
setDrawFunc: function(func) { setDrawFunc: function(func) {
this.attrs.drawFunc = func; this.setAttrs({
drawFunc: func
});
}, },
/** /**
* save shape data when using pixel detection. * save shape data when using pixel detection.
@@ -3192,7 +3200,7 @@ Kinetic.Rect = function(config) {
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false); context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
} }
context.closePath(); context.closePath();
this.fill(); this.fill();
this.stroke(); this.stroke();
}; };
@@ -3208,7 +3216,9 @@ Kinetic.Rect.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.attrs.width = width; this.setAttrs({
width: width
});
}, },
/** /**
* get width * get width
@@ -3221,7 +3231,9 @@ Kinetic.Rect.prototype = {
* @param {Number} height * @param {Number} height
*/ */
setHeight: function(height) { setHeight: function(height) {
this.attrs.height = height; this.setAttrs({
height: height
});
}, },
/** /**
* get height * get height
@@ -3250,14 +3262,16 @@ Kinetic.Rect.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setCornerRadius: function(radius) { setCornerRadius: function(radius) {
this.attrs.cornerRadius = radius; this.setAttrs({
cornerRadius: radius
});
}, },
/** /**
* get corner radius * get corner radius
*/ */
getCornerRadius: function() { getCornerRadius: function() {
return this.attrs.cornerRadius; return this.attrs.cornerRadius;
}, }
}; };
// extend Shape // extend Shape
@@ -3300,7 +3314,9 @@ Kinetic.Circle.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setRadius: function(radius) { setRadius: function(radius) {
this.attrs.radius = radius; this.setAttrs({
radius: radius
});
}, },
/** /**
* get radius * get radius
@@ -3372,7 +3388,9 @@ Kinetic.Image.prototype = {
* @param {ImageObject} image * @param {ImageObject} image
*/ */
setImage: function(image) { setImage: function(image) {
this.attrs.image = image; this.setAttrs({
image: image
});
}, },
/** /**
* get image * get image
@@ -3385,7 +3403,9 @@ Kinetic.Image.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.attrs.width = width; this.setAttrs({
width: width
});
}, },
/** /**
* get width * get width
@@ -3398,7 +3418,9 @@ Kinetic.Image.prototype = {
* @param {Number} height * @param {Number} height
*/ */
setHeight: function(height) { setHeight: function(height) {
this.attrs.height = height; this.setAttrs({
height: height
});
}, },
/** /**
* get height * get height
@@ -3465,7 +3487,7 @@ Kinetic.Sprite = function(config) {
context.beginPath(); context.beginPath();
context.rect(0, 0, f.width, f.height); context.rect(0, 0, f.width, f.height);
context.closePath(); context.closePath();
this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height); this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
} }
}; };
@@ -3510,14 +3532,18 @@ Kinetic.Sprite.prototype = {
* @param {String} anim animation key * @param {String} anim animation key
*/ */
setAnimation: function(anim) { setAnimation: function(anim) {
this.attrs.animation = anim; this.setAttrs({
animation: anim
});
}, },
/** /**
* set animations obect * set animations obect
* @param {Object} animations * @param {Object} animations
*/ */
setAnimations: function(animations) { setAnimations: function(animations) {
this.attrs.animations = animations; this.setAttrs({
animations: animations
});
}, },
/** /**
* get animations object * get animations object
@@ -3536,7 +3562,9 @@ Kinetic.Sprite.prototype = {
* @param {Integer} index frame index * @param {Integer} index frame index
*/ */
setIndex: function(index) { setIndex: function(index) {
this.attrs.index = index; this.setAttrs({
index: index
});
}, },
_updateIndex: function() { _updateIndex: function() {
var i = this.attrs.index; var i = this.attrs.index;
@@ -3648,7 +3676,9 @@ Kinetic.RegularPolygon.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setRadius: function(radius) { setRadius: function(radius) {
this.attrs.radius = radius; this.setAttrs({
radius: radius
});
}, },
/** /**
* get radius * get radius
@@ -3661,7 +3691,9 @@ Kinetic.RegularPolygon.prototype = {
* @param {int} sides * @param {int} sides
*/ */
setSides: function(sides) { setSides: function(sides) {
this.attrs.sides = sides; this.setAttrs({
sides: sides
});
}, },
/** /**
* get number of sides * get number of sides
@@ -3703,7 +3735,7 @@ Kinetic.Star = function(config) {
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
this.fill(); this.fill();
this.stroke(); this.stroke();
}; };
@@ -3719,7 +3751,9 @@ Kinetic.Star.prototype = {
* @param {Integer} points * @param {Integer} points
*/ */
setNumPoints: function(numPoints) { setNumPoints: function(numPoints) {
this.attrs.numPoints = numPoints; this.setAttrs({
numPoints: numPoints
});
}, },
/** /**
* get number of points * get number of points
@@ -3732,7 +3766,9 @@ Kinetic.Star.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setOuterRadius: function(radius) { setOuterRadius: function(radius) {
this.attrs.outerRadius = radius; this.setAttrs({
outerRadius: radius
});
}, },
/** /**
* get outer radius * get outer radius
@@ -3745,7 +3781,9 @@ Kinetic.Star.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setInnerRadius: function(radius) { setInnerRadius: function(radius) {
this.attrs.innerRadius = radius; this.setAttrs({
innerRadius: radius
});
}, },
/** /**
* get inner radius * get inner radius
@@ -3851,7 +3889,9 @@ Kinetic.Text.prototype = {
* @param {String} fontFamily * @param {String} fontFamily
*/ */
setFontFamily: function(fontFamily) { setFontFamily: function(fontFamily) {
this.attrs.fontFamily = fontFamily; this.setAttrs({
fontFamily: fontFamily
});
}, },
/** /**
* get font family * get font family
@@ -3864,7 +3904,9 @@ Kinetic.Text.prototype = {
* @param {int} fontSize * @param {int} fontSize
*/ */
setFontSize: function(fontSize) { setFontSize: function(fontSize) {
this.attrs.fontSize = fontSize; this.setAttrs({
fontSize: fontSize
});
}, },
/** /**
* get font size * get font size
@@ -3877,7 +3919,9 @@ Kinetic.Text.prototype = {
* @param {String} fontStyle * @param {String} fontStyle
*/ */
setFontStyle: function(fontStyle) { setFontStyle: function(fontStyle) {
this.attrs.fontStyle = fontStyle; this.setAttrs({
fontStyle: fontStyle
});
}, },
/** /**
* get font style * get font style
@@ -3890,7 +3934,9 @@ Kinetic.Text.prototype = {
* @param {String} textFill * @param {String} textFill
*/ */
setTextFill: function(textFill) { setTextFill: function(textFill) {
this.attrs.textFill = textFill; this.setAttrs({
textFill: textFill
});
}, },
/** /**
* get text fill color * get text fill color
@@ -3903,7 +3949,9 @@ Kinetic.Text.prototype = {
* @param {String} textStroke * @param {String} textStroke
*/ */
setTextStroke: function(textStroke) { setTextStroke: function(textStroke) {
this.attrs.textStroke = textStroke; this.setAttrs({
textStroke: textStroke
});
}, },
/** /**
* get text stroke color * get text stroke color
@@ -3916,7 +3964,9 @@ Kinetic.Text.prototype = {
* @param {int} textStrokeWidth * @param {int} textStrokeWidth
*/ */
setTextStrokeWidth: function(textStrokeWidth) { setTextStrokeWidth: function(textStrokeWidth) {
this.attrs.textStrokeWidth = textStrokeWidth; this.setAttrs({
textStrokeWidth: textStrokeWidth
});
}, },
/** /**
* get text stroke width * get text stroke width
@@ -3929,7 +3979,9 @@ Kinetic.Text.prototype = {
* @param {int} padding * @param {int} padding
*/ */
setPadding: function(padding) { setPadding: function(padding) {
this.attrs.padding = padding; this.setAttrs({
padding: padding
});
}, },
/** /**
* get padding * get padding
@@ -3942,7 +3994,9 @@ Kinetic.Text.prototype = {
* @param {String} align align can be 'left', 'center', or 'right' * @param {String} align align can be 'left', 'center', or 'right'
*/ */
setAlign: function(align) { setAlign: function(align) {
this.attrs.align = align; this.setAttrs({
align: align
});
}, },
/** /**
* get horizontal align * get horizontal align
@@ -3955,7 +4009,9 @@ Kinetic.Text.prototype = {
* @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom" * @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom"
*/ */
setVerticalAlign: function(verticalAlign) { setVerticalAlign: function(verticalAlign) {
this.attrs.verticalAlign = verticalAlign; this.setAttrs({
verticalAlign: verticalAlign
});
}, },
/** /**
* get vertical align * get vertical align
@@ -3968,7 +4024,9 @@ Kinetic.Text.prototype = {
* @param {String} text * @param {String} text
*/ */
setText: function(text) { setText: function(text) {
this.attrs.text = text; this.setAttrs({
text: text
});
}, },
/** /**
* get text * get text
@@ -4024,7 +4082,9 @@ Kinetic.Text.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.attrs.width = width; this.setAttrs({
width: width
});
} }
}; };
// extend Shape // extend Shape
@@ -4104,7 +4164,9 @@ Kinetic.Line.prototype = {
* @param {String} lineCap * @param {String} lineCap
*/ */
setLineCap: function(lineCap) { setLineCap: function(lineCap) {
this.attrs.lineCap = lineCap; this.setAttrs({
lineCap: lineCap
});
}, },
/** /**
* get line cap * get line cap
@@ -4123,7 +4185,9 @@ Kinetic.Line.prototype = {
* apart * apart
*/ */
setDashArray: function(dashArray) { setDashArray: function(dashArray) {
this.attrs.dashArray = dashArray; this.setAttrs({
dashArray: dashArray
});
}, },
/** /**
* get dash array * get dash array
@@ -4187,7 +4251,7 @@ Kinetic.GlobalObject.extend(Kinetic.Line, Kinetic.Shape);
// SVG Path // SVG Path
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
/** /**
* Path constructor. * Path constructor.
* @author Jason Follas * @author Jason Follas
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Shape
@@ -4220,7 +4284,7 @@ Kinetic.Path = function(config) {
break; break;
case 'A': case 'A':
var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7]; var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7];
var r = (rx > ry) ? rx : ry; var r = (rx > ry) ? rx : ry;
var scaleX = (rx > ry) ? 1 : rx / ry; var scaleX = (rx > ry) ? 1 : rx / ry;
var scaleY = (rx > ry) ? ry / rx : 1; var scaleY = (rx > ry) ? ry / rx : 1;
@@ -4232,8 +4296,8 @@ Kinetic.Path = function(config) {
context.scale(1 / scaleX, 1 / scaleY); context.scale(1 / scaleX, 1 / scaleY);
context.rotate(-psi); context.rotate(-psi);
context.translate(-cx, -cy); context.translate(-cx, -cy);
break; break;
case 'z': case 'z':
context.closePath(); context.closePath();
break; break;
@@ -4453,17 +4517,13 @@ Kinetic.Path.prototype = {
break; break;
case 'A': case 'A':
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
var x1 = cpx, y1 = cpy; var x1 = cpx, y1 = cpy; cpx = p.shift(), cpy = p.shift();
cpx = p.shift(), cpy = p.shift();
cmd = 'A'; cmd = 'A';
points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break; break;
case 'a': case 'a':
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
var x1 = cpx, y1 = cpy; var x1 = cpx, y1 = cpy; cpx += p.shift(), cpy += p.shift();
cpx += p.shift(), cpy += p.shift();
cmd = 'A'; cmd = 'A';
points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break; break;
@@ -4499,53 +4559,66 @@ Kinetic.Path.prototype = {
* @param {String} SVG path command string * @param {String} SVG path command string
*/ */
setData: function(data) { setData: function(data) {
this.attrs.data = data; this.setAttrs({
data: data
});
this.dataArray = this.getDataArray(); this.dataArray = this.getDataArray();
}, },
_convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { _convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
var psi = psiDeg * (Math.PI / 180.0); var psi = psiDeg * (Math.PI / 180.0);
var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0; var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0;
var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0; var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0;
var lambda = (xp*xp) / (rx*rx) + (yp*yp) / (ry*ry); var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
if (lambda > 1) { if(lambda > 1) {
rx *= Math.sqrt(lambda); rx *= Math.sqrt(lambda);
ry *= Math.sqrt(lambda); ry *= Math.sqrt(lambda);
} }
var f = Math.sqrt((((rx*rx) * (ry*ry)) - ((rx*rx) * (yp*yp)) - ((ry*ry) * (xp*xp))) / ((rx*rx) * (yp*yp) + (ry*ry) * (xp*xp))); var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp)));
if (fa == fs) f *= -1; if(fa == fs)
if (isNaN(f)) f = 0; f *= -1;
if(isNaN(f))
f = 0;
var cxp = f * rx * yp / ry; var cxp = f * rx * yp / ry;
var cyp = f * -ry * xp / rx; var cyp = f * -ry * xp / rx;
var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp; var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp; var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
var vMag = function(v) { return Math.sqrt(v[0]*v[0] + v[1]*v[1]); } var vMag = function(v) {
var vRatio = function(u, v) { return (u[0]*v[0] + u[1]*v[1]) / (vMag(u) * vMag(v)) } return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
var vAngle = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(vRatio(u,v)); } }
var vRatio = function(u, v) {
var theta = vAngle([1,0], [(xp - cxp) / rx, (yp - cyp) / ry]); return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v))
}
var vAngle = function(u, v) {
return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
}
var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
var u = [(xp - cxp) / rx, (yp - cyp) / ry]; var u = [(xp - cxp) / rx, (yp - cyp) / ry];
var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry]; var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
var dTheta = vAngle(u, v); var dTheta = vAngle(u, v);
if (vRatio(u,v) <= -1) dTheta = Math.PI;
if (vRatio(u,v) >= 1) dTheta = 0;
if (fs == 0 && dTheta > 0) dTheta = dTheta - 2 * Math.PI; if(vRatio(u, v) <= -1)
if (fs == 1 && dTheta < 0) dTheta = dTheta + 2 * Math.PI; dTheta = Math.PI;
if(vRatio(u, v) >= 1)
return [cx, cy, rx, ry, theta, dTheta, psi, fs]; dTheta = 0;
if(fs == 0 && dTheta > 0)
dTheta = dTheta - 2 * Math.PI;
if(fs == 1 && dTheta < 0)
dTheta = dTheta + 2 * Math.PI;
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
} }
}; };

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/Shape.js
View File

@@ -294,9 +294,9 @@ Kinetic.Shape.prototype = {
* radial gradient object, or pattern object * radial gradient object, or pattern object
* @param {String|Object} fill * @param {String|Object} fill
*/ */
setFill: function(config) { setFill: function(fill) {
this.setAttrs({ this.setAttrs({
fill: config fill: fill
}); });
}, },
/** /**
@@ -310,7 +310,9 @@ Kinetic.Shape.prototype = {
* @param {String} stroke * @param {String} stroke
*/ */
setStroke: function(stroke) { setStroke: function(stroke) {
this.attrs.stroke = stroke; this.setAttrs({
stroke: stroke
});
}, },
/** /**
* get stroke color * get stroke color
@@ -324,7 +326,9 @@ Kinetic.Shape.prototype = {
* default is miter * default is miter
*/ */
setLineJoin: function(lineJoin) { setLineJoin: function(lineJoin) {
this.attrs.lineJoin = lineJoin; this.setAttrs({
lineJoin: lineJoin
});
}, },
/** /**
* get line join * get line join
@@ -337,7 +341,9 @@ Kinetic.Shape.prototype = {
* @param {Number} strokeWidth * @param {Number} strokeWidth
*/ */
setStrokeWidth: function(strokeWidth) { setStrokeWidth: function(strokeWidth) {
this.attrs.strokeWidth = strokeWidth; this.setAttrs({
strokeWidth: strokeWidth
});
}, },
/** /**
* get stroke width * get stroke width
@@ -365,7 +371,9 @@ Kinetic.Shape.prototype = {
* @param {Function} func drawing function * @param {Function} func drawing function
*/ */
setDrawFunc: function(func) { setDrawFunc: function(func) {
this.attrs.drawFunc = func; this.setAttrs({
drawFunc: func
});
}, },
/** /**
* save shape data when using pixel detection. * save shape data when using pixel detection.

4
src/shapes/Circle.js
View File

@@ -35,7 +35,9 @@ Kinetic.Circle.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setRadius: function(radius) { setRadius: function(radius) {
this.attrs.radius = radius; this.setAttrs({
radius: radius
});
}, },
/** /**
* get radius * get radius

12
src/shapes/Image.js
View File

@@ -57,7 +57,9 @@ Kinetic.Image.prototype = {
* @param {ImageObject} image * @param {ImageObject} image
*/ */
setImage: function(image) { setImage: function(image) {
this.attrs.image = image; this.setAttrs({
image: image
});
}, },
/** /**
* get image * get image
@@ -70,7 +72,9 @@ Kinetic.Image.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.attrs.width = width; this.setAttrs({
width: width
});
}, },
/** /**
* get width * get width
@@ -83,7 +87,9 @@ Kinetic.Image.prototype = {
* @param {Number} height * @param {Number} height
*/ */
setHeight: function(height) { setHeight: function(height) {
this.attrs.height = height; this.setAttrs({
height: height
});
}, },
/** /**
* get height * get height

8
src/shapes/Line.js
View File

@@ -72,7 +72,9 @@ Kinetic.Line.prototype = {
* @param {String} lineCap * @param {String} lineCap
*/ */
setLineCap: function(lineCap) { setLineCap: function(lineCap) {
this.attrs.lineCap = lineCap; this.setAttrs({
lineCap: lineCap
});
}, },
/** /**
* get line cap * get line cap
@@ -91,7 +93,9 @@ Kinetic.Line.prototype = {
* apart * apart
*/ */
setDashArray: function(dashArray) { setDashArray: function(dashArray) {
this.attrs.dashArray = dashArray; this.setAttrs({
dashArray: dashArray
});
}, },
/** /**
* get dash array * get dash array

81
src/shapes/Path.js
View File

@@ -2,7 +2,7 @@
// SVG Path // SVG Path
/////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////
/** /**
* Path constructor. * Path constructor.
* @author Jason Follas * @author Jason Follas
* @constructor * @constructor
* @augments Kinetic.Shape * @augments Kinetic.Shape
@@ -35,7 +35,7 @@ Kinetic.Path = function(config) {
break; break;
case 'A': case 'A':
var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7]; var cx = p[0], cy = p[1], rx = p[2], ry = p[3], theta = p[4], dTheta = p[5], psi = p[6], fs = p[7];
var r = (rx > ry) ? rx : ry; var r = (rx > ry) ? rx : ry;
var scaleX = (rx > ry) ? 1 : rx / ry; var scaleX = (rx > ry) ? 1 : rx / ry;
var scaleY = (rx > ry) ? ry / rx : 1; var scaleY = (rx > ry) ? ry / rx : 1;
@@ -47,8 +47,8 @@ Kinetic.Path = function(config) {
context.scale(1 / scaleX, 1 / scaleY); context.scale(1 / scaleX, 1 / scaleY);
context.rotate(-psi); context.rotate(-psi);
context.translate(-cx, -cy); context.translate(-cx, -cy);
break; break;
case 'z': case 'z':
context.closePath(); context.closePath();
break; break;
@@ -268,17 +268,13 @@ Kinetic.Path.prototype = {
break; break;
case 'A': case 'A':
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
var x1 = cpx, y1 = cpy; var x1 = cpx, y1 = cpy; cpx = p.shift(), cpy = p.shift();
cpx = p.shift(), cpy = p.shift();
cmd = 'A'; cmd = 'A';
points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break; break;
case 'a': case 'a':
var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift(); var rx = p.shift(), ry = p.shift(), psi = p.shift(), fa = p.shift(), fs = p.shift();
var x1 = cpx, y1 = cpy; var x1 = cpx, y1 = cpy; cpx += p.shift(), cpy += p.shift();
cpx += p.shift(), cpy += p.shift();
cmd = 'A'; cmd = 'A';
points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi); points = this._convertEndpointToCenterParameterization(x1, y1, cpx, cpy, fa, fs, rx, ry, psi);
break; break;
@@ -314,53 +310,66 @@ Kinetic.Path.prototype = {
* @param {String} SVG path command string * @param {String} SVG path command string
*/ */
setData: function(data) { setData: function(data) {
this.attrs.data = data; this.setAttrs({
data: data
});
this.dataArray = this.getDataArray(); this.dataArray = this.getDataArray();
}, },
_convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) { _convertEndpointToCenterParameterization: function(x1, y1, x2, y2, fa, fs, rx, ry, psiDeg) {
// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
var psi = psiDeg * (Math.PI / 180.0); var psi = psiDeg * (Math.PI / 180.0);
var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0; var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0;
var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0; var yp = -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0;
var lambda = (xp*xp) / (rx*rx) + (yp*yp) / (ry*ry); var lambda = (xp * xp) / (rx * rx) + (yp * yp) / (ry * ry);
if (lambda > 1) { if(lambda > 1) {
rx *= Math.sqrt(lambda); rx *= Math.sqrt(lambda);
ry *= Math.sqrt(lambda); ry *= Math.sqrt(lambda);
} }
var f = Math.sqrt((((rx*rx) * (ry*ry)) - ((rx*rx) * (yp*yp)) - ((ry*ry) * (xp*xp))) / ((rx*rx) * (yp*yp) + (ry*ry) * (xp*xp))); var f = Math.sqrt((((rx * rx) * (ry * ry)) - ((rx * rx) * (yp * yp)) - ((ry * ry) * (xp * xp))) / ((rx * rx) * (yp * yp) + (ry * ry) * (xp * xp)));
if (fa == fs) f *= -1; if(fa == fs)
if (isNaN(f)) f = 0; f *= -1;
if(isNaN(f))
f = 0;
var cxp = f * rx * yp / ry; var cxp = f * rx * yp / ry;
var cyp = f * -ry * xp / rx; var cyp = f * -ry * xp / rx;
var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp; var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;
var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp; var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;
var vMag = function(v) { return Math.sqrt(v[0]*v[0] + v[1]*v[1]); } var vMag = function(v) {
var vRatio = function(u, v) { return (u[0]*v[0] + u[1]*v[1]) / (vMag(u) * vMag(v)) } return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
var vAngle = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(vRatio(u,v)); } }
var vRatio = function(u, v) {
var theta = vAngle([1,0], [(xp - cxp) / rx, (yp - cyp) / ry]); return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v))
}
var vAngle = function(u, v) {
return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));
}
var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);
var u = [(xp - cxp) / rx, (yp - cyp) / ry]; var u = [(xp - cxp) / rx, (yp - cyp) / ry];
var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry]; var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];
var dTheta = vAngle(u, v); var dTheta = vAngle(u, v);
if (vRatio(u,v) <= -1) dTheta = Math.PI;
if (vRatio(u,v) >= 1) dTheta = 0;
if (fs == 0 && dTheta > 0) dTheta = dTheta - 2 * Math.PI; if(vRatio(u, v) <= -1)
if (fs == 1 && dTheta < 0) dTheta = dTheta + 2 * Math.PI; dTheta = Math.PI;
if(vRatio(u, v) >= 1)
return [cx, cy, rx, ry, theta, dTheta, psi, fs]; dTheta = 0;
if(fs == 0 && dTheta > 0)
dTheta = dTheta - 2 * Math.PI;
if(fs == 1 && dTheta < 0)
dTheta = dTheta + 2 * Math.PI;
return [cx, cy, rx, ry, theta, dTheta, psi, fs];
} }
}; };

16
src/shapes/Rect.js
View File

@@ -36,7 +36,7 @@ Kinetic.Rect = function(config) {
context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false); context.arc(this.attrs.cornerRadius, this.attrs.cornerRadius, this.attrs.cornerRadius, Math.PI, Math.PI * 3 / 2, false);
} }
context.closePath(); context.closePath();
this.fill(); this.fill();
this.stroke(); this.stroke();
}; };
@@ -52,7 +52,9 @@ Kinetic.Rect.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.attrs.width = width; this.setAttrs({
width: width
});
}, },
/** /**
* get width * get width
@@ -65,7 +67,9 @@ Kinetic.Rect.prototype = {
* @param {Number} height * @param {Number} height
*/ */
setHeight: function(height) { setHeight: function(height) {
this.attrs.height = height; this.setAttrs({
height: height
});
}, },
/** /**
* get height * get height
@@ -94,14 +98,16 @@ Kinetic.Rect.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setCornerRadius: function(radius) { setCornerRadius: function(radius) {
this.attrs.cornerRadius = radius; this.setAttrs({
cornerRadius: radius
});
}, },
/** /**
* get corner radius * get corner radius
*/ */
getCornerRadius: function() { getCornerRadius: function() {
return this.attrs.cornerRadius; return this.attrs.cornerRadius;
}, }
}; };
// extend Shape // extend Shape

8
src/shapes/RegularPolygon.js
View File

@@ -40,7 +40,9 @@ Kinetic.RegularPolygon.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setRadius: function(radius) { setRadius: function(radius) {
this.attrs.radius = radius; this.setAttrs({
radius: radius
});
}, },
/** /**
* get radius * get radius
@@ -53,7 +55,9 @@ Kinetic.RegularPolygon.prototype = {
* @param {int} sides * @param {int} sides
*/ */
setSides: function(sides) { setSides: function(sides) {
this.attrs.sides = sides; this.setAttrs({
sides: sides
});
}, },
/** /**
* get number of sides * get number of sides

14
src/shapes/Sprite.js
View File

@@ -23,7 +23,7 @@ Kinetic.Sprite = function(config) {
context.beginPath(); context.beginPath();
context.rect(0, 0, f.width, f.height); context.rect(0, 0, f.width, f.height);
context.closePath(); context.closePath();
this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height); this.drawImage(this.attrs.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
} }
}; };
@@ -68,14 +68,18 @@ Kinetic.Sprite.prototype = {
* @param {String} anim animation key * @param {String} anim animation key
*/ */
setAnimation: function(anim) { setAnimation: function(anim) {
this.attrs.animation = anim; this.setAttrs({
animation: anim
});
}, },
/** /**
* set animations obect * set animations obect
* @param {Object} animations * @param {Object} animations
*/ */
setAnimations: function(animations) { setAnimations: function(animations) {
this.attrs.animations = animations; this.setAttrs({
animations: animations
});
}, },
/** /**
* get animations object * get animations object
@@ -94,7 +98,9 @@ Kinetic.Sprite.prototype = {
* @param {Integer} index frame index * @param {Integer} index frame index
*/ */
setIndex: function(index) { setIndex: function(index) {
this.attrs.index = index; this.setAttrs({
index: index
});
}, },
_updateIndex: function() { _updateIndex: function() {
var i = this.attrs.index; var i = this.attrs.index;

14
src/shapes/Star.js
View File

@@ -27,7 +27,7 @@ Kinetic.Star = function(config) {
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
this.fill(); this.fill();
this.stroke(); this.stroke();
}; };
@@ -43,7 +43,9 @@ Kinetic.Star.prototype = {
* @param {Integer} points * @param {Integer} points
*/ */
setNumPoints: function(numPoints) { setNumPoints: function(numPoints) {
this.attrs.numPoints = numPoints; this.setAttrs({
numPoints: numPoints
});
}, },
/** /**
* get number of points * get number of points
@@ -56,7 +58,9 @@ Kinetic.Star.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setOuterRadius: function(radius) { setOuterRadius: function(radius) {
this.attrs.outerRadius = radius; this.setAttrs({
outerRadius: radius
});
}, },
/** /**
* get outer radius * get outer radius
@@ -69,7 +73,9 @@ Kinetic.Star.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setInnerRadius: function(radius) { setInnerRadius: function(radius) {
this.attrs.innerRadius = radius; this.setAttrs({
innerRadius: radius
});
}, },
/** /**
* get inner radius * get inner radius

44
src/shapes/Text.js
View File

@@ -92,7 +92,9 @@ Kinetic.Text.prototype = {
* @param {String} fontFamily * @param {String} fontFamily
*/ */
setFontFamily: function(fontFamily) { setFontFamily: function(fontFamily) {
this.attrs.fontFamily = fontFamily; this.setAttrs({
fontFamily: fontFamily
});
}, },
/** /**
* get font family * get font family
@@ -105,7 +107,9 @@ Kinetic.Text.prototype = {
* @param {int} fontSize * @param {int} fontSize
*/ */
setFontSize: function(fontSize) { setFontSize: function(fontSize) {
this.attrs.fontSize = fontSize; this.setAttrs({
fontSize: fontSize
});
}, },
/** /**
* get font size * get font size
@@ -118,7 +122,9 @@ Kinetic.Text.prototype = {
* @param {String} fontStyle * @param {String} fontStyle
*/ */
setFontStyle: function(fontStyle) { setFontStyle: function(fontStyle) {
this.attrs.fontStyle = fontStyle; this.setAttrs({
fontStyle: fontStyle
});
}, },
/** /**
* get font style * get font style
@@ -131,7 +137,9 @@ Kinetic.Text.prototype = {
* @param {String} textFill * @param {String} textFill
*/ */
setTextFill: function(textFill) { setTextFill: function(textFill) {
this.attrs.textFill = textFill; this.setAttrs({
textFill: textFill
});
}, },
/** /**
* get text fill color * get text fill color
@@ -144,7 +152,9 @@ Kinetic.Text.prototype = {
* @param {String} textStroke * @param {String} textStroke
*/ */
setTextStroke: function(textStroke) { setTextStroke: function(textStroke) {
this.attrs.textStroke = textStroke; this.setAttrs({
textStroke: textStroke
});
}, },
/** /**
* get text stroke color * get text stroke color
@@ -157,7 +167,9 @@ Kinetic.Text.prototype = {
* @param {int} textStrokeWidth * @param {int} textStrokeWidth
*/ */
setTextStrokeWidth: function(textStrokeWidth) { setTextStrokeWidth: function(textStrokeWidth) {
this.attrs.textStrokeWidth = textStrokeWidth; this.setAttrs({
textStrokeWidth: textStrokeWidth
});
}, },
/** /**
* get text stroke width * get text stroke width
@@ -170,7 +182,9 @@ Kinetic.Text.prototype = {
* @param {int} padding * @param {int} padding
*/ */
setPadding: function(padding) { setPadding: function(padding) {
this.attrs.padding = padding; this.setAttrs({
padding: padding
});
}, },
/** /**
* get padding * get padding
@@ -183,7 +197,9 @@ Kinetic.Text.prototype = {
* @param {String} align align can be 'left', 'center', or 'right' * @param {String} align align can be 'left', 'center', or 'right'
*/ */
setAlign: function(align) { setAlign: function(align) {
this.attrs.align = align; this.setAttrs({
align: align
});
}, },
/** /**
* get horizontal align * get horizontal align
@@ -196,7 +212,9 @@ Kinetic.Text.prototype = {
* @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom" * @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom"
*/ */
setVerticalAlign: function(verticalAlign) { setVerticalAlign: function(verticalAlign) {
this.attrs.verticalAlign = verticalAlign; this.setAttrs({
verticalAlign: verticalAlign
});
}, },
/** /**
* get vertical align * get vertical align
@@ -209,7 +227,9 @@ Kinetic.Text.prototype = {
* @param {String} text * @param {String} text
*/ */
setText: function(text) { setText: function(text) {
this.attrs.text = text; this.setAttrs({
text: text
});
}, },
/** /**
* get text * get text
@@ -265,7 +285,9 @@ Kinetic.Text.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.attrs.width = width; this.setAttrs({
width: width
});
} }
}; };
// extend Shape // extend Shape