mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
Update docs and library.
This commit is contained in:
Jürg Lehni
parent
cbbdec072a
commit
efa20386b0
3 changed files with 782 additions and 66 deletions
646
dist/docs/classes/Path.html
vendored
646
dist/docs/classes/Path.html
vendored
|
|
@ -76,6 +76,652 @@ var path = new Path(segments);
|
|||
path.strokeColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Shaped Paths</h3>
|
||||
<div id="path-line-pt1-pt2-member" class="member">
|
||||
<div id="path-line-pt1-pt2-link" class="member-link">
|
||||
<a name="path-line-pt1-pt2" href="#" onClick="return toggleMember('path-line-pt1-pt2', false);"><tt><b>Path.Line</b>(pt1, pt2)</tt></a>
|
||||
</div>
|
||||
<div id="path-line-pt1-pt2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-line-pt1-pt2', false);"><tt><b>Path.Line</b>(pt1, pt2)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-line-pt1-pt2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a Path Item with two anchor points forming a line.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>pt1:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the first anchor point of the path
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>pt2:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the second anchor point of the path
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var from = new Point(20, 20);
|
||||
var to = new Point(100, 100);
|
||||
var path = new Path.Line(from, to);
|
||||
path.strokeColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-rectangle-point-size-member" class="member">
|
||||
<div id="path-rectangle-point-size-link" class="member-link">
|
||||
<a name="path-rectangle-point-size" href="#" onClick="return toggleMember('path-rectangle-point-size', false);"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
|
||||
</div>
|
||||
<div id="path-rectangle-point-size-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-rectangle-point-size', false);"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-point-size', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a rectangle shaped Path Item from the passed point and size.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>size:</tt>
|
||||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var point = new Point(100, 100);
|
||||
var size = new Size(100, 100);
|
||||
var rectangle = new Rectangle(point, size);
|
||||
var path = new Path.Rectangle(rectangle);
|
||||
path.strokeColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-rectangle-point1-point2-member" class="member">
|
||||
<div id="path-rectangle-point1-point2-link" class="member-link">
|
||||
<a name="path-rectangle-point1-point2" href="#" onClick="return toggleMember('path-rectangle-point1-point2', false);"><tt><b>Path.Rectangle</b>(point1, point2)</tt></a>
|
||||
</div>
|
||||
<div id="path-rectangle-point1-point2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-rectangle-point1-point2', false);"><tt><b>Path.Rectangle</b>(point1, point2)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-point1-point2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a rectangle shaped Path Item from the passed points. These do not
|
||||
necessarily need to be the top left and bottom right corners, the
|
||||
constructor figures out how to fit a rectangle between them.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point1:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— The first point defining the rectangle
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>point2:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— The second point defining the rectangle
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var point = new Point(100, 100);
|
||||
var point2 = new Point(200, 300);
|
||||
var path = new Path.Rectangle(point, point2);
|
||||
path.strokeColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-rectangle-rect-member" class="member">
|
||||
<div id="path-rectangle-rect-link" class="member-link">
|
||||
<a name="path-rectangle-rect" href="#" onClick="return toggleMember('path-rectangle-rect', false);"><tt><b>Path.Rectangle</b>(rect)</tt></a>
|
||||
</div>
|
||||
<div id="path-rectangle-rect-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-rectangle-rect', false);"><tt><b>Path.Rectangle</b>(rect)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-rect', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a rectangle shaped Path Item from the passed abstract
|
||||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>rect:</tt>
|
||||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var point = new Point(100, 100);
|
||||
var size = new Size(100, 100);
|
||||
var rectangle = new Rectangle(point, size);
|
||||
var path = new Path.Rectangle(rectangle);
|
||||
path.strokeColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-roundrectangle-rect-size-member" class="member">
|
||||
<div id="path-roundrectangle-rect-size-link" class="member-link">
|
||||
<a name="path-roundrectangle-rect-size" href="#" onClick="return toggleMember('path-roundrectangle-rect-size', false);"><tt><b>Path.RoundRectangle</b>(rect, size)</tt></a>
|
||||
</div>
|
||||
<div id="path-roundrectangle-rect-size-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-roundrectangle-rect-size', false);"><tt><b>Path.RoundRectangle</b>(rect, size)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-roundrectangle-rect-size', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a rectangular Path Item with rounded corners.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>rect:</tt>
|
||||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>size:</tt>
|
||||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||||
— the size of the rounded corners
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var point = new Point(100, 100);
|
||||
var size = new Size(100, 100);
|
||||
var rectangle = new Rectangle(point, size);
|
||||
var cornerSize = new Size(30, 30);
|
||||
var path = new Path.RoundRectangle(rectangle, cornerSize);</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-oval-rect-member" class="member">
|
||||
<div id="path-oval-rect-link" class="member-link">
|
||||
<a name="path-oval-rect" href="#" onClick="return toggleMember('path-oval-rect', false);"><tt><b>Path.Oval</b>(rect[, circumscribed])</tt></a>
|
||||
</div>
|
||||
<div id="path-oval-rect-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-oval-rect', false);"><tt><b>Path.Oval</b>(rect[, circumscribed])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-oval-rect', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates an oval shaped Path Item.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>rect:</tt>
|
||||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>circumscribed:</tt>
|
||||
<tt>Boolean</tt>
|
||||
— when set to <tt>true</tt> the
|
||||
oval shaped path will be created so the rectangle fits into
|
||||
it. When set to <tt>false</tt> the oval path will fit within
|
||||
the rectangle.
|
||||
— optional, default: <tt>false</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var topLeft = new Point(100, 100);
|
||||
var size = new Size(150, 100);
|
||||
var rectangle = new Rectangle(topLeft, size);
|
||||
var path = new Path.Oval(rectangle);
|
||||
path.fillColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-circle-center-radius-member" class="member">
|
||||
<div id="path-circle-center-radius-link" class="member-link">
|
||||
<a name="path-circle-center-radius" href="#" onClick="return toggleMember('path-circle-center-radius', false);"><tt><b>Path.Circle</b>(center, radius)</tt></a>
|
||||
</div>
|
||||
<div id="path-circle-center-radius-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-circle-center-radius', false);"><tt><b>Path.Circle</b>(center, radius)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-circle-center-radius', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a circle shaped Path Item.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>center:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the center point of the circle
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>radius:</tt>
|
||||
<tt>Number</tt>
|
||||
— the radius of the circle
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var path = new Path.Circle(new Point(100, 100), 50);</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-arc-from-through-to-member" class="member">
|
||||
<div id="path-arc-from-through-to-link" class="member-link">
|
||||
<a name="path-arc-from-through-to" href="#" onClick="return toggleMember('path-arc-from-through-to', false);"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
|
||||
</div>
|
||||
<div id="path-arc-from-through-to-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-arc-from-through-to', false);"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-arc-from-through-to', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a circular arc shaped Path Item.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>from:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the starting point of the circular arc
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>through:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the point the arc passes through
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>to:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the end point of the arc
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var start = new Point(0, 0);
|
||||
var through = new Point(100, 100);
|
||||
var to = new Point(200, 150);
|
||||
var path = new Path.Arc(start, through, to);
|
||||
path.strokeColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-regularpolygon-center-numSides-radius-member" class="member">
|
||||
<div id="path-regularpolygon-center-numSides-radius-link" class="member-link">
|
||||
<a name="path-regularpolygon-center-numSides-radius" href="#" onClick="return toggleMember('path-regularpolygon-center-numSides-radius', false);"><tt><b>Path.RegularPolygon</b>(center, numSides, radius)</tt></a>
|
||||
</div>
|
||||
<div id="path-regularpolygon-center-numSides-radius-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-regularpolygon-center-numSides-radius', false);"><tt><b>Path.RegularPolygon</b>(center, numSides, radius)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-regularpolygon-center-numSides-radius', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a regular polygon shaped Path Item.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>center:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the center point of the polygon
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>numSides:</tt>
|
||||
<tt>Number</tt>
|
||||
— the number of sides of the polygon
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>radius:</tt>
|
||||
<tt>Number</tt>
|
||||
— the radius of the polygon
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Create a triangle shaped path
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var center = new Point(100, 100);
|
||||
var sides = 3;
|
||||
var radius = 50;
|
||||
var triangle = new Path.RegularPolygon(center, sides, radius);
|
||||
triangle.fillColor = 'black';</pre>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Create a decahedron shaped path
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var center = new Point(100, 100);
|
||||
var sides = 10;
|
||||
var radius = 50;
|
||||
var decahedron = new Path.RegularPolygon(center, sides, radius);
|
||||
decahedron.fillColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-star-center-numPoints-radius1-radius2-member" class="member">
|
||||
<div id="path-star-center-numPoints-radius1-radius2-link" class="member-link">
|
||||
<a name="path-star-center-numPoints-radius1-radius2" href="#" onClick="return toggleMember('path-star-center-numPoints-radius1-radius2', false);"><tt><b>Path.Star</b>(center, numPoints, radius1, radius2)</tt></a>
|
||||
</div>
|
||||
<div id="path-star-center-numPoints-radius1-radius2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path-star-center-numPoints-radius1-radius2', false);"><tt><b>Path.Star</b>(center, numPoints, radius1, radius2)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-star-center-numPoints-radius1-radius2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a star shaped Path Item.</p>
|
||||
<p>The largest of <tt>radius1</tt> and <tt>radius2</tt> will be the outer
|
||||
radius of the star. The smallest of radius1 and radius2 will be the
|
||||
inner radius.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>center:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the center point of the star
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>numPoints:</tt>
|
||||
<tt>Number</tt>
|
||||
— the number of points of the star
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>radius1:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>radius2:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt> — the newly created path
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var center = new Point(100, 100);
|
||||
var points = 6;
|
||||
var radius1 = 20;
|
||||
var radius2 = 50;
|
||||
var path = new Path.Star(center, points, radius1, radius2);
|
||||
path.fillColor = 'black';</pre>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
101
dist/docs/resources/js/paper.js
vendored
101
dist/docs/resources/js/paper.js
vendored
|
|
@ -357,6 +357,14 @@ this.Base = Base.inject({
|
|||
});
|
||||
},
|
||||
|
||||
hyphenate: function(str) {
|
||||
return str.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g,
|
||||
function(match) {
|
||||
return match.charAt(0) + '-' + match.substring(1);
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
formatNumber: function(num) {
|
||||
return (Math.round(num * 100000) / 100000).toString();
|
||||
},
|
||||
|
|
@ -5691,54 +5699,80 @@ var GradientStop = this.GradientStop = Base.extend({
|
|||
});
|
||||
|
||||
var DomElement = new function() {
|
||||
function cumulate(el, name, parent, positioned) {
|
||||
function cumulateOffset(el, name, parent, test) {
|
||||
var left = name + 'Left',
|
||||
top = name + 'Top',
|
||||
x = 0,
|
||||
y = 0;
|
||||
while (el && (!positioned
|
||||
|| !/^(relative|absolute)$/.test(el.style.position))) {
|
||||
y = 0,
|
||||
style;
|
||||
while (el && el.style && (!test || !test.test(
|
||||
style = DomElement.getComputedStyle(el, 'position')))) {
|
||||
x += el[left] || 0;
|
||||
y += el[top] || 0;
|
||||
el = el[parent];
|
||||
}
|
||||
return Point.create(x, y);
|
||||
return {
|
||||
offset: Point.create(x, y),
|
||||
element: el,
|
||||
style: style
|
||||
};
|
||||
}
|
||||
|
||||
function getScrollOffset(el, test) {
|
||||
return cumulateOffset(el, 'scroll', 'parentNode', test).offset;
|
||||
}
|
||||
|
||||
return {
|
||||
getOffset: function(el, positioned, scroll) {
|
||||
var point = cumulate(el, 'offset', 'offsetParent', positioned);
|
||||
return scroll
|
||||
? point.subtract(cumulate(el, 'scroll', 'parentNode'))
|
||||
: point;
|
||||
getOffset: function(el, positioned, viewport) {
|
||||
var res = cumulateOffset(el, 'offset', 'offsetParent',
|
||||
positioned ? /^(relative|absolute|fixed)$/ : /^fixed$/);
|
||||
if (res.style == 'fixed' && !viewport)
|
||||
return res.offset.add(getScrollOffset(res.element));
|
||||
return viewport
|
||||
? res.offset.subtract(getScrollOffset(el, /^fixed$/))
|
||||
: res.offset;
|
||||
},
|
||||
|
||||
getSize: function(el) {
|
||||
return Size.create(el.offsetWidth, el.offsetHeight);
|
||||
},
|
||||
|
||||
getBounds: function(el, positioned, scroll) {
|
||||
return new Rectangle(DomElement.getOffset(el, positioned, scroll),
|
||||
DomElement.getSize(el));
|
||||
},
|
||||
|
||||
getWindowSize: function() {
|
||||
var doc = document.getElementsByTagName(
|
||||
document.compatMode === 'CSS1Compat' ? 'html' : 'body')[0];
|
||||
return Size.create(
|
||||
window.innerWidth || doc.clientWidth,
|
||||
window.innerHeight || doc.clientHeight
|
||||
);
|
||||
getBounds: function(el, positioned, viewport) {
|
||||
return new Rectangle(this.getOffset(el, positioned, viewport),
|
||||
this.getSize(el));
|
||||
},
|
||||
|
||||
isInvisible: function(el) {
|
||||
return DomElement.getSize(el).equals([0, 0]);
|
||||
return this.getSize(el).equals([0, 0]);
|
||||
},
|
||||
|
||||
isVisible: function(el) {
|
||||
return !DomElement.isInvisible(el)
|
||||
&& new Rectangle([0, 0], DomElement.getWindowSize())
|
||||
.intersects(DomElement.getBounds(el, false, true));
|
||||
return !this.isInvisible(el)
|
||||
&& new Rectangle([0, 0], this.getViewportSize(el))
|
||||
.intersects(this.getBounds(el, false, true));
|
||||
},
|
||||
|
||||
getViewport: function(doc) {
|
||||
return doc.defaultView || doc.parentWindow;
|
||||
},
|
||||
|
||||
getViewportSize: function(el) {
|
||||
var doc = el.ownerDocument,
|
||||
view = this.getViewport(doc),
|
||||
body = doc.getElementsByTagName(
|
||||
doc.compatMode === 'CSS1Compat' ? 'html' : 'body')[0];
|
||||
return Size.create(
|
||||
view.innerWidth || body.clientWidth,
|
||||
view.innerHeight || body.clientHeight
|
||||
);
|
||||
},
|
||||
|
||||
getComputedStyle: function(el, name) {
|
||||
if (el.currentStyle)
|
||||
return el.currentStyle[Base.camelize(name)];
|
||||
var style = this.getViewport(el.ownerDocument)
|
||||
.getComputedStyle(el, null);
|
||||
return style ? style.getPropertyValue(Base.hyphenate(name)) : null;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -5864,18 +5898,18 @@ var View = this.View = Base.extend({
|
|||
var size;
|
||||
if (canvas && canvas instanceof HTMLCanvasElement) {
|
||||
this._canvas = canvas;
|
||||
var offset = DomElement.getOffset(canvas);
|
||||
if (canvas.attributes.resize) {
|
||||
size = DomElement.getWindowSize().subtract(offset);
|
||||
var offset = DomElement.getOffset(canvas, false, true),
|
||||
that = this;
|
||||
size = DomElement.getViewportSize(canvas).subtract(offset);
|
||||
canvas.width = size.width;
|
||||
canvas.height = size.height;
|
||||
var that = this;
|
||||
DomEvent.add(window, {
|
||||
resize: function(event) {
|
||||
if (!DomElement.isInvisible(canvas))
|
||||
offset = DomElement.getOffset(canvas);
|
||||
that.setViewSize(
|
||||
DomElement.getWindowSize().subtract(offset));
|
||||
offset = DomElement.getOffset(canvas, false, true);
|
||||
that.setViewSize(DomElement.getViewportSize(canvas)
|
||||
.subtract(offset));
|
||||
if (that._onFrameCallback) {
|
||||
that._onFrameCallback(0, true);
|
||||
} else {
|
||||
|
|
@ -5892,7 +5926,8 @@ var View = this.View = Base.extend({
|
|||
if (canvas.attributes.stats) {
|
||||
this._stats = new Stats();
|
||||
var element = this._stats.domElement,
|
||||
style = element.style;
|
||||
style = element.style,
|
||||
offset = DomElement.getOffset(canvas);
|
||||
style.position = 'absolute';
|
||||
style.left = offset.x + 'px';
|
||||
style.top = offset.y + 'px';
|
||||
|
|
|
|||
101
dist/paper.js
vendored
101
dist/paper.js
vendored
|
|
@ -357,6 +357,14 @@ this.Base = Base.inject({
|
|||
});
|
||||
},
|
||||
|
||||
hyphenate: function(str) {
|
||||
return str.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g,
|
||||
function(match) {
|
||||
return match.charAt(0) + '-' + match.substring(1);
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
formatNumber: function(num) {
|
||||
return (Math.round(num * 100000) / 100000).toString();
|
||||
},
|
||||
|
|
@ -5691,54 +5699,80 @@ var GradientStop = this.GradientStop = Base.extend({
|
|||
});
|
||||
|
||||
var DomElement = new function() {
|
||||
function cumulate(el, name, parent, positioned) {
|
||||
function cumulateOffset(el, name, parent, test) {
|
||||
var left = name + 'Left',
|
||||
top = name + 'Top',
|
||||
x = 0,
|
||||
y = 0;
|
||||
while (el && (!positioned
|
||||
|| !/^(relative|absolute)$/.test(el.style.position))) {
|
||||
y = 0,
|
||||
style;
|
||||
while (el && el.style && (!test || !test.test(
|
||||
style = DomElement.getComputedStyle(el, 'position')))) {
|
||||
x += el[left] || 0;
|
||||
y += el[top] || 0;
|
||||
el = el[parent];
|
||||
}
|
||||
return Point.create(x, y);
|
||||
return {
|
||||
offset: Point.create(x, y),
|
||||
element: el,
|
||||
style: style
|
||||
};
|
||||
}
|
||||
|
||||
function getScrollOffset(el, test) {
|
||||
return cumulateOffset(el, 'scroll', 'parentNode', test).offset;
|
||||
}
|
||||
|
||||
return {
|
||||
getOffset: function(el, positioned, scroll) {
|
||||
var point = cumulate(el, 'offset', 'offsetParent', positioned);
|
||||
return scroll
|
||||
? point.subtract(cumulate(el, 'scroll', 'parentNode'))
|
||||
: point;
|
||||
getOffset: function(el, positioned, viewport) {
|
||||
var res = cumulateOffset(el, 'offset', 'offsetParent',
|
||||
positioned ? /^(relative|absolute|fixed)$/ : /^fixed$/);
|
||||
if (res.style == 'fixed' && !viewport)
|
||||
return res.offset.add(getScrollOffset(res.element));
|
||||
return viewport
|
||||
? res.offset.subtract(getScrollOffset(el, /^fixed$/))
|
||||
: res.offset;
|
||||
},
|
||||
|
||||
getSize: function(el) {
|
||||
return Size.create(el.offsetWidth, el.offsetHeight);
|
||||
},
|
||||
|
||||
getBounds: function(el, positioned, scroll) {
|
||||
return new Rectangle(DomElement.getOffset(el, positioned, scroll),
|
||||
DomElement.getSize(el));
|
||||
},
|
||||
|
||||
getWindowSize: function() {
|
||||
var doc = document.getElementsByTagName(
|
||||
document.compatMode === 'CSS1Compat' ? 'html' : 'body')[0];
|
||||
return Size.create(
|
||||
window.innerWidth || doc.clientWidth,
|
||||
window.innerHeight || doc.clientHeight
|
||||
);
|
||||
getBounds: function(el, positioned, viewport) {
|
||||
return new Rectangle(this.getOffset(el, positioned, viewport),
|
||||
this.getSize(el));
|
||||
},
|
||||
|
||||
isInvisible: function(el) {
|
||||
return DomElement.getSize(el).equals([0, 0]);
|
||||
return this.getSize(el).equals([0, 0]);
|
||||
},
|
||||
|
||||
isVisible: function(el) {
|
||||
return !DomElement.isInvisible(el)
|
||||
&& new Rectangle([0, 0], DomElement.getWindowSize())
|
||||
.intersects(DomElement.getBounds(el, false, true));
|
||||
return !this.isInvisible(el)
|
||||
&& new Rectangle([0, 0], this.getViewportSize(el))
|
||||
.intersects(this.getBounds(el, false, true));
|
||||
},
|
||||
|
||||
getViewport: function(doc) {
|
||||
return doc.defaultView || doc.parentWindow;
|
||||
},
|
||||
|
||||
getViewportSize: function(el) {
|
||||
var doc = el.ownerDocument,
|
||||
view = this.getViewport(doc),
|
||||
body = doc.getElementsByTagName(
|
||||
doc.compatMode === 'CSS1Compat' ? 'html' : 'body')[0];
|
||||
return Size.create(
|
||||
view.innerWidth || body.clientWidth,
|
||||
view.innerHeight || body.clientHeight
|
||||
);
|
||||
},
|
||||
|
||||
getComputedStyle: function(el, name) {
|
||||
if (el.currentStyle)
|
||||
return el.currentStyle[Base.camelize(name)];
|
||||
var style = this.getViewport(el.ownerDocument)
|
||||
.getComputedStyle(el, null);
|
||||
return style ? style.getPropertyValue(Base.hyphenate(name)) : null;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -5864,18 +5898,18 @@ var View = this.View = Base.extend({
|
|||
var size;
|
||||
if (canvas && canvas instanceof HTMLCanvasElement) {
|
||||
this._canvas = canvas;
|
||||
var offset = DomElement.getOffset(canvas);
|
||||
if (canvas.attributes.resize) {
|
||||
size = DomElement.getWindowSize().subtract(offset);
|
||||
var offset = DomElement.getOffset(canvas, false, true),
|
||||
that = this;
|
||||
size = DomElement.getViewportSize(canvas).subtract(offset);
|
||||
canvas.width = size.width;
|
||||
canvas.height = size.height;
|
||||
var that = this;
|
||||
DomEvent.add(window, {
|
||||
resize: function(event) {
|
||||
if (!DomElement.isInvisible(canvas))
|
||||
offset = DomElement.getOffset(canvas);
|
||||
that.setViewSize(
|
||||
DomElement.getWindowSize().subtract(offset));
|
||||
offset = DomElement.getOffset(canvas, false, true);
|
||||
that.setViewSize(DomElement.getViewportSize(canvas)
|
||||
.subtract(offset));
|
||||
if (that._onFrameCallback) {
|
||||
that._onFrameCallback(0, true);
|
||||
} else {
|
||||
|
|
@ -5892,7 +5926,8 @@ var View = this.View = Base.extend({
|
|||
if (canvas.attributes.stats) {
|
||||
this._stats = new Stats();
|
||||
var element = this._stats.domElement,
|
||||
style = element.style;
|
||||
style = element.style,
|
||||
offset = DomElement.getOffset(canvas);
|
||||
style.position = 'absolute';
|
||||
style.left = offset.x + 'px';
|
||||
style.top = offset.y + 'px';
|
||||
|
|
|
|||
Loading…
Reference in a new issue