mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-19 14:10:14 -05:00
Activate beans for Segment and clean up bean / getter / setter mess for point / handleIn / handleOut.
This commit is contained in:
parent
e892d4446a
commit
72a1ba8e70
3 changed files with 96 additions and 82 deletions
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -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 : '')
|
||||
+ ' }';
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue