User Tools
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
design_guide_path [2018/05/12 08:12] z3dev |
design_guide_path [2018/06/12 14:13] (current) z3dev |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ==== Path ==== | ==== Path ==== | ||
| - | A path is a series of points, connected by very thin (invisible) lines. | + | A path is a series of points, connected by very thin (invisible) line segments. Paths can be created by giving an array of points, or by calling various functions to create or extend another path. |
| - | In addition, a path can be open or closed. A open path is typically used to create another, by appending additional points. A closed path is final, and has a line between first and last points. | + | <code javascript> |
| + | let path = new CSG.Path2D([[10, 10], [-10, 10]], false); | ||
| + | let anotherpath = new CSG.Path2D([[-10, -10]]) | ||
| + | path = path.concat(anotherpath) | ||
| + | path = path.appendPoint([10,-10]) | ||
| + | path = path.close() | ||
| + | </code> | ||
| - | Paths can be created by giving an array of points, or by calling various functions to create or extend a path. | + | In addition, a path can be open or closed. An open path is typically used to create another, by appending additional points. A closed path is final, and has a line between first and last points. |
| - | //Note: The difference between Paths and 2D shapes are that Paths are composed of very thin lines, whereas a two dimensional shapes always enclose an area.// | + | Curved paths can also be created. Paths can be created as an arc, or arcs can be appended to an existing path. |
| + | |||
| + | <code javascript> | ||
| + | let p1 = new CSG.Path2D([[27,-22],[27,-3]],false); | ||
| + | p1 = p1.appendArc([12,-22],{xradius: 15,yradius: -20,xaxisrotation: 0,clockwise: false,large: false}); | ||
| + | p1 = p1.close(); | ||
| + | </code> | ||
| Which include: | Which include: | ||
| Line 18: | Line 30: | ||
| appendBezier([[x,y]], options): create and return a new Path containing the callee's points followed by a Bezier curve ending at the last point given; all but the last point given are the control points of the Bezier; a null initial control point means use the last two points of the callee as control points for the new Bezier curve. | appendBezier([[x,y]], options): create and return a new Path containing the callee's points followed by a Bezier curve ending at the last point given; all but the last point given are the control points of the Bezier; a null initial control point means use the last two points of the callee as control points for the new Bezier curve. | ||
| - | |||
| options can specify {resolution: 55}. | options can specify {resolution: 55}. | ||
| Paths can be concatenated with .concat(), the result is a new path. | Paths can be concatenated with .concat(), the result is a new path. | ||
| + | |||
| + | //Note: The difference between Paths and 2D shapes are that Paths are composed of very thin lines, whereas a two dimensional shapes always enclose an area.// | ||
| === Conversion to 2D Shape === | === Conversion to 2D Shape === | ||
| - | Paths can be converted to two dimensional shapes. First, a Path can be converted directly to a two dimensional shape but the Path must be **closed**. | + | Paths can be converted to two dimensional shapes in various forms. |
| + | |||
| + | First, a Path can be converted directly to a two dimensional shape but the Path must be **closed**. | ||
| <code javascript> | <code javascript> | ||
| - | let path = new CSG.Path2D([[10,10], [-10,10], [-10,-10]], true) // create a closed path | + | // create a closed path in shape of triangle |
| + | let path = new CSG.Path2D([[10,10], [-10,10], [-10,-10]], true) | ||
| let shape = path.innerToCAG() | let shape = path.innerToCAG() | ||
| </code> | </code> | ||
| Line 35: | Line 51: | ||
| <code javascript> | <code javascript> | ||
| - | let path = new CSG.Path2D([[10,10], [-10,10], [-10,-10]], true) // create a closed path | + | // create an open path in shape of L |
| + | let path = new CSG.Path2D([[10,10], [-10,10], [-10,-10]], false) | ||
| let shape = path.expandToCAG(3) | let shape = path.expandToCAG(3) | ||
| </code> | </code> | ||
