first pass at implementing tweenable point arrays

This commit is contained in:
Eric Rowell
2013-06-02 16:50:38 -07:00
parent 18fa3673aa
commit c1bd40fcae
3 changed files with 87 additions and 191 deletions

View File

@@ -45,12 +45,16 @@
this._setDrawFuncs();
},
drawFunc: function(canvas) {
var points = this.getPoints(), length = points.length, context = canvas.getContext();
var points = this.getPoints(),
length = points.length,
context = canvas.getContext(),
n, point;
context.beginPath();
context.moveTo(points[0].x, points[0].y);
for(var n = 1; n < length; n++) {
var point = points[n];
for(n = 1; n < length; n++) {
point = points[n];
context.lineTo(point.x, point.y);
}
@@ -64,7 +68,39 @@
* of Numbers. e.g. [{x:1,y:2},{x:3,y:4}] or [1,2,3,4]
*/
setPoints: function(val) {
this._setAttr('points', Kinetic.Util._getPoints(val));
var points = Kinetic.Util._getPoints(val);
this._setAttr('points', points);
this._points = points;
},
setEndPoints: function(val) {
var points = Kinetic.Util._getPoints(val);
this._setAttr('endPoints', points);
},
setPointsPosition: function(val) {
var points = this._points,
endPoints = this.getEndPoints(),
len = points.length,
newPoints = [],
n, point, endPoint, diff;
for (n=0; n<len; n++) {
point = points[n];
endPoint = endPoints[n];
diffX = (endPoint.x - point.x) * val;
diffY = (endPoint.y - point.y) * val;
newPoints.push({
x: point.x + diffX,
y: point.y + diffY
});
}
this._setAttr('pointsPosition', val);
this._setAttr('points', newPoints);
},
getPointsPosition: function() {
return this.attrs.pointsPosition;
},
/**
* get points array
@@ -75,6 +111,9 @@
// default array literal each time because arrays are modified by reference
getPoints: function() {
return this.attrs.points || [];
},
getEndPoints: function() {
return this.attrs.endPoints || [];
}
};
Kinetic.Util.extend(Kinetic.Line, Kinetic.Shape);

View File

@@ -88,6 +88,10 @@
canvas.stroke(this);
},
setPointsPosition: function(val) {
Kinetic.Line.prototype.setPointsPosition.call(this, val);
this._setAllPoints();
},
setPoints: function(val) {
Kinetic.Line.prototype.setPoints.call(this, val);
this._setAllPoints();
@@ -103,10 +107,14 @@
this._setAllPoints();
},
_setAllPoints: function() {
var points = this.getPoints(), length = points.length, tension = this.getTension(), allPoints = [];
var points = this.getPoints(),
length = points.length,
tension = this.getTension(),
allPoints = [],
n, cp;
for(var n = 1; n < length - 1; n++) {
var cp = Kinetic.Spline._getControlPoints(points[n - 1], points[n], points[n + 1], tension);
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]);