Path# rename #pointsToCurves to #simplify and #curvesToPoints to #flatten.

This commit is contained in:
Jonathan Puckey 2011-06-20 19:17:07 +02:00
parent 322a427208
commit a2a8939d5d
5 changed files with 24 additions and 19 deletions

View file

@ -22,12 +22,12 @@
var length = curve.length; var length = curve.length;
var step = 10; var step = 10;
var iteratively = false; var iteratively = false;
var curvesToPoints = true; var flatten = true;
var num = Math.floor(length / step); var num = Math.floor(length / step);
var prev = 0; var prev = 0;
if (curvesToPoints) { if (flatten) {
var clone = path.clone(); var clone = path.clone();
clone.curvesToPoints(step); clone.flatten(step);
for (var i = 0; i < clone.segments.length; i++) { for (var i = 0; i < clone.segments.length; i++) {
var point = clone.segments[i].point; var point = clone.segments[i].point;
var circle = new Path.Circle(point, step / 2); var circle = new Path.Circle(point, step / 2);

View file

@ -42,7 +42,7 @@
var segmentCount = path.segments.length; var segmentCount = path.segments.length;
// When the mouse is released, simplify it: // When the mouse is released, simplify it:
path.pointsToCurves(10); path.simplify(10);
// Select the path, so we can see its segments: // Select the path, so we can see its segments:
path.fullySelected = true; path.fullySelected = true;

View file

@ -649,12 +649,14 @@ var Path = this.Path = PathItem.extend({
}, },
/** /**
* Converts the curves in the path to straight lines. * Converts the curves in a path to straight lines with an even distribution
* of points. The distance between the produced segments is as close as
* possible to the value specified by the {@code maxDistance} parameter.
* *
* @param {Number} maxDistance the maximum distance between the points * @param {Number} maxDistance the maximum distance between the points
* *
* @example {@paperscript} * @example {@paperscript}
* // Straightening the curves of a circle: * // Flattening a circle shaped path:
* *
* // Create a circle shaped path at { x: 80, y: 50 } * // Create a circle shaped path at { x: 80, y: 50 }
* // with a radius of 35: * // with a radius of 35:
@ -668,12 +670,12 @@ var Path = this.Path = PathItem.extend({
* copy.position.x += 150; * copy.position.x += 150;
* *
* // Convert its curves to points, with a max distance of 20: * // Convert its curves to points, with a max distance of 20:
* copy.curvesToPoints(20); * copy.flatten(20);
* *
* // Select the copy, so we can inspect its segments: * // Select the copy, so we can inspect its segments:
* copy.selected = true; * copy.selected = true;
*/ */
curvesToPoints: function(maxDistance) { flatten: function(maxDistance) {
var flattener = new PathFlattener(this), var flattener = new PathFlattener(this),
pos = 0, pos = 0,
// Adapt step = maxDistance so the points distribute evenly. // Adapt step = maxDistance so the points distribute evenly.
@ -690,11 +692,15 @@ var Path = this.Path = PathItem.extend({
}, },
/** /**
* Smooths a path by simplifying it. The {@link Path#segments} array is
* analyzed and replaced by a more optimal set of segments, reducing memory
* usage and speeding up drawing.
*
* @param {Number} [tolerance=2.5] * @param {Number} [tolerance=2.5]
* *
* @example {@paperscript height=300} * @example {@paperscript height=300}
* // Click and drag below to draw to draw a line, when you release the * // Click and drag below to draw to draw a line, when you release the
* // mouse, the is made smooth using path.pointsToCurves(): * // mouse, the is made smooth using path.simplify():
* *
* var path; * var path;
* function onMouseDown(event) { * function onMouseDown(event) {
@ -719,13 +725,12 @@ var Path = this.Path = PathItem.extend({
* } * }
* *
* function onMouseUp(event) { * function onMouseUp(event) {
* // When the mouse is released, simplify the path using * // When the mouse is released, simplify the path:
* // the pointsToCurves function: * path.simplify();
* path.pointsToCurves();
* path.selected = true; * path.selected = true;
* } * }
*/ */
pointsToCurves: function(tolerance) { simplify: function(tolerance) {
var fitter = new PathFitter(this, tolerance || 2.5); var fitter = new PathFitter(this, tolerance || 2.5);
this.setSegments(fitter.fit()); this.setSegments(fitter.fit());
}, },

View file

@ -148,25 +148,25 @@ test('After removing all segments of a selected path, it should still be selecte
}); });
test('After simplifying a path using #pointToCurves(), the path should stay fullySelected', function() { test('After simplifying a path using #simplify(), the path should stay fullySelected', function() {
var path = new Path(); var path = new Path();
for (var i = 0; i < 30; i++) { for (var i = 0; i < 30; i++) {
path.add(i * 10, 10); path.add(i * 10, 10);
}; };
path.fullySelected = true; path.fullySelected = true;
path.pointsToCurves(); path.simplify();
equals(function() { equals(function() {
return path.fullySelected; return path.fullySelected;
}, true); }, true);
}); });
test('After simplifying a path using #pointToCurves(), the path should stay selected', function() { test('After simplifying a path using #simplify(), the path should stay selected', function() {
var path = new Path(); var path = new Path();
for (var i = 0; i < 30; i++) { for (var i = 0; i < 30; i++) {
path.add(i * 10, (i % 2 ? 20 : 40)); path.add(i * 10, (i % 2 ? 20 : 40));
}; };
path.selected = true; path.selected = true;
path.pointsToCurves(); path.simplify();
equals(function() { equals(function() {
return path.selected; return path.selected;
}, true); }, true);

View file

@ -24,11 +24,11 @@ test('path.curves Synchronisation', function() {
equals(path.curves.toString(), "{ point1: { x: 0, y: 100 }, point2: { x: 100, y: 100 } },{ point1: { x: 100, y: 100 }, point2: { x: 0, y: 100 } }", "path.curves: path.add(new Point(100, 100));\npath.removeSegments(1, 2);"); equals(path.curves.toString(), "{ point1: { x: 0, y: 100 }, point2: { x: 100, y: 100 } },{ point1: { x: 100, y: 100 }, point2: { x: 0, y: 100 } }", "path.curves: path.add(new Point(100, 100));\npath.removeSegments(1, 2);");
}); });
test('path.curvesToPoints(maxDistance)', function() { test('path.flatten(maxDistance)', function() {
var path = new Path.Circle(new Size(80, 50), 35); var path = new Path.Circle(new Size(80, 50), 35);
// Convert its curves to points, with a max distance of 20: // Convert its curves to points, with a max distance of 20:
path.curvesToPoints(20); path.flatten(20);
equals(function() { equals(function() {
return path.lastSegment.point.equals(path.firstSegment.point); return path.lastSegment.point.equals(path.firstSegment.point);