Skip to content

Commit e4eb463

Browse files
committed
Path: document arcTo and curveTo.
1 parent 14e2a61 commit e4eb463

1 file changed

Lines changed: 88 additions & 8 deletions

File tree

src/path/Path.js

Lines changed: 88 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1276,11 +1276,45 @@ var Path = this.Path = PathItem.extend({
12761276
);
12771277
},
12781278

1279-
// DOCS: document Path#curveTo
1279+
// DOCS: document Path#curveTo 'paramater' param.
12801280
/**
1281-
* @param {Point} through
1282-
* @param {Point} to
1281+
* Draws a curve from the position of the last segment point in
1282+
* the path that goes through the specified {@code through} point,
1283+
* to the specified {@code to} point by adding one segment to the path.
1284+
*
1285+
* @param {Point} through the point through which the curve should go
1286+
* @param {Point} to the point where the curve should end
12831287
* @param {Number} [parameter=0.5]
1288+
*
1289+
* @example {@paperscript height=300}
1290+
* // Interactive example. Click and drag in the view below:
1291+
*
1292+
* var myPath;
1293+
* function onMouseDrag(event) {
1294+
* // If we created a path before, remove it:
1295+
* if (myPath) {
1296+
* myPath.remove();
1297+
* }
1298+
*
1299+
* // Create a new path and add a segment point to it
1300+
* // at {x: 150, y: 150):
1301+
* myPath = new Path();
1302+
* myPath.add(150, 150);
1303+
*
1304+
* // Draw a curve through the position of the mouse to 'toPoint'
1305+
* var toPoint = new Point(350, 150);
1306+
* myPath.curveTo(event.point, toPoint);
1307+
*
1308+
* // Select the path, so we can see its segments:
1309+
* myPath.selected = true;
1310+
* }
1311+
*
1312+
* // When the mouse is released, deselect the path
1313+
* // and set its stroke-color to black:
1314+
* function onMouseUp(event) {
1315+
* myPath.selected = false;
1316+
* myPath.strokeColor = 'black';
1317+
* }
12841318
*/
12851319
curveTo: function(through, to, parameter) {
12861320
through = Point.read(arguments, 0, 1);
@@ -1298,12 +1332,16 @@ var Path = this.Path = PathItem.extend({
12981332
this.quadraticCurveTo(handle, to);
12991333
},
13001334

1301-
// DOCS: document Path#arcTo
13021335
/**
1336+
* Draws an arc from the position of the last segment point in
1337+
* the path that goes through the specified {@code through} point,
1338+
* to the specified {@code to} point by adding one or more segments to
1339+
* the path.
1340+
*
13031341
* @name Path#arcTo
13041342
* @function
1305-
* @param {Point} through
1306-
* @param {Point} to
1343+
* @param {Point} through the point where the arc should pass through
1344+
* @param {Point} to the point where the arc should end
13071345
*
13081346
* @example {@paperscript}
13091347
* var path = new Path();
@@ -1356,8 +1394,50 @@ var Path = this.Path = PathItem.extend({
13561394
* }
13571395
*/
13581396
/**
1359-
* @param {Point} to
1360-
* @param {Boolean} [clockwise=true]
1397+
* Draws an arc from the position of the last segment point in
1398+
* the path to the specified point by adding one or more segments to the
1399+
* path.
1400+
*
1401+
* @param {Point} point
1402+
* @param {Boolean} [clockwise=true] specifies whether the arc should
1403+
* be drawn in clockwise direction.
1404+
*
1405+
* @example {@paperscript}
1406+
* var path = new Path();
1407+
* path.strokeColor = 'black';
1408+
*
1409+
* path.add(new Point(30, 75));
1410+
* path.arcTo(new Point(130, 75));
1411+
*
1412+
* var path2 = new Path();
1413+
* path2.strokeColor = 'red';
1414+
* path2.add(new Point(180, 25));
1415+
*
1416+
* // To draw an arc in anticlockwise direction,
1417+
* // we pass 'false' as the second argument to arcTo:
1418+
* path2.arcTo(new Point(280, 25), false);
1419+
*
1420+
* @example {@paperscript height=300}
1421+
* // Interactive example. Click and drag in the view below:
1422+
* var myPath;
1423+
*
1424+
* // The mouse has to move at least 20 points before
1425+
* // the next mouse drag event is fired:
1426+
* tool.minDistance = 20;
1427+
*
1428+
* // When the user clicks, create a new path and add
1429+
* // the current mouse position to it as its first segment:
1430+
* function onMouseDown(event) {
1431+
* myPath = new Path();
1432+
* myPath.strokeColor = 'black';
1433+
* myPath.add(event.point);
1434+
* }
1435+
*
1436+
* // On each mouse drag event, draw an arc to the current
1437+
* // position of the mouse:
1438+
* function onMouseDrag(event) {
1439+
* myPath.arcTo(event.point);
1440+
* }
13611441
*/
13621442
arcTo: function(to, clockwise) {
13631443
// Get the start point:

0 commit comments

Comments
 (0)