Activate beans for Segment and clean up bean / getter / setter mess for point / handleIn / handleOut.

This commit is contained in:
Jürg Lehni 2011-03-06 10:57:14 +00:00
parent e892d4446a
commit 72a1ba8e70
3 changed files with 96 additions and 82 deletions

View file

@ -75,9 +75,9 @@ Path.inject({ statics: new function() {
for (var i = 0; i < 4; i++) {
var segment = ovalSegments[i];
path._add(new Segment(
segment.point.multiply(size).add(topLeft),
segment.handleIn.multiply(size),
segment.handleOut.multiply(size)
segment._point.multiply(size).add(topLeft),
segment._handleIn.multiply(size),
segment._handleOut.multiply(size)
));
}
path.closed = true;

View file

@ -51,10 +51,10 @@ var Path = this.Path = PathItem.extend({
getCurveLength: function(goal) {
var seg0 = this._segments[0],
seg1 = this._segments[1],
z0 = seg0.point,
z1 = seg1.point,
c0 = z0.add(seg0.handleOut),
c1 = z1.add(seg1.handleIn);
z0 = seg0._point,
z1 = seg1._point,
c0 = z0.add(seg0._handleOut),
c1 = z1.add(seg1._handleIn);
// TODO: Check for straight lines and handle separately.
// Calculate the coefficients of a Bezier derivative, divided by 3.
@ -94,9 +94,9 @@ var Path = this.Path = PathItem.extend({
// Use matrix.transform version() that takes arrays of multiple
// points for largely improved performance, as no calls to
// Point.read() and Point constructors are necessary.
var point = segment.point,
handleIn = segment.handleIn,
handleOut = segment.handleOut,
var point = segment._point,
handleIn = segment._handleIn,
handleOut = segment._handleOut,
x = point.x,
y = point.y;
if (handleIn.isZero())
@ -193,9 +193,9 @@ var Path = this.Path = PathItem.extend({
// First modify the current segment:
var current = this.currentSegment;
// Convert to relative values:
current.handleOut = new Point(
handle1.x - current.point.x,
handle1.y - current.point.y);
current.setHandleOut(new Point(
handle1.x - current._point.x,
handle1.y - current._point.y));
// And add the new segment, with handleIn set to c2
this._add(
new Segment(to, handle2.subtract(to), new Point())
@ -213,10 +213,10 @@ var Path = this.Path = PathItem.extend({
// B = E + 1/3 (A - E)
// C = E + 1/3 (D - E)
var current = this.currentSegment,
x1 = current.point.x,
y1 = current.point.y;
x1 = current._point.x,
y1 = current._point.y;
this.cubicCurveTo(
handle.add(current.point.subtract(handle).multiply(1/3)),
handle.add(current._point.subtract(handle).multiply(1/3)),
handle.add(to.subtract(handle).multiply(1/3)),
to
);
@ -227,7 +227,7 @@ var Path = this.Path = PathItem.extend({
to = new Point(to);
if (parameter == null)
parameter = 0.5;
var current = this.currentSegment.point;
var current = this.currentSegment._point;
// handle = (through - (1 - t)^2 * current - t^2 * to) /
// (2 * (1 - t) * t)
var t1 = 1 - parameter;
@ -252,15 +252,15 @@ var Path = this.Path = PathItem.extend({
} else {
if (clockwise === null)
clockwise = true;
var middle = current.point.add(to).divide(2);
var step = middle.subtract(current.point);
var middle = current._point.add(to).divide(2);
var step = middle.subtract(current._point);
through = clockwise
? middle.subtract(-step.y, step.x)
: middle.add(-step.y, step.x);
}
var x1 = current.point.x, x2 = through.x, x3 = to.x,
y1 = current.point.y, y2 = through.y, y3 = to.y,
var x1 = current._point.x, x2 = through.x, x3 = to.x,
y1 = current._point.y, y2 = through.y, y3 = to.y,
f = x3 * x3 - x3 * x2 - x1 * x3 + x1 * x2 + y3 * y3 - y3 * y2
- y1 * y3 + y1 * y2,
@ -320,7 +320,7 @@ var Path = this.Path = PathItem.extend({
centerY + (rely + z * relx) * radius - pt.y);
if (i == 0) {
// Modify startSegment
current.handleOut = out;
current.setHandleOut(out);
} else {
// Add new Segment
var inPoint = new Point(
@ -336,14 +336,14 @@ var Path = this.Path = PathItem.extend({
var vector = Point.read(arguments);
if (vector) {
var current = this.currentSegment;
this.lineTo(current.point.add(vector));
this.lineTo(current._point.add(vector));
}
},
curveBy: function(throughVector, toVector, parameter) {
throughVector = Point.read(throughVector);
toVector = Point.read(toVector);
var current = this.currentSegment.point;
var current = this.currentSegment._point;
this.curveTo(current.add(throughVector), current.add(toVector),
parameter);
},
@ -351,7 +351,7 @@ var Path = this.Path = PathItem.extend({
arcBy: function(throughVector, toVector) {
throughVector = Point.read(throughVector);
toVector = Point.read(toVector);
var current = this.currentSegment.point;
var current = this.currentSegment._point;
this.arcBy(current.add(throughVector), current.add(toVector));
},
@ -366,9 +366,10 @@ var Path = this.Path = PathItem.extend({
var length = segments.length;
for (var i = 0; i < length; i++) {
var segment = segments[i],
x = segment.point.x,
y = segment.point.y,
handleIn = segment.handleIn;
point = segment._point,
x = point.x,
y = point.y,
handleIn = segment._handleIn;
if (i == 0) {
ctx.moveTo(x, y);
} else {
@ -382,15 +383,16 @@ var Path = this.Path = PathItem.extend({
);
}
}
var handleOut = segment.handleOut,
var handleOut = segment._handleOut,
outX = handleOut.x + x,
outY = handleOut.y + y;
}
if (this.closed && length > 1) {
var segment = segments[0],
x = segment.point.x,
y = segment.point.y,
handleIn = segment.handleIn;
point = segment._point,
x = point.x,
y = point.y,
handleIn = segment._handleIn;
ctx.bezierCurveTo(outX, outY, handleIn.x + x, handleIn.y + y, x, y);
ctx.closePath();
}
@ -425,16 +427,16 @@ var Path = this.Path = PathItem.extend({
var segments = that._segments, first = segments[0];
if (!first)
return null;
var min = first.point.clone(), max = min.clone(),
var min = first._point.clone(), max = min.clone(),
coords = ['x', 'y'], prev = first;
function processSegment(segment) {
for (var i = 0; i < 2; i++) {
var coord = coords[i];
var v0 = prev.point[coord],
v1 = v0 + prev.handleOut[coord],
v3 = segment.point[coord],
v2 = v3 + segment.handleIn[coord];
var v0 = prev._point[coord],
v1 = v0 + prev._handleOut[coord],
v3 = segment._point[coord],
v2 = v3 + segment._handleIn[coord];
function add(value, t) {
var radius = 0;
@ -592,13 +594,13 @@ var Path = this.Path = PathItem.extend({
}
var knots = [];
for (var i = 0; i < size; i++)
knots[i + overlap] = segments[i].point;
knots[i + overlap] = segments[i]._point;
if (this.closed) {
// If we're averaging, add the 4 last points again at the
// beginning, and the 4 first ones at the end.
for (var i = 0; i < overlap; i++) {
knots[i] = segments[i + size - overlap].point;
knots[i + size + overlap] = segments[i].point;
knots[i] = segments[i + size - overlap]._point;
knots[i + size + overlap] = segments[i]._point;
}
} else {
n--;
@ -643,11 +645,11 @@ var Path = this.Path = PathItem.extend({
// Now set the calculated handles
for (var i = overlap; i <= n - overlap; i++) {
var segment = segments[i - overlap];
if (handleIn != null)
segment.handleIn = handleIn.subtract(segment.point);
if (handleIn)
segment.setHandleIn(handleIn.subtract(segment._point));
if (i < n) {
segment.handleOut =
new Point(x[i], y[i]).subtract(segment.point);
segment.setHandleOut(
new Point(x[i], y[i]).subtract(segment._point));
if (i < n - 1)
handleIn = new Point(
2 * knots[i + 1].x - x[i + 1],
@ -658,9 +660,9 @@ var Path = this.Path = PathItem.extend({
(knots[n].y + y[n - 1]) / 2);
}
}
if (closed && handleIn != null) {
if (closed && handleIn) {
var segment = this._segments[0];
segment.handleIn = handleIn.subtract(segment.point);
segment.setHandleIn(handleIn.subtract(segment._point));
}
},

View file

@ -1,65 +1,77 @@
var Segment = this.Segment = Base.extend({
beans: true,
initialize: function() {
if (arguments.length == 0) {
this.point = new Point();
this._point = new Point();
} else if (arguments.length == 1) {
if (arguments[0].point) {
var segment = arguments[0];
this.point = new Point(segment.point);
if (segment.handleIn)
this.handleIn = new Point(segment.handleIn);
if (segment.handleOut)
this.handleOut = new Point(segment.handleOut);
// TODO: If beans are not activated, this won't copy from
// an existing segment. OK?
var arg = arguments[0];
if (arg.point) {
this._point = new Point(arg.point);
this._handleIn = new Point(arg.handleIn);
this._handleOut = new Point(arg.handleOut);
} else {
this.point = new Point(arguments[0]);
this._point = new Point(arguments[0]);
}
} else if (arguments.length < 6) {
if (arguments.length == 2 && !arguments[1].x) {
this.point = new Point(arguments[0], arguments[1]);
this._point = new Point(arguments[0], arguments[1]);
} else {
this.point = new Point(arguments[0]);
if (arguments[1])
this.handleIn = new Point(arguments[1]);
if (arguments[2])
this.handleOut = new Point(arguments[2]);
this._point = new Point(arguments[0]);
// Doesn't matter if these arguments exist, it creates 0, 0
// points otherwise
this._handleIn = new Point(arguments[1]);
this._handleOut = new Point(arguments[2]);
}
} else if (arguments.length == 6) {
this.point = new Point(arguments[0], arguments[1]);
this.handleIn = new Point(arguments[2], arguments[3]);
this.handleOut = new Point(arguments[4], arguments[5]);
this._point = new Point(arguments[0], arguments[1]);
this._handleIn = new Point(arguments[2], arguments[3]);
this._handleOut = new Point(arguments[4], arguments[5]);
}
if (!this.handleIn)
this.handleIn = new Point();
if (!this.handleOut)
this.handleOut = new Point();
if (!this._handleIn)
this._handleIn = new Point();
if (!this._handleOut)
this._handleOut = new Point();
},
getPoint: function() {
return this.point;
return this._point;
},
setPoint: function() {
var point = Point.read(arguments);
this.point = point;
this._point = Point.read(arguments);
},
getHandleIn: function() {
return this.handleIn;
return this._handleIn;
},
getHandleInIfSet: function() {
return this._handleIn.x == this._handleIn.y == 0
? null : this._handleIn;
},
setHandleIn: function() {
var point = Point.read(arguments);
this.handleIn = point;
this._handleIn = Point.read(arguments);
// Update corner accordingly
// this.corner = !this._handleIn.isParallel(this._handleOut);
},
getHandleOut: function() {
return this.handleOut;
return this._handleOut;
},
getHandleOutIfSet: function() {
return this._handleOut.x == this._handleOut.y == 0
? null : this._handleOut;
},
setHandleOut: function() {
var point = Point.read(arguments);
this.handleOut = point;
this.corner = !handleIn.isParallel(handleOut);
this._handleOut = Point.read(arguments);
// Update corner accordingly
// this.corner = !this._handleIn.isParallel(this._handleOut);
},
getIndex: function() {
@ -93,7 +105,7 @@ var Segment = this.Segment = Base.extend({
// setSelected: function(pt, selected)
reverse: function() {
return new Segment(this.point, this.handleOut, this.handleIn);
return new Segment(this._point, this._handleOut, this._handleIn);
},
clone: function() {
@ -107,9 +119,9 @@ var Segment = this.Segment = Base.extend({
},
toString: function() {
return '{ point: ' + this.point
+ (this.handleIn ? ', handleIn: ' + this.handleIn : '')
+ (this.handleOut ? ', handleOut: ' + this.handleOut : '')
return '{ point: ' + this._point
+ (this._handleIn ? ', handleIn: ' + this._handleIn : '')
+ (this._handleOut ? ', handleOut: ' + this._handleOut : '')
+ ' }';
}
});