Add gettter/setters for Path#segments, and fix bug in Segment#previous.

This commit is contained in:
Jürg Lehni 2011-02-13 13:52:51 +00:00
parent e2c77a866d
commit 4b2341b3c2
3 changed files with 50 additions and 34 deletions

View file

@ -89,7 +89,7 @@ Path = PathItem.extend({
segment.handleIn = segment.handleIn.multiply(size); segment.handleIn = segment.handleIn.multiply(size);
segment.handleOut = segment.handleOut.multiply(size); segment.handleOut = segment.handleOut.multiply(size);
segment.point = segment.point.multiply(size).add(topLeft); segment.point = segment.point.multiply(size).add(topLeft);
path.segments.push(segment); path._segments.push(segment);
} }
path.closed = true; path.closed = true;
return path; return path;
@ -112,8 +112,8 @@ Path = PathItem.extend({
path.moveTo(left); path.moveTo(left);
path.arcTo(center.add(radius, 0), true); path.arcTo(center.add(radius, 0), true);
path.arcTo(left, true); path.arcTo(left, true);
var last = path.segments.pop(); var last = path._segments.pop();
path.segments[0].handleIn = last.handleIn; path._segments[0].handleIn = last.handleIn;
path.closed = true; path.closed = true;
return path; return path;
} }

View file

@ -37,11 +37,11 @@ PathItem = Item.extend(new function() {
return { return {
beans: true, beans: true,
initialize: function() { initialize: function() {
this.base(); this.base();
this.closed = false; this.closed = false;
this.segments = [];//new SegmentList(this); this._segments = [];//new SegmentList(this);
this.bounds = new Rectangle(); this.bounds = new Rectangle();
for(var i = 0, l = arguments.length; i < l; i++) { for(var i = 0, l = arguments.length; i < l; i++) {
var segment = new Segment(arguments[i]); var segment = new Segment(arguments[i]);
@ -49,9 +49,20 @@ PathItem = Item.extend(new function() {
} }
}, },
/**
* The segments contained within the path.
*/
getSegments: function() {
return this._segments;
},
setSegments: function(segments) {
this._segments = segments;
},
addSegment: function(segment) { addSegment: function(segment) {
segment.path = this; segment.path = this;
this.segments.push(segment); this._segments.push(segment);
}, },
add: function() { add: function() {
@ -61,28 +72,32 @@ PathItem = Item.extend(new function() {
}, },
insert: function(index, segment) { insert: function(index, segment) {
this.segments.splice(index, 0, new Segment(segment)); this._segments.splice(index, 0, new Segment(segment));
}, },
/**
* PostScript-style drawing commands
*/
/** /**
* Helper method that returns the current segment and checks if we need to * Helper method that returns the current segment and checks if we need to
* execute a moveTo() command first. * execute a moveTo() command first.
*/ */
getCurrentSegment: function() { getCurrentSegment: function() {
if (this.segments.length == 0) if (this._segments.length == 0)
throw('Use a moveTo() command first'); throw('Use a moveTo() command first');
return this.segments[this.segments.length - 1]; return this._segments[this._segments.length - 1];
}, },
moveTo: function() { moveTo: function() {
var segment = Segment.read(arguments); var segment = Segment.read(arguments);
if(segment && !this.segments.length) if(segment && !this._segments.length)
this.addSegment(segment); this.addSegment(segment);
}, },
lineTo: function() { lineTo: function() {
var segment = Segment.read(arguments); var segment = Segment.read(arguments);
if(segment && this.segments.length) if(segment && this._segments.length)
this.addSegment(segment); this.addSegment(segment);
}, },
@ -113,7 +128,7 @@ PathItem = Item.extend(new function() {
// and the cubic is A B C D, // and the cubic is A B C D,
// B = E + 1/3 (A - E) // B = E + 1/3 (A - E)
// C = E + 1/3 (D - E) // C = E + 1/3 (D - E)
var current = this.segments[this.segments.length - 1]; var current = this._segments[this._segments.length - 1];
var x1 = current.point.x; var x1 = current.point.x;
var y1 = current.point.y; var y1 = current.point.y;
cubicCurveTo( cubicCurveTo(
@ -128,7 +143,7 @@ PathItem = Item.extend(new function() {
to = new Point(to); to = new Point(to);
if(parameter == null) if(parameter == null)
parameter = 0.5; parameter = 0.5;
var current = this.segments[this.segments.length - 1]; var current = this._segments[this._segments.length - 1];
// handle = (through - (1 - t)^2 * current - t^2 * to) / (2 * (1 - t) * t) // handle = (through - (1 - t)^2 * current - t^2 * to) / (2 * (1 - t) * t)
var t1 = 1 - parameter; var t1 = 1 - parameter;
var handle = through.subtract( var handle = through.subtract(
@ -150,7 +165,7 @@ PathItem = Item.extend(new function() {
} else { } else {
if(clockwise === null) if(clockwise === null)
clockwise = true; clockwise = true;
var current = this.segments[this.segments.length - 1].point; var current = this._segments[this._segments.length - 1].point;
var middle = current.add(to).divide(2); var middle = current.add(to).divide(2);
var step = middle.subtract(current); var step = middle.subtract(current);
through = clockwise through = clockwise
@ -159,7 +174,7 @@ PathItem = Item.extend(new function() {
} }
// Get the start point: // Get the start point:
var current = this.segments[this.segments.length - 1]; var current = this._segments[this._segments.length - 1];
var x1 = current.point.x, x2 = through.x, x3 = to.x; var x1 = current.point.x, x2 = through.x, x3 = to.x;
var y1 = current.point.y, y2 = through.y, y3 = to.y; var y1 = current.point.y, y2 = through.y, y3 = to.y;
@ -235,13 +250,13 @@ PathItem = Item.extend(new function() {
lineBy: function() { lineBy: function() {
var vector = Point.read(arguments); var vector = Point.read(arguments);
if(vector) { if(vector) {
var current = this.segments[this.segments.length - 1]; var current = this._segments[this._segments.length - 1];
this.lineTo(current.point.add(vector)); this.lineTo(current.point.add(vector));
} }
}, },
smooth: function() { smooth: function() {
var segments = this.segments; var segments = this._segments;
// This code is based on the work by Oleg V. Polikarpotchkin, // This code is based on the work by Oleg V. Polikarpotchkin,
// http://ov-p.spaces.live.com/blog/cns!39D56F0C7A08D703!147.entry // http://ov-p.spaces.live.com/blog/cns!39D56F0C7A08D703!147.entry
@ -334,7 +349,7 @@ PathItem = Item.extend(new function() {
} }
} }
if (closed && handleIn != null) { if (closed && handleIn != null) {
var segment = this.segments[0]; var segment = this._segments[0];
segment.handleIn = handleIn.subtract(segment.point); segment.handleIn = handleIn.subtract(segment.point);
} }
}, },
@ -342,14 +357,14 @@ PathItem = Item.extend(new function() {
curveBy: function(throughVector, toVector, parameter) { curveBy: function(throughVector, toVector, parameter) {
throughVector = Point.read(throughVector); throughVector = Point.read(throughVector);
toVector = Point.read(toVector); toVector = Point.read(toVector);
var current = this.segments[this.segments.length - 1].point; var current = this._segments[this._segments.length - 1].point;
this.curveTo(current.add(throughVector), current.add(toVector), parameter); this.curveTo(current.add(throughVector), current.add(toVector), parameter);
}, },
arcBy: function(throughVector, toVector) { arcBy: function(throughVector, toVector) {
throughVector = Point.read(throughVector); throughVector = Point.read(throughVector);
toVector = Point.read(toVector); toVector = Point.read(toVector);
var current = this.segments[this.segments.length - 1].point; var current = this._segments[this._segments.length - 1].point;
this.arcBy(current.add(throughVector), current.add(toVector)); this.arcBy(current.add(throughVector), current.add(toVector));
}, },
@ -365,8 +380,8 @@ PathItem = Item.extend(new function() {
if(!this.visible) return; if(!this.visible) return;
ctx.beginPath(); ctx.beginPath();
var cp1; var cp1;
for(var i = 0, l = this.segments.length; i < l; i++) { for(var i = 0, l = this._segments.length; i < l; i++) {
var segment = this.segments[i]; var segment = this._segments[i];
var point = segment.point; var point = segment.point;
var handleIn = segment.handleIn ? segment.handleIn.add(point) : point; var handleIn = segment.handleIn ? segment.handleIn.add(point) : point;
var handleOut = segment.handleOut ? segment.handleOut.add(point) : point; var handleOut = segment.handleOut ? segment.handleOut.add(point) : point;
@ -378,8 +393,8 @@ PathItem = Item.extend(new function() {
} }
cp1 = handleOut; cp1 = handleOut;
} }
if(this.closed && this.segments.length > 1) { if(this.closed && this._segments.length > 1) {
var segment = this.segments[0]; var segment = this._segments[0];
var point = segment.point; var point = segment.point;
var handleIn = segment.handleIn ? segment.handleIn.add(point) : point; var handleIn = segment.handleIn ? segment.handleIn.add(point) : point;
ctx.bezierCurveTo(cp1.x, cp1.y, handleIn.x, handleIn.y, ctx.bezierCurveTo(cp1.x, cp1.y, handleIn.x, handleIn.y,

View file

@ -32,8 +32,8 @@ Segment = Base.extend({
// TODO: // TODO:
// insert: function() { // insert: function() {
// if(this.segments && this.segments.path) { // if(this._segments && this._segments.path) {
// var path = this.segments.path; // var path = this._segments.path;
// path.checkValid(); // path.checkValid();
// //
// } // }
@ -68,7 +68,7 @@ Segment = Base.extend({
}, },
getIndex: function() { getIndex: function() {
var segments = this.path.segments; var segments = this.path._segments;
for(var i = 0, l = segments.length; i < l; i++) { for(var i = 0, l = segments.length; i < l; i++) {
if(segments[i] == this) if(segments[i] == this)
return i; return i;
@ -81,8 +81,8 @@ Segment = Base.extend({
// todo // todo
// getCurve: function() { // getCurve: function() {
// if(this.segments && this.segments.path) { // if(this._segments && this._segments.path) {
// var curves = this.segments.path.getCurves(); // var curves = this._segments.path.getCurves();
// // The curves list handles closing curves, so the curves.size // // The curves list handles closing curves, so the curves.size
// // is adjusted accordingly. just check to be in the boundaries here: // // is adjusted accordingly. just check to be in the boundaries here:
// return index < curves.length ? curves[index] : null; // return index < curves.length ? curves[index] : null;
@ -91,12 +91,13 @@ Segment = Base.extend({
getNext: function() { getNext: function() {
var index = this.index; var index = this.index;
return this.path && index < this.path.segments.length - 1 return this.path && index < this.path._segments.length - 1
? this.path.segments[index + 1] : null; ? this.path._segments[index + 1] : null;
}, },
getPrevious: function() { getPrevious: function() {
return this.path != null && index > 0 ? this.segments[this.index - 1] : null; return this.path != null && index > 0
? this.path._segments[this.index - 1] : null;
}, },
// todo // todo
@ -115,8 +116,8 @@ Segment = Base.extend({
}, },
remove: function() { remove: function() {
if(this.path && this.path.segments) if(this.path && this.path._segments)
return this.path.segments.splice(this.index, 1); return this.path._segments.splice(this.index, 1);
return false; return false;
}, },