lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-14 11:44:55 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

copying over chunks of code from arrays branch

Browse Source
This commit is contained in:
Eric Rowell
2013-12-01 23:08:15 -08:00
parent 79fcf535f3
commit a7740ba96e
4 changed files with 145 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/Factory.js
View File

@@ -42,11 +42,70 @@
Y = 'y';
Kinetic.Factory = {
// getter setter adders
addGetterSetter: function(constructor, attr, def) {
this.addGetter(constructor, attr, def);
this.addSetter(constructor, attr);
addGetterSetter: function() {
var constructor = arguments[0],
baseAttr = arguments[1],
util = Kinetic.Util,
def, component, index;
// base method
if (arguments.length <= 3) {
def = arguments[2];
if (util._isArray(def)) {
def = util.cloneArray(def);
}
this.addGetter(constructor, baseAttr, def);
this.addSetter(constructor, baseAttr);
}
// component method
else {
component = arguments[2];
index = arguments[3];
def = arguments[4];
this.addComponentGetter(constructor, baseAttr, component, index, def);
this.addComponentSetter(constructor, baseAttr, component, index);
}
},
addGetter: function(constructor, baseAttr, def) {
var method = GET + Kinetic.Util._capitalize(baseAttr);
constructor.prototype[method] = function() {
var val = this.attrs[baseAttr];
return val === undefined ? def : val;
};
},
addSetter: function(constructor, baseAttr) {
var method = SET + Kinetic.Util._capitalize(baseAttr);
constructor.prototype[method] = function(val) {
this._setAttr(baseAttr, val);
};
},
addComponentGetter: function(constructor, baseAttr, component, index, def) {
var method = GET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component);
constructor.prototype[method] = function() {
var base = this.attrs[baseAttr],
val = base && base[index];
return val === undefined ? def : val;
};
},
addComponentSetter: function(constructor, baseAttr, component, index) {
var method = SET + Kinetic.Util._capitalize(baseAttr) + Kinetic.Util._capitalize(component);
constructor.prototype[method] = function(val) {
this._setComponentAttr(baseAttr, index, val);
};
},
// ------------------------------- old methods to be deprecated -----------------------------------
addPointGetterSetter: function(constructor, attr, def) {
this.addPointGetter(constructor, attr, def);
this.addPointSetter(constructor, attr);
@@ -122,15 +181,7 @@
return val === undefined ? [] : val;
};
},
addGetter: function(constructor, attr, def) {
var that = this,
method = GET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function() {
var val = this.attrs[attr];
return val === undefined ? def : val;
};
},
addPointGetter: function(constructor, attr) {
var that = this,
baseMethod = GET + Kinetic.Util._capitalize(attr);
@@ -208,13 +259,7 @@
this._setAttr('points', points);
};
},
addSetter: function(constructor, attr) {
var method = SET + Kinetic.Util._capitalize(attr);
constructor.prototype[method] = function(val) {
this._setAttr(attr, val);
};
},
addPointSetter: function(constructor, attr) {
var that = this,
baseMethod = SET + Kinetic.Util._capitalize(attr);

49
src/Util.js
View File

@@ -690,6 +690,9 @@
}
return retObj;
},
cloneArray: function(arr) {
return arr.slice(0);
},
_degToRad: function(deg) {
return deg * PI_OVER_DEG180;
},
@@ -732,39 +735,31 @@
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
}];
_getControlPoints: function(x0, y0, x1, y1, x2, y2, t) {
var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),
d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
fa = t * d01 / (d01 + d12),
fb = t * d12 / (d01 + d12),
p1x = x1 - fa * (x2 - x0),
p1y = y1 - fa * (y2 - y0),
p2x = x1 + fb * (x2 - x0),
p2y = y1 + fb * (y2 - y0);
return [p1x ,p1y, p2x, p2y];
},
_expandPoints: function(points, tension) {
var length = points.length,
_expandPoints: function(p, tension) {
var len = p.length,
allPoints = [],
n, cp;
for(n = 1; n < length - 1; n++) {
cp = Kinetic.Util._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
for (n=2; n<len-2; n+=2) {
cp = Kinetic.Util._getControlPoints(p[n-2], p[n-1], p[n], p[n+1], p[n+2], p[n+3], tension);
allPoints.push(cp[0]);
allPoints.push(points[n]);
allPoints.push(cp[1]);
allPoints.push(p[n]);
allPoints.push(p[n+1]);
allPoints.push(cp[2]);
allPoints.push(cp[3]);
}
return allPoints;

80
src/shapes/Line.js
View File

@@ -43,31 +43,30 @@
tp, len, n, point;
context.beginPath();
context.moveTo(points[0].x, points[0].y);
context.moveTo(points[0], points[1]);
// tension
if(tension !== 0 && length > 2) {
if(tension !== 0 && length > 4) {
tp = this.getTensionPoints();
len = tp.length;
n = closed ? 0 : 2;
n = closed ? 0 : 4;
if (!closed) {
context.quadraticCurveTo(tp[0].x, tp[0].y, tp[1].x, tp[1].y);
context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
}
while(n < len - 1) {
context.bezierCurveTo(tp[n].x, tp[n++].y, tp[n].x, tp[n++].y, tp[n].x, tp[n++].y);
while(n < len - 2) {
context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
}
if (!closed) {
context.quadraticCurveTo(tp[len - 1].x, tp[len - 1].y, points[length - 1].x, points[length - 1].y);
context.quadraticCurveTo(tp[len-2], tp[len-1], points[length-2], points[length-1]);
}
}
// no tension
else {
for(n = 1; n < length; n++) {
point = points[n];
context.lineTo(point.x, point.y);
for(n = 2; n < length; n+=2) {
context.lineTo(points[n], points[n+1]);
}
}
@@ -93,25 +92,48 @@
}
},
_getTensionPointsClosed: function() {
var points = this.getPoints(),
length = points.length,
var p = this.getPoints(),
len = p.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),
tensionPoints = Kinetic.Util._expandPoints(points, tension);
// prepend control point
tensionPoints.unshift(firstControlPoints[1]);
// append cp, point, cp, cp, first point
tensionPoints.push(lastControlPoints[0]);
tensionPoints.push(points[length - 1]);
tensionPoints.push(lastControlPoints[1]);
tensionPoints.push(firstControlPoints[0]);
tensionPoints.push(points[0]);
return tensionPoints;
firstControlPoints = util._getControlPoints(
p[len-2],
p[len-1],
p[0],
p[1],
p[2],
p[3],
tension
),
lastControlPoints = util._getControlPoints(
p[len-4],
p[len-3],
p[len-2],
p[len-1],
p[0],
p[1],
tension
),
middle = Kinetic.Util._expandPoints(p, tension),
tp = [
firstControlPoints[2],
firstControlPoints[3]
]
.concat(middle)
.concat([
lastControlPoints[0],
lastControlPoints[1],
p[len-2],
p[len-1],
lastControlPoints[2],
lastControlPoints[3],
firstControlPoints[0],
firstControlPoints[1],
p[0],
p[1]
]);
return tp;
}
};
Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape);
@@ -153,7 +175,7 @@
* @param {Number} tension
*/
Kinetic.Factory.addPointsGetterSetter(Kinetic.Line, 'points');
Kinetic.Factory.addGetterSetter(Kinetic.Line, 'points');
/**
* get points array
* @name getPoints
@@ -170,4 +192,4 @@
* @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]
*/
})();
})();

40
test/unit/shapes/Line-test.js
View File

@@ -4,16 +4,8 @@ suite('Line', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}];
var line = new Kinetic.Line({
points: points,
points: [73,160,340,23],
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',
@@ -26,19 +18,13 @@ suite('Line', function() {
stage.add(layer);
line.setPoints([1, 2, 3, 4]);
assert.equal(line.getPoints()[0].x, 1);
assert.equal(line.getPoints()[0], 1);
line.setPoints([{
x: 5,
y: 6
}, {
x: 7,
y: 8
}]);
assert.equal(line.getPoints()[0].x, 5);
line.setPoints([5,6,7,8]);
assert.equal(line.getPoints()[0], 5);
line.setPoints([73, 160, 340, 23, 340, 80]);
assert.equal(line.getPoints()[0].x, 73);
assert.equal(line.getPoints()[0], 73);
assert.equal(line.getClassName(), 'Line');
@@ -74,8 +60,8 @@ suite('Line', function() {
layer.add(line).add(redLine);
stage.add(layer);
assert.equal(line.getPoints()[0].x, 0);
assert.equal(redLine.getPoints()[0].x, 4);
assert.equal(line.getPoints()[0], 0);
assert.equal(redLine.getPoints()[0], 4);
});
@@ -122,7 +108,7 @@ suite('Line', function() {
line.setDashArray([10, 10]);
assert.equal(line.getDashArray().length, 2);
assert.equal(line.getPoints().length, 4);
assert.equal(line.getPoints().length, 8);
});
@@ -131,16 +117,8 @@ suite('Line', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var points = [{
x: 73,
y: 160
}, {
x: 340,
y: 23
}];
var line = new Kinetic.Line({
points: points,
points: [73,160,340,23],
stroke: 'blue',
strokeWidth: 20,
lineCap: 'round',