lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Spline no longer extends Line. Blob no longer extends Spline. point getter setters were extracted out to Node. control point expansion method in Spline was pulled out and put in Util

Browse Source
This commit is contained in:
Eric Rowell 2013-06-08 14:17:26 -07:00
parent e8ea9340fe
commit 79c3124ed7
8 changed files with 189 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/Node.js
View File

@ -231,7 +231,7 @@
if(Kinetic.Util._isFunction(func)) {
func.apply(this, args);
}
// otherwise get directly
// otherwise set directly
else {
this.attrs[attr] = args[0];
}
@ -1164,7 +1164,13 @@
}
});
// add getter and setter methods
// setter functions
Kinetic.Node.setPoints = function(val) {
var points = Kinetic.Util._getPoints(val);
this._setAttr('points', points);
};
// getter setter adders
Kinetic.Node.addGetterSetter = function(constructor, attr, def, isTransform) {
this.addGetter(constructor, attr, def);
this.addSetter(constructor, attr, isTransform);
@ -1203,12 +1209,75 @@
this.addColorComponentSetter(constructor, attr, G);
this.addColorComponentSetter(constructor, attr, B);
};
// getter adders
Kinetic.Node.addColorRGBGetter = function(constructor, attr) {
var method = GET + Kinetic.Util._capitalize(attr) + RGB;
constructor.prototype[method] = function() {
return Kinetic.Util.getRGB(this.attrs[attr]);
};
};
Kinetic.Node.addColorComponentGetter = function(constructor, attr, c) {
var prefix = GET + Kinetic.Util._capitalize(attr),
method = prefix + Kinetic.Util._capitalize(c);
constructor.prototype[method] = function() {
return this[prefix + RGB]()[c];
};
};
Kinetic.Node.addPointsGetter = function(constructor, attr) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(arg) {
var val = this.attrs[attr];
return val === undefined ? [] : val;
};
};
Kinetic.Node.addGetter = function(constructor, attr, def) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(arg) {
var val = this.attrs[attr];
return val === undefined ? def : val;
};
};
Kinetic.Node.addPointGetter = function(constructor, attr) {
var that = this,
baseMethod = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[baseMethod] = function(arg) {
var that = this;
return {
x: that[baseMethod + UPPER_X](),
y: that[baseMethod + UPPER_Y]()
};
};
};
Kinetic.Node.addRotationGetter = function(constructor, attr, def) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
// radians
constructor.prototype[method] = function() {
var val = this.attrs[attr];
if (val === undefined) {
val = def;
}
return val;
};
// degrees
constructor.prototype[method + DEG] = function() {
var val = this.attrs[attr];
if (val === undefined) {
val = def;
}
return Kinetic.Util._radToDeg(val);
};
};
// setter adders
Kinetic.Node.addColorRGBSetter = function(constructor, attr) {
var method = SET + Kinetic.Util._capitalize(attr) + RGB;
@ -1220,13 +1289,7 @@
this._setAttr(attr, HASH + Kinetic.Util._rgbToHex(r, g, b));
};
};
Kinetic.Node.addColorComponentGetter = function(constructor, attr, c) {
var prefix = GET + Kinetic.Util._capitalize(attr),
method = prefix + Kinetic.Util._capitalize(c);
constructor.prototype[method] = function() {
return this[prefix + RGB]()[c];
};
};
Kinetic.Node.addColorComponentSetter = function(constructor, attr, c) {
var prefix = SET + Kinetic.Util._capitalize(attr),
method = prefix + Kinetic.Util._capitalize(c);
@ -1238,19 +1301,7 @@
};
Kinetic.Node.addPointsSetter = function(constructor, attr) {
var method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) {
var points = Kinetic.Util._getPoints(val);
this._setAttr('points', points);
};
};
Kinetic.Node.addPointsGetter = function(constructor, attr) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(arg) {
var val = this.attrs[attr];
return val === undefined ? [] : val;
};
constructor.prototype[method] = Kinetic.Node.setPoints;
};
Kinetic.Node.addSetter = function(constructor, attr, isTransform) {
var that = this,
@ -1307,48 +1358,7 @@
}
};
};
Kinetic.Node.addGetter = function(constructor, attr, def) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(arg) {
var val = this.attrs[attr];
return val === undefined ? def : val;
};
};
Kinetic.Node.addPointGetter = function(constructor, attr) {
var that = this,
baseMethod = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[baseMethod] = function(arg) {
var that = this;
return {
x: that[baseMethod + UPPER_X](),
y: that[baseMethod + UPPER_Y]()
};
};
};
Kinetic.Node.addRotationGetter = function(constructor, attr, def) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
// radians
constructor.prototype[method] = function() {
var val = this.attrs[attr];
if (val === undefined) {
val = def;
}
return val;
};
// degrees
constructor.prototype[method + DEG] = function() {
var val = this.attrs[attr];
if (val === undefined) {
val = def;
}
return Kinetic.Util._radToDeg(val);
};
};
/**
* create node with JSON string. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the

37
src/Util.js
View File

@ -668,6 +668,43 @@
for (key in methods) {
constructor.prototype[key] = methods[key];
}
},
_getControlPoints: function(p0, p1, p2, t) {
var x0 = p0.x;
var y0 = p0.y;
var x1 = p1.x;
var y1 = p1.y;
var x2 = p2.x;
var y2 = p2.y;
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
var fa = t * d01 / (d01 + d12);
var fb = t * d12 / (d01 + d12);
var p1x = x1 - fa * (x2 - x0);
var p1y = y1 - fa * (y2 - y0);
var p2x = x1 + fb * (x2 - x0);
var p2y = y1 + fb * (y2 - y0);
return [{
x: p1x,
y: p1y
}, {
x: p2x,
y: p2y
}];
},
_expandPoints: function(points, tension) {
var length = points.length,
allPoints = [],
n, cp;
for(n = 1; n < length - 1; n++) {
cp = Kinetic.Util._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
allPoints.push(cp[0]);
allPoints.push(points[n]);
allPoints.push(cp[1]);
}
return allPoints;
}
};
})();

54
src/shapes/Blob.js
View File

@ -4,7 +4,7 @@
* a tension
* @constructor
* @memberof Kinetic
* @augments Kinetic.Spline
* @augments Kinetic.Shape
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
* e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
@ -26,9 +26,11 @@
Kinetic.Blob.prototype = {
_initBlob: function(config) {
this.createAttrs();
// call super constructor
Kinetic.Spline.call(this, config);
Kinetic.Shape.call(this, config);
this.className = 'Blob';
this._setDrawFuncs();
},
drawFunc: function(canvas) {
var points = this.getPoints(),
@ -44,6 +46,7 @@
if(tension !== 0 && length > 2) {
ap = this.allPoints;
len = ap.length;
n = 0;
while(n < len-1) {
context.bezierCurveTo(ap[n].x, ap[n++].y, ap[n].x, ap[n++].y, ap[n].x, ap[n++].y);
@ -60,10 +63,36 @@
context.closePath();
canvas.fillStroke(this);
},
/**
* set tension
* @method
* @memberof Kinetic.Blob.prototype
* @param {Number} tension
*/
setTension: function(tension) {
this._setAttr('tension', tension);
this._setAllPoints();
},
/**
* set points array
* @method
* @memberof Kinetic.Blob.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(points) {
Kinetic.Node.setPoints.call(this, points);
this._setAllPoints();
},
_setAllPoints: function() {
var points = this.getPoints(), length = points.length, tension = this.getTension(), firstControlPoints = Kinetic.Spline._getControlPoints(points[length - 1], points[0], points[1], tension), lastControlPoints = Kinetic.Spline._getControlPoints(points[length - 2], points[length - 1], points[0], tension);
var points = this.getPoints(),
length = points.length,
tension = this.getTension(),
util = Kinetic.Util,
firstControlPoints = util._getControlPoints(points[length - 1], points[0], points[1], tension),
lastControlPoints = util._getControlPoints(points[length - 2], points[length - 1], points[0], tension);
Kinetic.Spline.prototype._setAllPoints.call(this);
this.allPoints = Kinetic.Util._expandPoints(this.getPoints(), this.getTension());
// prepend control point
this.allPoints.unshift(firstControlPoints[1]);
@ -77,5 +106,20 @@
}
};
Kinetic.Util.extend(Kinetic.Blob, Kinetic.Spline);
Kinetic.Util.extend(Kinetic.Blob, Kinetic.Shape);
Kinetic.Node.addGetter(Kinetic.Blob, 'tension', 1);
/**
* get tension
* @name getTension
* @method
* @memberof Kinetic.Blob.prototype
*/
Kinetic.Node.addPointsGetter(Kinetic.Blob, 'points');
/**
* get points array
* @method
* @memberof Kinetic.Blob.prototype
*/
})();

67
src/shapes/Spline.js
View File

@ -4,7 +4,7 @@
* a tension
* @constructor
* @memberof Kinetic
* @augments Kinetic.Line
* @augments Kinetic.Shape
* @param {Object} config
* @param {Array} config.points can be a flattened array of points, an array of point arrays, or an array of point objects.
* e.g. [0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}] are equivalent
@ -23,36 +23,14 @@
Kinetic.Spline = function(config) {
this._initSpline(config);
};
Kinetic.Spline._getControlPoints = function(p0, p1, p2, t) {
var x0 = p0.x;
var y0 = p0.y;
var x1 = p1.x;
var y1 = p1.y;
var x2 = p2.x;
var y2 = p2.y;
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2));
var d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
var fa = t * d01 / (d01 + d12);
var fb = t * d12 / (d01 + d12);
var p1x = x1 - fa * (x2 - x0);
var p1y = y1 - fa * (y2 - y0);
var p2x = x1 + fb * (x2 - x0);
var p2y = y1 + fb * (y2 - y0);
return [{
x: p1x,
y: p1y
}, {
x: p2x,
y: p2y
}];
};
Kinetic.Spline.prototype = {
_initSpline: function(config) {
this.createAttrs();
// call super constructor
Kinetic.Line.call(this, config);
Kinetic.Shape.call(this, config);
this.className = 'Spline';
this._setDrawFuncs();
},
drawFunc: function(canvas) {
var points = this.getPoints(),
@ -88,10 +66,6 @@
canvas.stroke(this);
},
setPoints: function(val) {
Kinetic.Line.prototype.setPoints.call(this, val);
this._setAllPoints();
},
/**
* set tension
* @method
@ -102,24 +76,22 @@
this._setAttr('tension', tension);
this._setAllPoints();
},
/**
* set points array
* @method
* @memberof Kinetic.Spline.prototype
* @param {Array} can be an array of point objects or an array
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(points) {
Kinetic.Node.setPoints.call(this, points);
this._setAllPoints();
},
_setAllPoints: function() {
var points = this.getPoints(),
length = points.length,
tension = this.getTension(),
allPoints = [],
n, cp;
for(n = 1; n < length - 1; n++) {
cp = Kinetic.Spline._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
allPoints.push(cp[0]);
allPoints.push(points[n]);
allPoints.push(cp[1]);
}
this.allPoints = allPoints;
this.allPoints = Kinetic.Util._expandPoints(this.getPoints(), this.getTension());
}
};
Kinetic.Util.extend(Kinetic.Spline, Kinetic.Line);
Kinetic.Util.extend(Kinetic.Spline, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGetter(Kinetic.Spline, 'tension', 1);
@ -130,4 +102,11 @@
* @method
* @memberof Kinetic.Spline.prototype
*/
Kinetic.Node.addPointsGetter(Kinetic.Spline, 'points');
/**
* get points array
* @method
* @memberof Kinetic.Spline.prototype
*/
})();

2
tests/js/unit/shapes/blobTests.js
View File

@ -58,6 +58,8 @@ Test.Modules.BLOB = {
test(blob2.getTension() === 1.2, 'blob2 tension should be 1.2');
test(blob1.getClassName() === 'Blob', 'getClassName should be Blob');
//console.log(blob1.getPoints())
}

4
tests/js/unit/shapes/lineTests.js
View File

@ -1,5 +1,5 @@
Test.Modules.LINE = {
'*add line': function(containerId) {
'add line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -84,7 +84,7 @@ Test.Modules.LINE = {
test(redLine.getPoints()[0].x === 4, 'redLine points is wrong');
},
'*add dashed line': function(containerId) {
'add dashed line': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

2
tests/js/unit/shapes/polygonTests.js
View File

@ -1,5 +1,5 @@
Test.Modules.POLYGON = {
'*add polygon': function(containerId) {
'add polygon': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

8
tests/js/unit/shapes/splineTests.js
View File

@ -69,15 +69,9 @@ Test.Modules.SPLINE = {
layer.add(line3);
stage.add(layer);
/*
line.transitionTo({
spline: 3,
duration: 3
});
*/
test(line1.getClassName() === 'Spline', 'getClassName should be Spline');
},
'create from points represented as a flat array': function(containerId) {
var stage = new Kinetic.Stage({