Path.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. [page:CurvePath] &rarr;
  12. <h1>[name]</h1>
  13. <div class="desc">
  14. A 2d path representation, comprising of points, lines, and cubes, similar to the html5 2d canvas api.
  15. It extends [page:CurvePath].
  16. </div>
  17. <h2>Constructor</h2>
  18. <h3>[name]( [page:Array points] )</h3>
  19. <div>
  20. points -- array of Vector2
  21. </div>
  22. <div>
  23. Creates a Path from the points. The first vector defines the offset. After that the lines get defined.
  24. </div>
  25. <h2>Properties</h2>
  26. <h3>[property:array actions]</h3>
  27. <div>
  28. The possible actions that define the path.
  29. </div>
  30. <h2>Methods</h2>
  31. <h3>[method:null fromPoints]( [page:Array vector2s] )</h3>
  32. <div>
  33. Adds to the Path from the points. The first vector defines the offset. After that the lines get defined.
  34. </div>
  35. <h3>[method:null moveTo]( [page:Float x], [page:Float y] )</h3>
  36. <div>This moves the offset to x and y</div>
  37. <h3>[method:null lineTo]( [page:Float x], [page:Float y] )</h3>
  38. <div>This creates a line from the offset to X and Y and updates the offset to X and Y.</div>
  39. <h3>[method:null quadraticCurveTo]( [page:Float cpX], [page:Float cpY], [page:Float x], [page:Float y] )</h3>
  40. <div>This creates a quadratic curve from the offset to x and y with cpX and cpY as control point and updates the offset to x and y.</div>
  41. <h3>[method:null bezierCurveTo]( [page:Float cp1X], [page:Float cp1Y], [page:Float cp2X], [page:Float cp2Y], [page:Float x], [page:Float y] )</h3>
  42. <div>This creates a bezier curve from the last offset to x and y with cp1X, cp1Y and cp1X, cp1Y as control points and updates the offset to x and y.</div>
  43. <h3>[method:null splineThru] ( [page:Array points] ) </h3>
  44. <div>points - An array of [page:Vector2]s</div>
  45. <div>Connects a new [page:SplineCurve] onto the path.</div>
  46. <h3>[method:null arc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
  47. <div>
  48. x, y -- The center of the arc offset from the last call
  49. radius -- The radius of the arc
  50. startAngle -- The start angle in radians
  51. endAngle -- The end angle in radians
  52. clockwise -- Sweep the arc clockwise. Defaults to false
  53. </div>
  54. <div>Draw an arc offset from the last call</div>
  55. <h3>[method:null absarc]( [page:Float x], [page:Float y], [page:Float radius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
  56. <div>
  57. x, y -- The absolute center of the arc
  58. radius -- The radius of the arc
  59. startAngle -- The start angle in radians
  60. endAngle -- The end angle in radians
  61. clockwise -- Sweep the arc clockwise. Defaults to false
  62. </div>
  63. <div>Draw an arc absolutely positioned</div>
  64. <h3>[method:null ellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )</h3>
  65. <div>
  66. x, y -- The center of the ellipse offset from the last call
  67. xRadius -- The radius of the ellipse in the x axis
  68. yRadius -- The radius of the ellipse in the y axis
  69. startAngle -- The start angle in radians
  70. endAngle -- The end angle in radians
  71. clockwise -- Sweep the ellipse clockwise. Defaults to false
  72. rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
  73. </div>
  74. <div>Draw an ellipse offset from the last call</div>
  75. <h3>[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )</h3>
  76. <div>
  77. x, y -- The absolute center of the ellipse
  78. xRadius -- The radius of the ellipse in the x axis
  79. yRadius -- The radius of the ellipse in the y axis
  80. startAngle -- The start angle in radians
  81. endAngle -- The end angle in radians
  82. clockwise -- Sweep the ellipse clockwise. Defaults to false
  83. rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
  84. </div>
  85. <div>Draw an ellipse absolutely positioned</div>
  86. <h3>[method:Array toShapes]( [page:Boolean isCCW], [page:Boolean noHoles] )</h3>
  87. <div>
  88. isCCW -- Changes how solids and holes are generated<br/>
  89. noHoles -- Whether or not to generate holes
  90. </div>
  91. <div>
  92. Converts the Path into an array of Shapes. By default solid shapes are defined clockwise (CW) and holes are defined counterclockwise (CCW). If isCCW is set to true,
  93. then those are flipped. If the paramater noHoles is set to true then all paths are set as solid shapes and isCCW is ignored.
  94. <br/>
  95. </div>
  96. <h2>Source</h2>
  97. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  98. </body>
  99. </html>