mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 10:48:38 -05:00
Remove generated docs from repository.
This commit is contained in:
Jürg Lehni
parent
8ec8af4dc5
commit
7bea8d1098
53 changed files with 0 additions and 75945 deletions
569
dist/docs/classes/CharacterStyle.html
vendored
569
dist/docs/classes/CharacterStyle.html
vendored
|
|
@ -1,569 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CharacterStyle</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>CharacterStyle</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></b></p>
|
||||
|
||||
<p>The CharacterStyle object represents the character style of a text
|
||||
item (<a href="../classes/TextItem.html#characterstyle"><tt>textItem.characterStyle</tt></a>)</p>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var text = new PointText(new Point(50, 50));
|
||||
text.content = 'Hello world.';
|
||||
text.characterStyle = {
|
||||
fontSize: 50,
|
||||
fillColor: 'black',
|
||||
};</pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="font-member" class="member">
|
||||
<div id="font-link" class="member-link">
|
||||
<a name="font" href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
|
||||
</div>
|
||||
<div id="font-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('font', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The font of the character style.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'sans-serif'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fontsize-member" class="member">
|
||||
<div id="fontsize-link" class="member-link">
|
||||
<a name="fontsize" href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
|
||||
</div>
|
||||
<div id="fontsize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fontsize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The font size of the character style in points.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>10</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></h2>
|
||||
|
||||
|
||||
<h3>Stroke Style</h3>
|
||||
|
||||
<div id="strokecolor-member" class="member">
|
||||
<div id="strokecolor-link" class="member-link">
|
||||
<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the stroke color of a path:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to RGB red:
|
||||
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokewidth-member" class="member">
|
||||
<div id="strokewidth-link" class="member-link">
|
||||
<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
<div id="strokewidth-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The width of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>1</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting an item's stroke width:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to black:
|
||||
circle.strokeColor = 'black';
|
||||
|
||||
// Set its stroke width to 10:
|
||||
circle.strokeWidth = 10;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokecap-member" class="member">
|
||||
<div id="strokecap-link" class="member-link">
|
||||
<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecap-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
|
||||
have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'butt'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('round', 'square', 'butt')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke caps:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var line = new Path(new Point(80, 50), new Point(420, 50));
|
||||
line.strokeColor = 'black';
|
||||
line.strokeWidth = 20;
|
||||
|
||||
// Select the path, so we can see where the stroke is formed:
|
||||
line.selected = true;
|
||||
|
||||
// Set the stroke cap of the line to be round:
|
||||
line.strokeCap = 'round';
|
||||
|
||||
// Copy the path and set its stroke cap to be square:
|
||||
var line2 = line.clone();
|
||||
line2.position.y += 50;
|
||||
line2.strokeCap = 'square';
|
||||
|
||||
// Make another copy and set its stroke cap to be butt:
|
||||
var line2 = line.clone();
|
||||
line2.position.y += 100;
|
||||
line2.strokeCap = 'butt';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokejoin-member" class="member">
|
||||
<div id="strokejoin-link" class="member-link">
|
||||
<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
<div id="strokejoin-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the corners of paths when they have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'miter'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt> ('miter', 'round', 'bevel')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke joins:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var path = new Path();
|
||||
path.add(new Point(80, 100));
|
||||
path.add(new Point(120, 40));
|
||||
path.add(new Point(160, 100));
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 20;
|
||||
|
||||
// Select the path, so we can see where the stroke is formed:
|
||||
path.selected = true;
|
||||
|
||||
var path2 = path.clone();
|
||||
path2.position.x += path2.bounds.width * 1.5;
|
||||
path2.strokeJoin = 'round';
|
||||
|
||||
var path3 = path2.clone();
|
||||
path3.position.x += path3.bounds.width * 1.5;
|
||||
path3.strokeJoin = 'bevel';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="120" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dashoffset-member" class="member">
|
||||
<div id="dashoffset-link" class="member-link">
|
||||
<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
<div id="dashoffset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The dash offset of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>0</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dasharray-member" class="member">
|
||||
<div id="dasharray-link" class="member-link">
|
||||
<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
<div id="dasharray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>[]</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Array</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var path = new Path.Circle(new Point(80, 50), 40);
|
||||
path.strokeWidth = 2;
|
||||
path.strokeColor = 'black';
|
||||
|
||||
// Set the dashed stroke to [10pt dash, 4pt gap]:
|
||||
path.dashArray = [10, 4];
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="miterlimit-member" class="member">
|
||||
<div id="miterlimit-link" class="member-link">
|
||||
<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
<div id="miterlimit-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The miter limit of the stroke.</p>
|
||||
<p>When two line segments meet at a sharp angle and miter joins have been
|
||||
specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
|
||||
far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
|
||||
limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>10</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fill Style</h3>
|
||||
|
||||
<div id="fillcolor-member" class="member">
|
||||
<div id="fillcolor-link" class="member-link">
|
||||
<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
<div id="fillcolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fill color.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the fill color of a path to red:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set the fill color of the circle to RGB red:
|
||||
circle.fillColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
712
dist/docs/classes/Color.html
vendored
712
dist/docs/classes/Color.html
vendored
|
|
@ -1,712 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Color</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Color</h1>
|
||||
|
||||
<p>All properties and functions that expect color values accept
|
||||
instances of the different color classes such as <a href="../classes/RgbColor.html"><tt>RgbColor</tt></a>,
|
||||
<a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> and <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>, and also accept named colors
|
||||
and hex values as strings which are then converted to instances of
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> internally.</p>
|
||||
<p>
|
||||
<b>Example</b> — Named color values:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30.
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Pass a color name to the fillColor property, which is internally
|
||||
// converted to an RgbColor.
|
||||
circle.fillColor = 'green';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hex color values:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30.
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Pass a hex string to the fillColor property, which is internally
|
||||
// converted to an RgbColor.
|
||||
circle.fillColor = '#ff0000';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== properties ========================= -->
|
||||
<div class="reference-members"><h2>Operators</h2>
|
||||
|
||||
<div id="equals-member" class="member">
|
||||
<div id="equals-link" class="member-link">
|
||||
<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Color</tt></tt></a>
|
||||
</div>
|
||||
<div id="equals-description" class="member-description hidden">
|
||||
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Color</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSB Components</h3>
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-7">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
4382
dist/docs/classes/CompoundPath.html
vendored
4382
dist/docs/classes/CompoundPath.html
vendored
File diff suppressed because it is too large
Load diff
878
dist/docs/classes/Curve.html
vendored
878
dist/docs/classes/Curve.html
vendored
|
|
@ -1,878 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Curve</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Curve</h1>
|
||||
|
||||
<p>The Curve object represents the parts of a path that are connected by
|
||||
two following <a href="../classes/Segment.html"><tt>Segment</tt></a> objects. The curves of a path can be accessed
|
||||
through its <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
|
||||
<p>While a segment describe the anchor point and its incoming and outgoing
|
||||
handles, a Curve object describes the curve passing between two such
|
||||
segments. Curves and segments represent two different ways of looking at the
|
||||
same thing, but focusing on different aspects. Curves for example offer many
|
||||
convenient ways to work with parts of the path, finding lengths, positions or
|
||||
tangents at given offsets.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-member" class="member">
|
||||
<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-link" class="member-link">
|
||||
<a name="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7" href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
|
||||
</div>
|
||||
<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a new curve object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>segment1:</tt>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>segment2:</tt>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg2:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg3:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg4:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg5:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg6:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg7:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="point1-member" class="member">
|
||||
<div id="point1-link" class="member-link">
|
||||
<a name="point1" href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
|
||||
</div>
|
||||
<div id="point1-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point1', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The first anchor point of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point2-member" class="member">
|
||||
<div id="point2-link" class="member-link">
|
||||
<a name="point2" href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
|
||||
</div>
|
||||
<div id="point2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The second anchor point of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handle1-member" class="member">
|
||||
<div id="handle1-link" class="member-link">
|
||||
<a name="handle1" href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
|
||||
</div>
|
||||
<div id="handle1-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle1', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point that describes the tangent in the first anchor point.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handle2-member" class="member">
|
||||
<div id="handle2-link" class="member-link">
|
||||
<a name="handle2" href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
|
||||
</div>
|
||||
<div id="handle2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point that describes the tangent in the second anchor point.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment1-member" class="member">
|
||||
<div id="segment1-link" class="member-link">
|
||||
<a name="segment1" href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
|
||||
</div>
|
||||
<div id="segment1-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment1', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The first segment of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment2-member" class="member">
|
||||
<div id="segment2-link" class="member-link">
|
||||
<a name="segment2" href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
|
||||
</div>
|
||||
<div id="segment2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The second segment of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-member" class="member">
|
||||
<div id="path-link" class="member-link">
|
||||
<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div id="path-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path that the curve belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Path.html"><tt>Path</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="next-member" class="member">
|
||||
<div id="next-link" class="member-link">
|
||||
<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
<div id="next-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The next curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
|
||||
belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="previous-member" class="member">
|
||||
<div id="previous-link" class="member-link">
|
||||
<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
<div id="previous-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The previous curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
|
||||
belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selected-member" class="member">
|
||||
<div id="selected-link" class="member-link">
|
||||
<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
<div id="selected-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the handles of the curve are selected.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="length-member" class="member">
|
||||
<div id="length-link" class="member-link">
|
||||
<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
|
||||
</div>
|
||||
<div id="length-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The approximated length of the curve in points.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="islinear-member" class="member">
|
||||
<div id="islinear-link" class="member-link">
|
||||
<a name="islinear" href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
|
||||
</div>
|
||||
<div id="islinear-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('islinear', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if this curve is linear, meaning it does not define any curve
|
||||
handle.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> the curve is linear, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getparameterat-offset-member" class="member">
|
||||
<div id="getparameterat-offset-link" class="member-link">
|
||||
<a name="getparameterat-offset" href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
|
||||
</div>
|
||||
<div id="getparameterat-offset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameterat-offset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>offset:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>start:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getpoint-parameter-member" class="member">
|
||||
<div id="getpoint-parameter-link" class="member-link">
|
||||
<a name="getpoint-parameter" href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
|
||||
</div>
|
||||
<div id="getpoint-parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpoint-parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the point on the curve at the specified position.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>parameter:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position at which to find the point as
|
||||
a value between <tt>0</tt> and <tt>1</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="gettangent-parameter-member" class="member">
|
||||
<div id="gettangent-parameter-link" class="member-link">
|
||||
<a name="gettangent-parameter" href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
|
||||
</div>
|
||||
<div id="gettangent-parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettangent-parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the tangent point on the curve at the specified position.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>parameter:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position at which to find the tangent
|
||||
point as a value between <tt>0</tt> and <tt>1</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getnormal-parameter-member" class="member">
|
||||
<div id="getnormal-parameter-link" class="member-link">
|
||||
<a name="getnormal-parameter" href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
|
||||
</div>
|
||||
<div id="getnormal-parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnormal-parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the normal point on the curve at the specified position.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>parameter:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position at which to find the normal
|
||||
point as a value between <tt>0</tt> and <tt>1</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getparameter-point-member" class="member">
|
||||
<div id="getparameter-point-link" class="member-link">
|
||||
<a name="getparameter-point" href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="getparameter-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameter-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="reverse-member" class="member">
|
||||
<div id="reverse-link" class="member-link">
|
||||
<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
<div id="reverse-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns a reversed version of the curve, without modifying the curve
|
||||
itself.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt> — a reversed version of the curve
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns a copy of the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the curve.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
505
dist/docs/classes/CurveLocation.html
vendored
505
dist/docs/classes/CurveLocation.html
vendored
|
|
@ -1,505 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CurveLocation</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>CurveLocation</h1>
|
||||
|
||||
<p>CurveLocation objects describe a location on <a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
objects, as defined by the curve <a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>, a value between
|
||||
<tt>0</tt> (beginning of the curve) and <tt>1</tt> (end of the curve). If
|
||||
the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, its <a href="../classes/CurveLocation.html#index" onclick="return toggleMember('index', true);"><tt>index</tt></a> inside the
|
||||
<a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array is also provided.</p>
|
||||
<p>The class is in use in many places, such as
|
||||
<a href="../classes/Path.html#getlocationat-offset"><tt>path.getLocationAt(offset)</tt></a>, Path#getNearestLocation(point), etc.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="curvelocation-curve-parameter-point-distance-member" class="member">
|
||||
<div id="curvelocation-curve-parameter-point-distance-link" class="member-link">
|
||||
<a name="curvelocation-curve-parameter-point-distance" href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
|
||||
</div>
|
||||
<div id="curvelocation-curve-parameter-point-distance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curvelocation-curve-parameter-point-distance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a new CurveLocation object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>curve:</tt>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>parameter:</tt>
|
||||
<tt>Number</tt>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>distance:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="segment-member" class="member">
|
||||
<div id="segment-link" class="member-link">
|
||||
<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
<div id="segment-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The segment of the curve which is closer to the described location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curve-member" class="member">
|
||||
<div id="curve-link" class="member-link">
|
||||
<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
<div id="curve-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve by which the location is defined.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-member" class="member">
|
||||
<div id="path-link" class="member-link">
|
||||
<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div id="path-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path this curve belongs to, if any.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the curve within the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> list, if the
|
||||
curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Index</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="offset-member" class="member">
|
||||
<div id="offset-link" class="member-link">
|
||||
<a name="offset" href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
|
||||
</div>
|
||||
<div id="offset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('offset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The length of the path from its beginning up to the location described
|
||||
by this object.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curveoffset-member" class="member">
|
||||
<div id="curveoffset-link" class="member-link">
|
||||
<a name="curveoffset" href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
|
||||
</div>
|
||||
<div id="curveoffset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveoffset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The length of the curve from its beginning up to the location described
|
||||
by this object.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="parameter-member" class="member">
|
||||
<div id="parameter-link" class="member-link">
|
||||
<a name="parameter" href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
|
||||
</div>
|
||||
<div id="parameter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parameter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve parameter, as used by various bezier curve calculations. It is
|
||||
value between <tt>0</tt> (beginning of the curve) and <tt>1</tt> (end of
|
||||
the curve).</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The point which is defined by the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> and
|
||||
<a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tangent-member" class="member">
|
||||
<div id="tangent-link" class="member-link">
|
||||
<a name="tangent" href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
|
||||
</div>
|
||||
<div id="tangent-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tangent', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The tangential vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="normal-member" class="member">
|
||||
<div id="normal-link" class="member-link">
|
||||
<a name="normal" href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
|
||||
</div>
|
||||
<div id="normal-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('normal', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The normal vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="distance-member" class="member">
|
||||
<div id="distance-link" class="member-link">
|
||||
<a name="distance" href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
|
||||
</div>
|
||||
<div id="distance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('distance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The distance from the queried point to the returned location.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the curve location.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
73
dist/docs/classes/Event.html
vendored
73
dist/docs/classes/Event.html
vendored
|
|
@ -1,73 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Event</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Event</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="modifiers-member" class="member">
|
||||
<div id="modifiers-link" class="member-link">
|
||||
<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div id="modifiers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
200
dist/docs/classes/Gradient.html
vendored
200
dist/docs/classes/Gradient.html
vendored
|
|
@ -1,200 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gradient</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Gradient</h1>
|
||||
|
||||
<p>The Gradient object.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="gradient-stops-member" class="member">
|
||||
<div id="gradient-stops-link" class="member-link">
|
||||
<a name="gradient-stops" href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
|
||||
</div>
|
||||
<div id="gradient-stops-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradient-stops', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a gradient object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>stops:</tt>
|
||||
Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>type:</tt>
|
||||
<tt>String</tt>
|
||||
— 'linear' or 'radial'
|
||||
— optional, default: <tt>'linear'</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== properties ========================= -->
|
||||
<div class="reference-members"><h2>Operators</h2>
|
||||
|
||||
<div id="equals-member" class="member">
|
||||
<div id="equals-link" class="member-link">
|
||||
<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Gradient</tt></tt></a>
|
||||
</div>
|
||||
<div id="equals-description" class="member-description hidden">
|
||||
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Gradient</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Checks whether the gradient is equal to the supplied gradient.</p>
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> they are equal, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="stops-member" class="member">
|
||||
<div id="stops-link" class="member-link">
|
||||
<a name="stops" href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
|
||||
</div>
|
||||
<div id="stops-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('stops', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The gradient stops on the gradient ramp.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt> — a copy of the gradient
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
465
dist/docs/classes/GradientColor.html
vendored
465
dist/docs/classes/GradientColor.html
vendored
|
|
@ -1,465 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GradientColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>GradientColor</h1>
|
||||
|
||||
<p>The GradientColor object.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="gradientcolor-gradient-origin-destination-member" class="member">
|
||||
<div id="gradientcolor-gradient-origin-destination-link" class="member-link">
|
||||
<a name="gradientcolor-gradient-origin-destination" href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
|
||||
</div>
|
||||
<div id="gradientcolor-gradient-origin-destination-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientcolor-gradient-origin-destination', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a gradient color object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>gradient:</tt>
|
||||
<a href="../classes/Gradient.html"><tt>Gradient</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>origin:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>destination:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>hilite:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Applying a linear gradient color containing evenly distributed color stops:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Define two points which we will be using to construct
|
||||
// the path and to position the gradient color:
|
||||
var topLeft = view.center - [80, 80];
|
||||
var bottomRight = view.center + [80, 80];
|
||||
|
||||
// Create a rectangle shaped path between
|
||||
// the topLeft and bottomRight points:
|
||||
var path = new Path.Rectangle(topLeft, bottomRight);
|
||||
|
||||
// Create the gradient, passing it an array of colors to be converted
|
||||
// to evenly distributed color stops:
|
||||
var gradient = new Gradient(['yellow', 'red', 'blue']);
|
||||
|
||||
// Have the gradient color run between the topLeft and
|
||||
// bottomRight points we defined earlier:
|
||||
var gradientColor = new GradientColor(gradient, topLeft, bottomRight);
|
||||
|
||||
// Set the fill color of the path to the gradient color:
|
||||
path.fillColor = gradientColor;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Applying a radial gradient color containing unevenly distributed color stops:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at the center of the view
|
||||
// with a radius of 80:
|
||||
var path = new Path.Circle(view.center, 80);
|
||||
|
||||
// The stops array: yellow mixes with red between 0 and 15%,
|
||||
// 15% to 30% is pure red, red mixes with black between 30% to 100%:
|
||||
var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
|
||||
|
||||
// Create a radial gradient using the color stops array:
|
||||
var gradient = new Gradient(stops, 'radial');
|
||||
|
||||
// We will use the center point of the circle shaped path as
|
||||
// the origin point for our gradient color
|
||||
var from = path.position;
|
||||
|
||||
// The destination point of the gradient color will be the
|
||||
// center point of the path + 80pt in horizontal direction:
|
||||
var to = path.position + [80, 0];
|
||||
|
||||
// Create the gradient color:
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
|
||||
// Set the fill color of the path to the gradient color:
|
||||
path.fillColor = gradientColor;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="origin-member" class="member">
|
||||
<div id="origin-link" class="member-link">
|
||||
<a name="origin" href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
|
||||
</div>
|
||||
<div id="origin-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('origin', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The origin point of the gradient.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Move the origin point of the gradient, by moving your mouse over the view below:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// Create a rectangle shaped path with the same dimensions as
|
||||
// that of the view and fill it with a gradient color:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
var gradient = new Gradient(['yellow', 'red', 'blue']);
|
||||
|
||||
// Have the gradient color run from the top left point of the view,
|
||||
// to the bottom right point of the view:
|
||||
var from = view.bounds.topLeft;
|
||||
var to = view.bounds.bottomRight;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
function onMouseMove(event) {
|
||||
// Set the origin point of the path's gradient color
|
||||
// to the position of the mouse:
|
||||
path.fillColor.origin = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="destination-member" class="member">
|
||||
<div id="destination-link" class="member-link">
|
||||
<a name="destination" href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
|
||||
</div>
|
||||
<div id="destination-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('destination', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The destination point of the gradient.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Move the destination point of the gradient, by moving your mouse over the view below:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// using 40% of the height of the view as its radius
|
||||
// and fill it with a radial gradient color:
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
|
||||
var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
|
||||
var from = view.center;
|
||||
var to = view.bounds.bottomRight;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
function onMouseMove(event) {
|
||||
// Set the origin point of the path's gradient color
|
||||
// to the position of the mouse:
|
||||
path.fillColor.destination = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hilite-member" class="member">
|
||||
<div id="hilite-link" class="member-link">
|
||||
<a name="hilite" href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
|
||||
</div>
|
||||
<div id="hilite-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hilite', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hilite point of the gradient.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Move the hilite point of the gradient, by moving your mouse over the view below:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// using 40% of the height of the view as its radius
|
||||
// and fill it with a radial gradient color:
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
|
||||
var from = path.position;
|
||||
var to = path.bounds.rightCenter;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
function onMouseMove(event) {
|
||||
// Set the origin hilite of the path's gradient color
|
||||
// to the position of the mouse:
|
||||
path.fillColor.hilite = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt> — a copy of the gradient color
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the gradient color has the same properties as that of the
|
||||
supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/GradientColor.html"><tt>GradientColor</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt></tt> — <tt>true</tt> the GradientColor is the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="transform-matrix-member" class="member">
|
||||
<div id="transform-matrix-link" class="member-link">
|
||||
<a name="transform-matrix" href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
|
||||
</div>
|
||||
<div id="transform-matrix-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Transform the gradient color by the specified matrix.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>matrix:</tt>
|
||||
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
||||
— the matrix to transform the gradient color by
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
258
dist/docs/classes/GradientStop.html
vendored
258
dist/docs/classes/GradientStop.html
vendored
|
|
@ -1,258 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GradientStop</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>GradientStop</h1>
|
||||
|
||||
<p>The GradientStop object.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="gradientstop-member" class="member">
|
||||
<div id="gradientstop-link" class="member-link">
|
||||
<a name="gradientstop" href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
|
||||
</div>
|
||||
<div id="gradientstop-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientstop', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a GradientStop object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color of the stop
|
||||
— optional, default: <tt>new RgbColor(0, 0, 0)</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>rampPoint:</tt>
|
||||
<tt>Number</tt>
|
||||
— the position of the stop on the gradient
|
||||
ramp {@default 0}
|
||||
— optional, default: <tt>0</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="ramppoint-member" class="member">
|
||||
<div id="ramppoint-link" class="member-link">
|
||||
<a name="ramppoint" href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
|
||||
</div>
|
||||
<div id="ramppoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ramppoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The ramp-point of the gradient stop as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Animating a gradient's ramp points:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// using 40% of the height of the view as its radius
|
||||
// and fill it with a radial gradient color:
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
|
||||
// Prepare the gradient color and apply it to the path:
|
||||
var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
|
||||
var gradient = new Gradient(colors, 'radial');
|
||||
var from = path.position;
|
||||
var to = path.bounds.rightCenter;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
// This function is called each frame of the animation:
|
||||
function onFrame(event) {
|
||||
var blackStop = gradient.stops[2];
|
||||
// Animate the rampPoint between 0.7 and 0.9:
|
||||
blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
|
||||
|
||||
// Animate the rampPoint between 0.2 and 0.4
|
||||
var redStop = gradient.stops[1];
|
||||
redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="color-member" class="member">
|
||||
<div id="color-link" class="member-link">
|
||||
<a name="color" href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
|
||||
</div>
|
||||
<div id="color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the gradient stop.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Animating a gradient's ramp points:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at the center of the view,
|
||||
// using 40% of the height of the view as its radius
|
||||
// and fill it with a radial gradient color:
|
||||
var path = new Path.Circle(view.center, view.bounds.height * 0.4);
|
||||
|
||||
// Create a radial gradient that mixes red and black evenly:
|
||||
var gradient = new Gradient(['red', 'black'], 'radial');
|
||||
|
||||
// Fill the path with a gradient color that runs from its center,
|
||||
// to the right center of its bounding rectangle:
|
||||
var from = path.position;
|
||||
var to = path.bounds.rightCenter;
|
||||
var gradientColor = new GradientColor(gradient, from, to);
|
||||
path.fillColor = gradientColor;
|
||||
|
||||
// This function is called each frame of the animation:
|
||||
function onFrame(event) {
|
||||
// Change the hue of the first stop's color:
|
||||
gradient.stops[0].color.hue += 1;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt> — a copy of the gradient-stop
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
749
dist/docs/classes/GrayColor.html
vendored
749
dist/docs/classes/GrayColor.html
vendored
|
|
@ -1,749 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>GrayColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>GrayColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>A GrayColor object is used to represent any gray color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="graycolor-gray-member" class="member">
|
||||
<div id="graycolor-gray-link" class="member-link">
|
||||
<a name="graycolor-gray" href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="graycolor-gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('graycolor-gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a GrayColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>gray:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of gray in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating a GrayColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Create a GrayColor with 50% gray:
|
||||
circle.fillColor = new GrayColor(0.5);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSB Components</h3>
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
3587
dist/docs/classes/Group.html
vendored
3587
dist/docs/classes/Group.html
vendored
File diff suppressed because it is too large
Load diff
242
dist/docs/classes/HitResult.html
vendored
242
dist/docs/classes/HitResult.html
vendored
|
|
@ -1,242 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HitResult</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>HitResult</h1>
|
||||
|
||||
<p>A HitResult object contains information about the results of a hit
|
||||
test. It is returned by <a href="../classes/Item.html#hittest-point"><tt>item.hitTest(point)</tt></a> and
|
||||
<a href="../classes/Project.html#hittest-point"><tt>project.hitTest(point)</tt></a>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Describes the type of the hit result. For example, if you hit a segment
|
||||
point, the type would be 'segment'.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('segment', 'handle-in', 'handle-out', 'stroke', 'fill',
|
||||
'bounds', 'center')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="name-member" class="member">
|
||||
<div id="name-link" class="member-link">
|
||||
<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
|
||||
</div>
|
||||
<div id="name-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a <a href="../classes/HitResult.html#type"><tt>hitResult.type</tt></a> of 'bounds', this property
|
||||
describes which corner of the bounding rectangle was hit.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('top-left', 'top-right', 'bottom-left', 'bottom-right',
|
||||
'left-center', 'top-center', 'right-center', 'bottom-center')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="item-member" class="member">
|
||||
<div id="item-link" class="member-link">
|
||||
<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
<div id="item-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The item that was hit.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="location-member" class="member">
|
||||
<div id="location-link" class="member-link">
|
||||
<a name="location" href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
|
||||
</div>
|
||||
<div id="location-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('location', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a type of 'stroke', this property gives more
|
||||
information about the exact position that was hit on the path.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="segment-member" class="member">
|
||||
<div id="segment-link" class="member-link">
|
||||
<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
<div id="segment-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>If the HitResult has a type of 'stroke', 'segment', 'handle-in' or
|
||||
'handle-out', this property refers to the Segment that was hit or that
|
||||
is closest to the hitResult.location on the curve.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hit point.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
766
dist/docs/classes/HsbColor.html
vendored
766
dist/docs/classes/HsbColor.html
vendored
|
|
@ -1,766 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HsbColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>HsbColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>An HsbColor object is used to represent any HSB color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="hsbcolor-hue-saturation-brightness-member" class="member">
|
||||
<div id="hsbcolor-hue-saturation-brightness-link" class="member-link">
|
||||
<a name="hsbcolor-hue-saturation-brightness" href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="hsbcolor-hue-saturation-brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hsbcolor-hue-saturation-brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates an HsbColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>hue:</tt>
|
||||
<tt>Number</tt>
|
||||
— the hue of the color as a value in degrees between
|
||||
<tt>0</tt> and <tt>360</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>saturation:</tt>
|
||||
<tt>Number</tt>
|
||||
— the saturation of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>brightness:</tt>
|
||||
<tt>Number</tt>
|
||||
— the brightness of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an HsbColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Create an HsbColor with a hue of 90 degrees, a saturation
|
||||
// 100% and a brightness of 100%:
|
||||
circle.fillColor = new HsbColor(90, 1, 1);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
730
dist/docs/classes/HslColor.html
vendored
730
dist/docs/classes/HslColor.html
vendored
|
|
@ -1,730 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HslColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>HslColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>An HslColor object is used to represent any HSL color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="hslcolor-hue-saturation-lightness-member" class="member">
|
||||
<div id="hslcolor-hue-saturation-lightness-link" class="member-link">
|
||||
<a name="hslcolor-hue-saturation-lightness" href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="hslcolor-hue-saturation-lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hslcolor-hue-saturation-lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates an HslColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>hue:</tt>
|
||||
<tt>Number</tt>
|
||||
— the hue of the color as a value in degrees between
|
||||
<tt>0</tt> and <tt>360</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>saturation:</tt>
|
||||
<tt>Number</tt>
|
||||
— the saturation of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>lightness:</tt>
|
||||
<tt>Number</tt>
|
||||
— the lightness of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an HslColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Create an HslColor with a hue of 90 degrees, a saturation
|
||||
// 100% and a lightness of 50%:
|
||||
circle.fillColor = new HslColor(90, 1, 0.5);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>RGB Components</h3>
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
3289
dist/docs/classes/Item.html
vendored
3289
dist/docs/classes/Item.html
vendored
File diff suppressed because it is too large
Load diff
100
dist/docs/classes/Key.html
vendored
100
dist/docs/classes/Key.html
vendored
|
|
@ -1,100 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Key</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Key</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="isdown-key-member" class="member">
|
||||
<div id="isdown-key-link" class="member-link">
|
||||
<a name="isdown-key" href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
|
||||
</div>
|
||||
<div id="isdown-key-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdown-key', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks whether the specified key is pressed.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>key:</tt>
|
||||
<tt>String</tt>
|
||||
— One of: 'backspace', 'enter', 'shift', 'control',
|
||||
'option', 'pause', 'caps-lock', 'escape', 'space', 'end', 'home',
|
||||
'left', 'up', 'right', 'down', 'delete', 'command'
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the key is pressed, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Whenever the user clicks, create a circle shaped path. If the 'a' key is pressed, fill it with red, otherwise fill it with blue:
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">function onMouseDown(event) {
|
||||
var path = new Path.Circle(event.point, 10);
|
||||
if(Key.isDown('a')) {
|
||||
path.fillColor = 'red';
|
||||
} else {
|
||||
path.fillColor = 'blue';
|
||||
}
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
220
dist/docs/classes/KeyEvent.html
vendored
220
dist/docs/classes/KeyEvent.html
vendored
|
|
@ -1,220 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>KeyEvent</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>KeyEvent</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
|
||||
|
||||
<p>KeyEvent The KeyEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>'s
|
||||
keyboard handlers <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a>,
|
||||
The KeyEvent object is the only parameter passed to these functions
|
||||
and contains information about the keyboard event.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The type of key event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('keydown', 'keyup')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="character-member" class="member">
|
||||
<div id="character-link" class="member-link">
|
||||
<a name="character" href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
|
||||
</div>
|
||||
<div id="character-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('character', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The string character of the key that caused this key event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="key-member" class="member">
|
||||
<div id="key-link" class="member-link">
|
||||
<a name="key" href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
|
||||
</div>
|
||||
<div id="key-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('key', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The key that caused this key event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the key event.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="modifiers-member" class="member">
|
||||
<div id="modifiers-link" class="member-link">
|
||||
<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div id="modifiers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
3588
dist/docs/classes/Layer.html
vendored
3588
dist/docs/classes/Layer.html
vendored
File diff suppressed because it is too large
Load diff
329
dist/docs/classes/Line.html
vendored
329
dist/docs/classes/Line.html
vendored
|
|
@ -1,329 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Line</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Line</h1>
|
||||
|
||||
<p>The Line object represents..</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="line-point1-point2-member" class="member">
|
||||
<div id="line-point1-point2-link" class="member-link">
|
||||
<a name="line-point1-point2" href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
|
||||
</div>
|
||||
<div id="line-point1-point2-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('line-point1-point2', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a Line object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point1:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>point2:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>infinite:</tt>
|
||||
<tt>Boolean</tt>
|
||||
|
||||
— optional, default: <tt>true</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The starting point of the line</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="vector-member" class="member">
|
||||
<div id="vector-link" class="member-link">
|
||||
<a name="vector" href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
|
||||
</div>
|
||||
<div id="vector-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('vector', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The vector of the line</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="infinite-member" class="member">
|
||||
<div id="infinite-link" class="member-link">
|
||||
<a name="infinite" href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
|
||||
</div>
|
||||
<div id="infinite-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('infinite', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the line extends infinitely</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="intersect-line-member" class="member">
|
||||
<div id="intersect-line-link" class="member-link">
|
||||
<a name="intersect-line" href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
|
||||
</div>
|
||||
<div id="intersect-line-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersect-line', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>line:</tt>
|
||||
<a href="../classes/Line.html"><tt>Line</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the intersection point of the lines
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getside-point-member" class="member">
|
||||
<div id="getside-point-link" class="member-link">
|
||||
<a name="getside-point" href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="getside-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getside-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getdistance-point-member" class="member">
|
||||
<div id="getdistance-point-link" class="member-link">
|
||||
<a name="getdistance-point" href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="getdistance-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdistance-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Number</tt></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
1824
dist/docs/classes/Matrix.html
vendored
1824
dist/docs/classes/Matrix.html
vendored
File diff suppressed because it is too large
Load diff
475
dist/docs/classes/PaperScope.html
vendored
475
dist/docs/classes/PaperScope.html
vendored
|
|
@ -1,475 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PaperScope</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PaperScope</h1>
|
||||
|
||||
<p>The <tt>PaperScope</tt> class represents the scope associated with a
|
||||
Paper context. When working with PaperScript, these scopes are automatically
|
||||
created for us, and through clever scoping the properties and methods of the
|
||||
active scope seem to become part of the global scope.</p>
|
||||
<p>When working with normal JavaScript code, <tt>PaperScope</tt> objects need to
|
||||
be manually created and handled.</p>
|
||||
<p>Paper classes can only be accessed through <tt>PaperScope</tt> objects. Thus
|
||||
in PaperScript they are global, while in JavaScript, they are available on
|
||||
the global <a href="../classes/global.html#paper"><tt>paper</tt></a> object. For JavaScript you can use
|
||||
<a href="../classes/PaperScope.html#install-scope"><tt>paperScope.install(scope)</tt></a> to install the Paper classes and objects
|
||||
on the global scope. Note that when working with more than one scope, this
|
||||
still works for classes, but not for objects like <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a>,
|
||||
since they are not updated in the injected scope if scopes are switched.</p>
|
||||
<p>The global <a href="../classes/global.html#paper"><tt>paper</tt></a> object is simply a reference to the currently active
|
||||
<tt>PaperScope</tt>.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="paperscope-member" class="member">
|
||||
<div id="paperscope-link" class="member-link">
|
||||
<a name="paperscope" href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
|
||||
</div>
|
||||
<div id="paperscope-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paperscope', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a PaperScope object.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="version-member" class="member">
|
||||
<div id="version-link" class="member-link">
|
||||
<a name="version" href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
|
||||
</div>
|
||||
<div id="version-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('version', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The version of Paper.js, as a float number.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The currently active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="projects-member" class="member">
|
||||
<div id="projects-link" class="member-link">
|
||||
<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
<div id="projects-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of all open projects within the current Paper.js context.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="view-member" class="member">
|
||||
<div id="view-link" class="member-link">
|
||||
<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
<div id="view-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The active view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="views-member" class="member">
|
||||
<div id="views-link" class="member-link">
|
||||
<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
<div id="views-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/View.html"><tt>View</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tool-member" class="member">
|
||||
<div id="tool-link" class="member-link">
|
||||
<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
<div id="tool-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the active tool.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tools-member" class="member">
|
||||
<div id="tools-link" class="member-link">
|
||||
<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
<div id="tools-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of available tools.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="install-scope-member" class="member">
|
||||
<div id="install-scope-link" class="member-link">
|
||||
<a name="install-scope" href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
|
||||
</div>
|
||||
<div id="install-scope-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('install-scope', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Injects the paper scope into any other given scope. Can be used for
|
||||
examle to inject the currently active PaperScope into the window's global
|
||||
scope, to emulate PaperScript-style globally accessible Paper classes and
|
||||
objects:</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">paper.install(window);</pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="setup-canvas-member" class="member">
|
||||
<div id="setup-canvas-link" class="member-link">
|
||||
<a name="setup-canvas" href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
|
||||
</div>
|
||||
<div id="setup-canvas-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setup-canvas', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Sets up an empty project for us. If a canvas is provided, it also creates
|
||||
a <a href="../classes/View.html"><tt>View</tt></a> for it, both linked to this scope.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>canvas:</tt>
|
||||
<tt>HTMLCanvasElement</tt>
|
||||
— The canvas this scope should be
|
||||
associated with.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="get-id-member" class="member">
|
||||
<div id="get-id-link" class="member-link">
|
||||
<a name="get-id" href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
|
||||
</div>
|
||||
<div id="get-id-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('get-id', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Retrieves a PaperScope object with the given id or associated with
|
||||
the passed canvas element.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>id:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="each-iter-member" class="member">
|
||||
<div id="each-iter-link" class="member-link">
|
||||
<a name="each-iter" href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
|
||||
</div>
|
||||
<div id="each-iter-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('each-iter', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Iterates over all active scopes and calls the passed iterator
|
||||
function for each of them.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>iter:</tt>
|
||||
|
||||
— the iterator function.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
137
dist/docs/classes/PaperScript.html
vendored
137
dist/docs/classes/PaperScript.html
vendored
|
|
@ -1,137 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PaperScript</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PaperScript</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Static Methods</h2>
|
||||
|
||||
|
||||
<div id="compile-code-member" class="member">
|
||||
<div id="compile-code-link" class="member-link">
|
||||
<a name="compile-code" href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
|
||||
</div>
|
||||
<div id="compile-code-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('compile-code', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Compiles PaperScript code into JavaScript code.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— The PaperScript code.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — The compiled PaperScript as JavaScript code.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="evaluate-code-scope-member" class="member">
|
||||
<div id="evaluate-code-scope-link" class="member-link">
|
||||
<a name="evaluate-code-scope" href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
|
||||
</div>
|
||||
<div id="evaluate-code-scope-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('evaluate-code-scope', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Evaluates parsed PaperScript code in the passed <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
||||
object. It also installs handlers automatically for us.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>code:</tt>
|
||||
<tt>String</tt>
|
||||
— The PaperScript code.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
<a href="../classes/PaperScript.html"><tt>PaperScript</tt></a>
|
||||
— The scope in which the code is executed.
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Object</tt></tt> — The result of the code evaluation.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
92
dist/docs/classes/ParagraphStyle.html
vendored
92
dist/docs/classes/ParagraphStyle.html
vendored
|
|
@ -1,92 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ParagraphStyle</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>ParagraphStyle</h1>
|
||||
|
||||
<p>The ParagraphStyle object represents the paragraph style of a text
|
||||
item (<a href="../classes/TextItem.html#paragraphstyle"><tt>textItem.paragraphStyle</tt></a>).</p>
|
||||
<p>Currently, the ParagraphStyle object may seem a bit empty, with just the
|
||||
<a href="../classes/ParagraphStyle.html#justification" onclick="return toggleMember('justification', true);"><tt>justification</tt></a> property. Yet, we have lots in store for Paper.js
|
||||
when it comes to typography. Please stay tuned.</p>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var text = new PointText(new Point(0,0));
|
||||
text.fillColor = 'black';
|
||||
text.content = 'Hello world.';
|
||||
text.paragraphStyle.justification = 'center';</pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="justification-member" class="member">
|
||||
<div id="justification-link" class="member-link">
|
||||
<a name="justification" href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
|
||||
</div>
|
||||
<div id="justification-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('justification', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The justification of the paragraph.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'left'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('left', 'right', 'center')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
6698
dist/docs/classes/Path.html
vendored
6698
dist/docs/classes/Path.html
vendored
File diff suppressed because it is too large
Load diff
4279
dist/docs/classes/PathItem.html
vendored
4279
dist/docs/classes/PathItem.html
vendored
File diff suppressed because it is too large
Load diff
497
dist/docs/classes/PathStyle.html
vendored
497
dist/docs/classes/PathStyle.html
vendored
|
|
@ -1,497 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PathStyle</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>PathStyle</h1>
|
||||
|
||||
<p>PathStyle is used for changing the visual styles of items
|
||||
contained within a Paper.js project and is returned by
|
||||
<a href="../classes/Item.html#style"><tt>item.style</tt></a> and <a href="../classes/Project.html#currentstyle"><tt>project.currentStyle</tt></a>.</p>
|
||||
<p>All properties of PathStyle are also reflected directly in <a href="../classes/Item.html"><tt>Item</tt></a>,
|
||||
i.e.: <a href="../classes/Item.html#fillcolor"><tt>item.fillColor</tt></a>.</p>
|
||||
<p>To set multiple style properties in one go, you can pass an object to
|
||||
<a href="../classes/Item.html#style"><tt>item.style</tt></a>. This is a convenient way to define a style once and
|
||||
apply it to a series of items:</p>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var circleStyle = {
|
||||
fillColor: new RgbColor(1, 0, 0),
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5
|
||||
};
|
||||
|
||||
var path = new Path.Circle(new Point(80, 50), 30);
|
||||
path.style = circleStyle;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<h3>Stroke Style</h3>
|
||||
|
||||
<div id="strokecolor-member" class="member">
|
||||
<div id="strokecolor-link" class="member-link">
|
||||
<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the stroke color of a path:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to RGB red:
|
||||
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokewidth-member" class="member">
|
||||
<div id="strokewidth-link" class="member-link">
|
||||
<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
<div id="strokewidth-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The width of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>1</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting an item's stroke width:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set its stroke color to black:
|
||||
circle.strokeColor = 'black';
|
||||
|
||||
// Set its stroke width to 10:
|
||||
circle.strokeWidth = 10;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokecap-member" class="member">
|
||||
<div id="strokecap-link" class="member-link">
|
||||
<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
<div id="strokecap-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
|
||||
have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'butt'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('round', 'square', 'butt')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke caps:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var line = new Path(new Point(80, 50), new Point(420, 50));
|
||||
line.strokeColor = 'black';
|
||||
line.strokeWidth = 20;
|
||||
|
||||
// Select the path, so we can see where the stroke is formed:
|
||||
line.selected = true;
|
||||
|
||||
// Set the stroke cap of the line to be round:
|
||||
line.strokeCap = 'round';
|
||||
|
||||
// Copy the path and set its stroke cap to be square:
|
||||
var line2 = line.clone();
|
||||
line2.position.y += 50;
|
||||
line2.strokeCap = 'square';
|
||||
|
||||
// Make another copy and set its stroke cap to be butt:
|
||||
var line2 = line.clone();
|
||||
line2.position.y += 100;
|
||||
line2.strokeCap = 'butt';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="200" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="strokejoin-member" class="member">
|
||||
<div id="strokejoin-link" class="member-link">
|
||||
<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
<div id="strokejoin-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The shape to be used at the corners of paths when they have a stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>'miter'</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String</tt> ('miter', 'round', 'bevel')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A look at the different stroke joins:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var path = new Path();
|
||||
path.add(new Point(80, 100));
|
||||
path.add(new Point(120, 40));
|
||||
path.add(new Point(160, 100));
|
||||
path.strokeColor = 'black';
|
||||
path.strokeWidth = 20;
|
||||
|
||||
// Select the path, so we can see where the stroke is formed:
|
||||
path.selected = true;
|
||||
|
||||
var path2 = path.clone();
|
||||
path2.position.x += path2.bounds.width * 1.5;
|
||||
path2.strokeJoin = 'round';
|
||||
|
||||
var path3 = path2.clone();
|
||||
path3.position.x += path3.bounds.width * 1.5;
|
||||
path3.strokeJoin = 'bevel';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="120" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dashoffset-member" class="member">
|
||||
<div id="dashoffset-link" class="member-link">
|
||||
<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
<div id="dashoffset-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The dash offset of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>0</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dasharray-member" class="member">
|
||||
<div id="dasharray-link" class="member-link">
|
||||
<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
<div id="dasharray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>[]</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Array</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var path = new Path.Circle(new Point(80, 50), 40);
|
||||
path.strokeWidth = 2;
|
||||
path.strokeColor = 'black';
|
||||
|
||||
// Set the dashed stroke to [10pt dash, 4pt gap]:
|
||||
path.dashArray = [10, 4];
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="miterlimit-member" class="member">
|
||||
<div id="miterlimit-link" class="member-link">
|
||||
<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
<div id="miterlimit-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The miter limit of the stroke.</p>
|
||||
<p>When two line segments meet at a sharp angle and miter joins have been
|
||||
specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
|
||||
far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
|
||||
limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Default:</b>
|
||||
<li>
|
||||
<tt>10</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Fill Style</h3>
|
||||
|
||||
<div id="fillcolor-member" class="member">
|
||||
<div id="fillcolor-link" class="member-link">
|
||||
<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
<div id="fillcolor-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fill color.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Setting the fill color of a path to red:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
// Create a circle shaped path at { x: 80, y: 50 }
|
||||
// with a radius of 35:
|
||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||
|
||||
// Set the fill color of the circle to RGB red:
|
||||
circle.fillColor = new RgbColor(1, 0, 0);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
3493
dist/docs/classes/PlacedItem.html
vendored
3493
dist/docs/classes/PlacedItem.html
vendored
File diff suppressed because it is too large
Load diff
3620
dist/docs/classes/PlacedSymbol.html
vendored
3620
dist/docs/classes/PlacedSymbol.html
vendored
File diff suppressed because it is too large
Load diff
2196
dist/docs/classes/Point.html
vendored
2196
dist/docs/classes/Point.html
vendored
File diff suppressed because it is too large
Load diff
3688
dist/docs/classes/PointText.html
vendored
3688
dist/docs/classes/PointText.html
vendored
File diff suppressed because it is too large
Load diff
567
dist/docs/classes/Project.html
vendored
567
dist/docs/classes/Project.html
vendored
|
|
@ -1,567 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Project</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Project</h1>
|
||||
|
||||
<p>A Project object in Paper.js is what usually is referred to as the
|
||||
document: The top level object that holds all the items contained in the
|
||||
scene graph. As the term document is already taken in the browser context,
|
||||
it is called Project.</p>
|
||||
<p>Projects allow the manipluation of the styles that are applied to all newly
|
||||
created items, give access to the selected items, and will in future versions
|
||||
offer ways to query for items in the scene graph defining specific
|
||||
requirements, and means to persist and load from different formats, such as
|
||||
SVG and PDF.</p>
|
||||
<p>The currently active project can be accessed through the
|
||||
<a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
|
||||
<p>An array of all open projects is accessible through the
|
||||
<a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a Paper.js project.</p>
|
||||
<p>When working with PaperScript, a project is automatically created for us
|
||||
and the <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="currentstyle-member" class="member">
|
||||
<div id="currentstyle-link" class="member-link">
|
||||
<a name="currentstyle" href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
|
||||
</div>
|
||||
<div id="currentstyle-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('currentstyle', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The currently active path style. All selected items and newly
|
||||
created items will be styled with this style.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
project.currentStyle = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5
|
||||
}
|
||||
|
||||
// The following paths will take over all style properties of
|
||||
// the current style:
|
||||
var path = new Path.Circle(new Point(75, 50), 30);
|
||||
var path2 = new Path.Circle(new Point(175, 50), 20);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
project.currentStyle.fillColor = 'red';
|
||||
|
||||
// The following path will take over the fill color we just set:
|
||||
var path = new Path.Circle(new Point(75, 50), 30);
|
||||
var path2 = new Path.Circle(new Point(175, 50), 20);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the project in the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selecteditems-member" class="member">
|
||||
<div id="selecteditems-link" class="member-link">
|
||||
<a name="selecteditems" href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
|
||||
</div>
|
||||
<div id="selecteditems-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selecteditems', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The selected items contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Project Hierarchy</h3>
|
||||
|
||||
<div id="layers-member" class="member">
|
||||
<div id="layers-link" class="member-link">
|
||||
<a name="layers" href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
|
||||
</div>
|
||||
<div id="layers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The layers contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Layer.html"><tt>Layer</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="activelayer-member" class="member">
|
||||
<div id="activelayer-link" class="member-link">
|
||||
<a name="activelayer" href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
|
||||
</div>
|
||||
<div id="activelayer-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activelayer', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The layer which is currently active. New items will be created on this
|
||||
layer by default.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Layer.html"><tt>Layer</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="symbols-member" class="member">
|
||||
<div id="symbols-link" class="member-link">
|
||||
<a name="symbols" href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
|
||||
</div>
|
||||
<div id="symbols-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbols', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The symbols contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Symbol.html"><tt>Symbol</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="views-member" class="member">
|
||||
<div id="views-link" class="member-link">
|
||||
<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
<div id="views-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The views contained within the project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/View.html"><tt>View</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="activeview-member" class="member">
|
||||
<div id="activeview-link" class="member-link">
|
||||
<a name="activeview" href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
|
||||
</div>
|
||||
<div id="activeview-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activeview', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The view which is currently active.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="activate-member" class="member">
|
||||
<div id="activate-link" class="member-link">
|
||||
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div id="activate-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Activates this project, so all newly created items will be placed
|
||||
in it.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Removes this project from the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selectall-member" class="member">
|
||||
<div id="selectall-link" class="member-link">
|
||||
<a name="selectall" href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
|
||||
</div>
|
||||
<div id="selectall-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selectall', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Selects all items in the project.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="deselectall-member" class="member">
|
||||
<div id="deselectall-link" class="member-link">
|
||||
<a name="deselectall" href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
|
||||
</div>
|
||||
<div id="deselectall-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('deselectall', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Deselects all selected items in the project.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hittest-point-member" class="member">
|
||||
<div id="hittest-point-link" class="member-link">
|
||||
<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
|
||||
</div>
|
||||
<div id="hittest-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Perform a hit test on the items contained within the project at the
|
||||
location of the specified point.</p>
|
||||
<p>The optional options object allows you to control the specifics of the
|
||||
hit test and may contain a combination of the following values:</p>
|
||||
<p><b>options.tolerance:</b> <tt>Number</tt> - The tolerance of the hit test
|
||||
in points.</p>
|
||||
<p><b>options.type:</b> Only hit test again a certain item
|
||||
type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
|
||||
<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
|
||||
<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
|
||||
items, taking into account stroke width.</p>
|
||||
<p><b>options.segments:</b> <tt>Boolean</tt> - Hit test for
|
||||
<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
|
||||
<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
|
||||
(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
|
||||
<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
|
||||
last segment points of open path items.</p>
|
||||
<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
|
||||
side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
|
||||
<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
|
||||
<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
|
||||
(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
|
||||
<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
|
||||
<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
|
||||
<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— The point where the hit test should be performed
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>options:</tt>
|
||||
<tt>Object</tt>
|
||||
|
||||
— optional, default: <tt>{ fill: true, stroke: true, segments: true,
|
||||
tolerance: true }</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt> — A hit result object that contains more
|
||||
information about what exactly was hit or <tt>null</tt> if nothing was
|
||||
hit.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
4204
dist/docs/classes/Raster.html
vendored
4204
dist/docs/classes/Raster.html
vendored
File diff suppressed because it is too large
Load diff
1380
dist/docs/classes/Rectangle.html
vendored
1380
dist/docs/classes/Rectangle.html
vendored
File diff suppressed because it is too large
Load diff
765
dist/docs/classes/RgbColor.html
vendored
765
dist/docs/classes/RgbColor.html
vendored
|
|
@ -1,765 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RgbColor</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>RgbColor</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
|
||||
|
||||
<p>An RgbColor object is used to represent any RGB color value.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="rgbcolor-red-green-blue-member" class="member">
|
||||
<div id="rgbcolor-red-green-blue-link" class="member-link">
|
||||
<a name="rgbcolor-red-green-blue" href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
|
||||
</div>
|
||||
<div id="rgbcolor-red-green-blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rgbcolor-red-green-blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates an RgbColor object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>red:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of red in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>green:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of green in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>blue:</tt>
|
||||
<tt>Number</tt>
|
||||
— the amount of blue in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
<tt>Number</tt>
|
||||
— the alpha of the color as a value between
|
||||
<tt>0</tt> and <tt>1</tt>
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an RgbColor:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a circle shaped path at {x: 80, y: 50}
|
||||
// with a radius of 30:
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// 100% red, 0% blue, 50% blue:
|
||||
circle.fillColor = new RgbColor(1, 0, 0.5);
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="red-member" class="member">
|
||||
<div id="red-link" class="member-link">
|
||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
<div id="red-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of red in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'blue';
|
||||
|
||||
// Blue + red = purple:
|
||||
circle.fillColor.red = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="green-member" class="member">
|
||||
<div id="green-link" class="member-link">
|
||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
<div id="green-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of green in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + green = yellow:
|
||||
circle.fillColor.green = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blue-member" class="member">
|
||||
<div id="blue-link" class="member-link">
|
||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
<div id="blue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the amount of blue in a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// First we set the fill color to red:
|
||||
circle.fillColor = 'red';
|
||||
|
||||
// Red + blue = purple:
|
||||
circle.fillColor.blue = 1;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Returns the type of the color as a string.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('rgb', 'hsb', 'gray')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var color = new RgbColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="alpha-member" class="member">
|
||||
<div id="alpha-link" class="member-link">
|
||||
<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
<div id="alpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
|
||||
colors of the different subclasses support alpha values.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — A filled path with a half transparent stroke:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
|
||||
// Fill the circle with red and give it a 20pt green stroke:
|
||||
circle.style = {
|
||||
fillColor: 'red',
|
||||
strokeColor: 'green',
|
||||
strokeWidth: 20
|
||||
};
|
||||
|
||||
// Make the stroke half transparent:
|
||||
circle.strokeColor.alpha = 0.5;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Gray Components</h3>
|
||||
|
||||
<div id="gray-member" class="member">
|
||||
<div id="gray-link" class="member-link">
|
||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
<div id="gray-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
||||
<tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSB Components</h3>
|
||||
|
||||
<div id="hue-member" class="member">
|
||||
<div id="hue-link" class="member-link">
|
||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
<div id="hue-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
||||
<tt>360</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Changing the hue of a color:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-5">
|
||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||
circle.fillColor = 'red';
|
||||
circle.fillColor.hue += 30;
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-6">
|
||||
// Create a rectangle shaped path, using the dimensions
|
||||
// of the view:
|
||||
var path = new Path.Rectangle(view.bounds);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onFrame(event) {
|
||||
path.fillColor.hue += 0.5;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="saturation-member" class="member">
|
||||
<div id="saturation-link" class="member-link">
|
||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
<div id="saturation-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brightness-member" class="member">
|
||||
<div id="brightness-link" class="member-link">
|
||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
<div id="brightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>HSL Components</h3>
|
||||
|
||||
<div id="lightness-member" class="member">
|
||||
<div id="lightness-link" class="member-link">
|
||||
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
<div id="lightness-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="hasalpha-member" class="member">
|
||||
<div id="hasalpha-link" class="member-link">
|
||||
<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
<div id="hasalpha-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the color has an alpha value.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="equals-color-member" class="member">
|
||||
<div id="equals-color-link" class="member-link">
|
||||
<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
<div id="equals-color-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks if the component color values of the color are the
|
||||
same as those of the supplied one.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>color:</tt>
|
||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||
— the color to compare with
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>String Representations</h3>
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tocssstring-member" class="member">
|
||||
<div id="tocssstring-link" class="member-link">
|
||||
<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tocssstring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
544
dist/docs/classes/Segment.html
vendored
544
dist/docs/classes/Segment.html
vendored
|
|
@ -1,544 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Segment</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Segment</h1>
|
||||
|
||||
<p>The Segment object represents the points of a path through which its
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a> objects pass. The segments of a path can be accessed through
|
||||
its <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
|
||||
<p>Each segment consists of an anchor point (<a href="../classes/Segment.html#point"><tt>segment.point</tt></a>) and
|
||||
optionaly an incoming and an outgoing handle (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> and
|
||||
<a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>), describing the tangents of the two <a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
objects that are connected by this segment.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="segment-arg3-arg4-arg5-member" class="member">
|
||||
<div id="segment-arg3-arg4-arg5-link" class="member-link">
|
||||
<a name="segment-arg3-arg4-arg5" href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
|
||||
</div>
|
||||
<div id="segment-arg3-arg4-arg5-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment-arg3-arg4-arg5', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a new Segment object.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the anchor point of the segment
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>handleIn:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the handle point relative to the
|
||||
anchor point of the segment that describes the in tangent of the
|
||||
segment.
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>handleOut:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
— the handle point relative to the
|
||||
anchor point of the segment that describes the out tangent of the
|
||||
segment.
|
||||
— optional, default: <tt>{x: 0, y: 0}</tt>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg3:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg4:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>arg5:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var handleIn = new Point(-80, -100);
|
||||
var handleOut = new Point(80, 100);
|
||||
|
||||
var firstPoint = new Point(100, 50);
|
||||
var firstSegment = new Segment(firstPoint, null, handleOut);
|
||||
|
||||
var secondPoint = new Point(300, 50);
|
||||
var secondSegment = new Segment(secondPoint, handleIn, null);
|
||||
|
||||
var path = new Path(firstSegment, secondSegment);
|
||||
path.strokeColor = 'black';
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The anchor point of the segment.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handlein-member" class="member">
|
||||
<div id="handlein-link" class="member-link">
|
||||
<a name="handlein" href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
|
||||
</div>
|
||||
<div id="handlein-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlein', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point relative to the anchor point of the segment that
|
||||
describes the in tangent of the segment.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="handleout-member" class="member">
|
||||
<div id="handleout-link" class="member-link">
|
||||
<a name="handleout" href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
|
||||
</div>
|
||||
<div id="handleout-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handleout', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The handle point relative to the anchor point of the segment that
|
||||
describes the out tangent of the segment.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="selected-member" class="member">
|
||||
<div id="selected-link" class="member-link">
|
||||
<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
<div id="selected-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Specifies whether the <a href="../classes/Segment.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a> of the segment is selected.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Boolean</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Hierarchy</h3>
|
||||
|
||||
<div id="index-member" class="member">
|
||||
<div id="index-link" class="member-link">
|
||||
<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
<div id="index-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The index of the segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
|
||||
segment belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="path-member" class="member">
|
||||
<div id="path-link" class="member-link">
|
||||
<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
<div id="path-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The path that the segment belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Path.html"><tt>Path</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="curve-member" class="member">
|
||||
<div id="curve-link" class="member-link">
|
||||
<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
<div id="curve-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The curve that the segment belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Curve.html"><tt>Curve</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Sibling Segments</h3>
|
||||
|
||||
<div id="next-member" class="member">
|
||||
<div id="next-link" class="member-link">
|
||||
<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
<div id="next-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The next segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment
|
||||
belongs to. If the segments belongs to a closed path, the first segment
|
||||
is returned for the last segment of the path.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="previous-member" class="member">
|
||||
<div id="previous-link" class="member-link">
|
||||
<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
<div id="previous-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The previous segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
|
||||
segment belongs to. If the segments belongs to a closed path, the last
|
||||
segment is returned for the first segment of the path.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Segment.html"><tt>Segment</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="reverse-member" class="member">
|
||||
<div id="reverse-link" class="member-link">
|
||||
<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
<div id="reverse-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns the reversed the segment, without modifying the segment itself.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt> — the reversed segment
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Removes the segment from the path that it belongs to.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the segment.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
1247
dist/docs/classes/Size.html
vendored
1247
dist/docs/classes/Size.html
vendored
File diff suppressed because it is too large
Load diff
271
dist/docs/classes/Symbol.html
vendored
271
dist/docs/classes/Symbol.html
vendored
|
|
@ -1,271 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Symbol</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Symbol</h1>
|
||||
|
||||
<p>Symbols allow you to place multiple instances of an item in your
|
||||
project. This can save memory, since all instances of a symbol simply refer
|
||||
to the original item and it can speed up moving around complex objects, since
|
||||
internal properties such as segment lists and gradient positions don't need
|
||||
to be updated with every transformation.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="symbol-item-member" class="member">
|
||||
<div id="symbol-item-link" class="member-link">
|
||||
<a name="symbol-item" href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
|
||||
</div>
|
||||
<div id="symbol-item-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbol-item', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a Symbol item.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>item:</tt>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
— the source item which is copied as the definition of
|
||||
the symbol
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Placing 100 instances of a symbol:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
var path = new Path.Star(new Point(0, 0), 6, 5, 13);
|
||||
path.style = {
|
||||
fillColor: 'white',
|
||||
strokeColor: 'black'
|
||||
};
|
||||
|
||||
// Create a symbol from the path:
|
||||
var symbol = new Symbol(path);
|
||||
|
||||
// Remove the path:
|
||||
path.remove();
|
||||
|
||||
// Place 100 instances of the symbol:
|
||||
for (var i = 0; i < 100; i++) {
|
||||
// Place an instance of the symbol in the project:
|
||||
var instance = symbol.place();
|
||||
|
||||
// Move the instance to a random position within the view:
|
||||
instance.position = Point.random() * view.size;
|
||||
|
||||
// Rotate the instance by a random amount between
|
||||
// 0 and 360 degrees:
|
||||
instance.rotate(Math.random() * 360);
|
||||
|
||||
// Scale the instance between 0.25 and 1:
|
||||
instance.scale(0.25 + Math.random() * 0.75);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The project that this symbol belongs to.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="definition-member" class="member">
|
||||
<div id="definition-link" class="member-link">
|
||||
<a name="definition" href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
|
||||
</div>
|
||||
<div id="definition-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('definition', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The symbol definition.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="place-member" class="member">
|
||||
<div id="place-link" class="member-link">
|
||||
<a name="place" href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
|
||||
</div>
|
||||
<div id="place-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('place', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Places in instance of the symbol in the project.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>position:</tt>
|
||||
|
||||
— The position of the placed symbol.
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="clone-member" class="member">
|
||||
<div id="clone-link" class="member-link">
|
||||
<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
<div id="clone-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Returns a copy of the symbol.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
3600
dist/docs/classes/TextItem.html
vendored
3600
dist/docs/classes/TextItem.html
vendored
File diff suppressed because it is too large
Load diff
584
dist/docs/classes/Tool.html
vendored
584
dist/docs/classes/Tool.html
vendored
|
|
@ -1,584 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tool</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Tool</h1>
|
||||
|
||||
<p>The Tool object refers to a script that the user can interact with
|
||||
by using the mouse and keyboard and can be accessed through the global
|
||||
<tt>tool</tt> variable. All its properties are also available in the paper
|
||||
scope.</p>
|
||||
<p>The global <tt>tool</tt> variable only exists in scripts that contain mouse
|
||||
handler functions (<a href="../classes/Tool.html#onmousemove" onclick="return toggleMember('onmousemove', true);"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a>,
|
||||
<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup" onclick="return toggleMember('onmouseup', true);"><tt>onMouseUp</tt></a>) or a keyboard handler
|
||||
function (<a href="../classes/Tool.html#onkeydown" onclick="return toggleMember('onkeydown', true);"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup" onclick="return toggleMember('onkeyup', true);"><tt>onKeyUp</tt></a>).</p>
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">var path;
|
||||
|
||||
// Only execute onMouseDrag when the mouse
|
||||
// has moved at least 10 points:
|
||||
tool.distanceThreshold = 10;
|
||||
|
||||
function onMouseDown(event) {
|
||||
// Create a new path every time the mouse is clicked
|
||||
path = new Path();
|
||||
path.add(event.point);
|
||||
path.strokeColor = 'black';
|
||||
}
|
||||
|
||||
function onMouseDrag(event) {
|
||||
// Add a point to the path every time the mouse is dragged
|
||||
path.add(event.point);
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="eventinterval-member" class="member">
|
||||
<div id="eventinterval-link" class="member-link">
|
||||
<a name="eventinterval" href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
|
||||
</div>
|
||||
<div id="eventinterval-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('eventinterval', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The fixed time delay in milliseconds between each call to the
|
||||
<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event. Setting this to an interval means the
|
||||
<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event is called repeatedly after the initial
|
||||
<a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a> until the user releases the mouse.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="mindistance-member" class="member">
|
||||
<div id="mindistance-link" class="member-link">
|
||||
<a name="mindistance" href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
|
||||
</div>
|
||||
<div id="mindistance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('mindistance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The minimum distance the mouse has to drag before firing the onMouseDrag
|
||||
event, since the last onMouseDrag event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="maxdistance-member" class="member">
|
||||
<div id="maxdistance-link" class="member-link">
|
||||
<a name="maxdistance" href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
|
||||
</div>
|
||||
<div id="maxdistance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('maxdistance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The maximum distance the mouse has to drag before firing the onMouseDrag
|
||||
event, since the last onMouseDrag event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="fixeddistance-member" class="member">
|
||||
<div id="fixeddistance-link" class="member-link">
|
||||
<a name="fixeddistance" href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
|
||||
</div>
|
||||
<div id="fixeddistance-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fixeddistance', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Mouse Event Handlers</h3>
|
||||
|
||||
<div id="onmousedown-member" class="member">
|
||||
<div id="onmousedown-link" class="member-link">
|
||||
<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the mouse button is pushed down. The
|
||||
function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information
|
||||
about the mouse event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating circle shaped paths where the user presses the mouse button:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
function onMouseDown(event) {
|
||||
// Create a new circle shaped path with a radius of 10
|
||||
// at the position of the mouse (event.point):
|
||||
var path = new Path.Circle(event.point, 10);
|
||||
path.fillColor = 'black';
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousedrag-member" class="member">
|
||||
<div id="onmousedrag-link" class="member-link">
|
||||
<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedrag-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the mouse position changes while the mouse
|
||||
is being dragged. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which
|
||||
contains information about the mouse event.</p>
|
||||
<p>This function can also be called periodically while the mouse doesn't
|
||||
move by setting the <a href="../classes/Tool.html#eventinterval" onclick="return toggleMember('eventinterval', true);"><tt>eventInterval</tt></a></p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Draw a line by adding a segment to a path on every mouse drag event:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-1">
|
||||
// Create an empty path:
|
||||
var path = new Path();
|
||||
path.strokeColor = 'black';
|
||||
|
||||
function onMouseDrag(event) {
|
||||
// Add a segment to the path at the position of the mouse:
|
||||
path.add(event.point);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousemove-member" class="member">
|
||||
<div id="onmousemove-link" class="member-link">
|
||||
<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousemove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called the mouse moves within the project view. The
|
||||
function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information
|
||||
about the mouse event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Moving a path to the position of the mouse:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-2">
|
||||
// Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
|
||||
var path = new Path.Circle([0, 0], 10);
|
||||
path.fillColor = 'black';
|
||||
|
||||
function onMouseMove(event) {
|
||||
// Whenever the user moves the mouse, move the path
|
||||
// to that position:
|
||||
path.position = event.point;
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmouseup-member" class="member">
|
||||
<div id="onmouseup-link" class="member-link">
|
||||
<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onmouseup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the mouse button is released. The function
|
||||
receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the
|
||||
mouse event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating circle shaped paths where the user releases the mouse:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-3">
|
||||
function onMouseUp(event) {
|
||||
// Create a new circle shaped path with a radius of 10
|
||||
// at the position of the mouse (event.point):
|
||||
var path = new Path.Circle(event.point, 10);
|
||||
path.fillColor = 'black';
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Keyboard Event Handlers</h3>
|
||||
|
||||
<div id="onkeydown-member" class="member">
|
||||
<div id="onkeydown-link" class="member-link">
|
||||
<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeydown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the user presses a key on the keyboard.</p>
|
||||
<p>The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains
|
||||
information about the keyboard event.</p>
|
||||
<p>If the function returns <tt>false</tt>, the keyboard event will be
|
||||
prevented from bubbling up. This can be used for example to stop the
|
||||
window from scrolling, when you need the user to interact with arrow
|
||||
keys.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Scaling a path whenever the user presses the space bar:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-4">
|
||||
// Create a circle shaped path:
|
||||
var path = new Path.Circle(new Point(50, 50), 30);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onKeyDown(event) {
|
||||
if(event.key == 'space') {
|
||||
// Scale the path by 110%:
|
||||
path.scale(1.1);
|
||||
|
||||
// Prevent the key event from bubbling
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onkeyup-member" class="member">
|
||||
<div id="onkeyup-link" class="member-link">
|
||||
<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeyup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The function to be called when the user releases a key on the keyboard.</p>
|
||||
<p>The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains
|
||||
information about the keyboard event.</p>
|
||||
<p>If the function returns <tt>false</tt>, the keyboard event will be
|
||||
prevented from bubbling up. This can be used for example to stop the
|
||||
window from scrolling, when you need the user to interact with arrow
|
||||
keys.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">function onKeyUp(event) {
|
||||
if(event.key == 'space') {
|
||||
console.log('The spacebar was released!');
|
||||
}
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="activate-member" class="member">
|
||||
<div id="activate-link" class="member-link">
|
||||
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div id="activate-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Activates this tool, meaning <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> will
|
||||
point to it and it will be the one that recieves mouse events.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Removes this tool from the <a href="../classes/PaperScope.html#tools"><tt>paperScope.tools</tt></a> list.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
406
dist/docs/classes/ToolEvent.html
vendored
406
dist/docs/classes/ToolEvent.html
vendored
|
|
@ -1,406 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ToolEvent</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>ToolEvent</h1>
|
||||
|
||||
<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
|
||||
|
||||
<p>ToolEvent The ToolEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>'s mouse
|
||||
event handlers <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a>,
|
||||
<a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> and <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a>. The ToolEvent
|
||||
object is the only parameter passed to these functions and contains
|
||||
information about the mouse event.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="type-member" class="member">
|
||||
<div id="type-link" class="member-link">
|
||||
<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
<div id="type-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The type of tool event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>String('mousedown', 'mouseup', 'mousemove', 'mousedrag')</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="point-member" class="member">
|
||||
<div id="point-link" class="member-link">
|
||||
<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
<div id="point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the event was
|
||||
fired.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">function onMouseDrag(event) {
|
||||
// the position of the mouse when it is dragged
|
||||
console.log(event.point);
|
||||
}
|
||||
|
||||
function onMouseUp(event) {
|
||||
// the position of the mouse when it is released
|
||||
console.log(event.point);
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="lastpoint-member" class="member">
|
||||
<div id="lastpoint-link" class="member-link">
|
||||
<a name="lastpoint" href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
|
||||
</div>
|
||||
<div id="lastpoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastpoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the previous
|
||||
event was fired.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="downpoint-member" class="member">
|
||||
<div id="downpoint-link" class="member-link">
|
||||
<a name="downpoint" href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
|
||||
</div>
|
||||
<div id="downpoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('downpoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The position of the mouse in project coordinates when the mouse button
|
||||
was last clicked.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="middlepoint-member" class="member">
|
||||
<div id="middlepoint-link" class="member-link">
|
||||
<a name="middlepoint" href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
|
||||
</div>
|
||||
<div id="middlepoint-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('middlepoint', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The point in the middle between <a href="../classes/ToolEvent.html#lastpoint" onclick="return toggleMember('lastpoint', true);"><tt>lastPoint</tt></a> and
|
||||
<a href="../classes/ToolEvent.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a>. This is a useful position to use when creating
|
||||
artwork based on the moving direction of the mouse, as returned by
|
||||
<a href="../classes/ToolEvent.html#delta" onclick="return toggleMember('delta', true);"><tt>delta</tt></a>.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="delta-member" class="member">
|
||||
<div id="delta-link" class="member-link">
|
||||
<a name="delta" href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
|
||||
</div>
|
||||
<div id="delta-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('delta', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The difference between the current position and the last position of the
|
||||
mouse when the event was fired. In case of the mouseup event, the
|
||||
difference to the mousedown position is returned.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="count-member" class="member">
|
||||
<div id="count-link" class="member-link">
|
||||
<a name="count" href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
|
||||
</div>
|
||||
<div id="count-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('count', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The number of times the mouse event was fired.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="item-member" class="member">
|
||||
<div id="item-link" class="member-link">
|
||||
<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
<div id="item-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The item at the position of the mouse (if any).</p>
|
||||
<p>If the item is contained within one or more <a href="../classes/Group.html"><tt>Group</tt></a> or
|
||||
<a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items, the most top level group or compound path
|
||||
that it is contained within is returned.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="tostring-member" class="member">
|
||||
<div id="tostring-link" class="member-link">
|
||||
<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
<div id="tostring-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>String</tt></tt> — A string representation of the tool event.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== inherited properties ====================== -->
|
||||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
|
||||
|
||||
|
||||
<div id="modifiers-member" class="member">
|
||||
<div id="modifiers-link" class="member-link">
|
||||
<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
<div id="modifiers-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>object</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
538
dist/docs/classes/View.html
vendored
538
dist/docs/classes/View.html
vendored
|
|
@ -1,538 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>View</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>View</h1>
|
||||
|
||||
<p>The View object wraps a canvas element and handles drawing and user
|
||||
interaction through mouse and keyboard for it. It offer means to scroll the
|
||||
view, find the currently visible bounds in project coordinates, or the
|
||||
center, both useful for constructing artwork that should appear centered on
|
||||
screen.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="view-canvas-member" class="member">
|
||||
<div id="view-canvas-link" class="member-link">
|
||||
<a name="view-canvas" href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
|
||||
</div>
|
||||
<div id="view-canvas-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view-canvas', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Creates a view object</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>canvas:</tt>
|
||||
<tt>HTMLCanvasElement</tt> / <tt>String</tt>
|
||||
— The canvas object that this
|
||||
view should wrap, or the String id that represents it
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="canvas-member" class="member">
|
||||
<div id="canvas-link" class="member-link">
|
||||
<a name="canvas" href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
|
||||
</div>
|
||||
<div id="canvas-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('canvas', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The underlying native canvas element.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>HTMLCanvasElement</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="viewsize-member" class="member">
|
||||
<div id="viewsize-link" class="member-link">
|
||||
<a name="viewsize" href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
|
||||
</div>
|
||||
<div id="viewsize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('viewsize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The size of the view canvas. Changing the view's size will resize it's
|
||||
underlying canvas.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="bounds-member" class="member">
|
||||
<div id="bounds-link" class="member-link">
|
||||
<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
||||
</div>
|
||||
<div id="bounds-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The bounds of the currently visible area in project coordinates.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="size-member" class="member">
|
||||
<div id="size-link" class="member-link">
|
||||
<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
|
||||
</div>
|
||||
<div id="size-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The size of the visible area in project coordinates.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="center-member" class="member">
|
||||
<div id="center-link" class="member-link">
|
||||
<a name="center" href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
|
||||
</div>
|
||||
<div id="center-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('center', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The center of the visible area in project coordinates.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="zoom-member" class="member">
|
||||
<div id="zoom-link" class="member-link">
|
||||
<a name="zoom" href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
|
||||
</div>
|
||||
<div id="zoom-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('zoom', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The zoom factor by which the project coordinates are magnified.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Number</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Event Handlers</h3>
|
||||
|
||||
<div id="onframe-member" class="member">
|
||||
<div id="onframe-link" class="member-link">
|
||||
<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
<div id="onframe-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Handler function to be called on each frame of an animation.</p>
|
||||
<p>The function receives an event object which contains information about
|
||||
the frame event:</p>
|
||||
<p><b><tt>event.count</tt></b>: the number of times the frame event was fired.</p>
|
||||
<p><b><tt>event.time</tt></b>: the total amount of time passed since the first frame
|
||||
event in seconds.</p>
|
||||
<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last frame
|
||||
event.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an animation:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas-0">
|
||||
// Create a rectangle shaped path with its top left point at:
|
||||
// {x: 50, y: 25} and a size of {width: 50, height: 50}
|
||||
var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
||||
path.fillColor = 'black';
|
||||
|
||||
function onFrame(event) {
|
||||
// Every frame, rotate the path by 3 degrees:
|
||||
path.rotate(3);
|
||||
}
|
||||
</script>
|
||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onresize-member" class="member">
|
||||
<div id="onresize-link" class="member-link">
|
||||
<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
<div id="onresize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>Handler function that is called whenever a view is resized.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Repositioning items when a view is resized:
|
||||
</p>
|
||||
|
||||
|
||||
<pre class="code">// Create a circle shaped path in the center of the view:
|
||||
var path = new Path.Circle(view.bounds.center, 30);
|
||||
path.fillColor = 'red';
|
||||
|
||||
function onResize(event) {
|
||||
// Whenever the view is resized, move the path to its center:
|
||||
path.position = view.center;
|
||||
}</pre>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Methods</h2>
|
||||
|
||||
|
||||
<div id="activate-member" class="member">
|
||||
<div id="activate-link" class="member-link">
|
||||
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
<div id="activate-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Makes this view the active one, meaning <a href="../classes/PaperScope.html#view"><tt>paperScope.view</tt></a> will
|
||||
point to it.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="remove-member" class="member">
|
||||
<div id="remove-link" class="member-link">
|
||||
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
<div id="remove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Removes thsi view from the <a href="../classes/PaperScope.html#views"><tt>paperScope.views</tt></a> list and frees the
|
||||
associated canvas.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="isvisible-member" class="member">
|
||||
<div id="isvisible-link" class="member-link">
|
||||
<a name="isvisible" href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
|
||||
</div>
|
||||
<div id="isvisible-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isvisible', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Checks whether the view is currently visible within the current browser
|
||||
viewport.</p>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt><tt>Boolean</tt></tt> — Whether the view is visible.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="scrollby-point-member" class="member">
|
||||
<div id="scrollby-point-link" class="member-link">
|
||||
<a name="scrollby-point" href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
|
||||
</div>
|
||||
<div id="scrollby-point-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scrollby-point', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Scrolls the view by the given vector.</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="draw-member" class="member">
|
||||
<div id="draw-link" class="member-link">
|
||||
<a name="draw" href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
|
||||
</div>
|
||||
<div id="draw-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('draw', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Draws the view.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
529
dist/docs/classes/global.html
vendored
529
dist/docs/classes/global.html
vendored
|
|
@ -1,529 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>_global_</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-class">
|
||||
<h1>Global Scope</h1>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="paper-member" class="member">
|
||||
<div id="paper-link" class="member-link">
|
||||
<a name="paper" href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
|
||||
</div>
|
||||
<div id="paper-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paper', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Global PaperScope Properties (for PaperScript)</h3>
|
||||
|
||||
<div id="project-member" class="member">
|
||||
<div id="project-link" class="member-link">
|
||||
<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
<div id="project-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The currently active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="projects-member" class="member">
|
||||
<div id="projects-link" class="member-link">
|
||||
<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
<div id="projects-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of all open projects within the current Paper.js context.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="view-member" class="member">
|
||||
<div id="view-link" class="member-link">
|
||||
<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
<div id="view-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The active view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/View.html"><tt>View</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="views-member" class="member">
|
||||
<div id="views-link" class="member-link">
|
||||
<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
<div id="views-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of view of the active project.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/View.html"><tt>View</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tool-member" class="member">
|
||||
<div id="tool-link" class="member-link">
|
||||
<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
<div id="tool-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The reference to the active tool.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tools-member" class="member">
|
||||
<div id="tools-link" class="member-link">
|
||||
<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
<div id="tools-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The list of available tools.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>View Event Handlers (for PaperScript)</h3>
|
||||
|
||||
<div id="onframe-member" class="member">
|
||||
<div id="onframe-link" class="member-link">
|
||||
<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
<div id="onframe-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onresize-member" class="member">
|
||||
<div id="onresize-link" class="member-link">
|
||||
<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
<div id="onresize-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/View.html#onresize"><tt>view.onResize</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Mouse Event Handlers (for PaperScript)</h3>
|
||||
|
||||
<div id="onmousedown-member" class="member">
|
||||
<div id="onmousedown-link" class="member-link">
|
||||
<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousedrag-member" class="member">
|
||||
<div id="onmousedrag-link" class="member-link">
|
||||
<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousedrag-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmousemove-member" class="member">
|
||||
<div id="onmousemove-link" class="member-link">
|
||||
<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
<div id="onmousemove-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onmouseup-member" class="member">
|
||||
<div id="onmouseup-link" class="member-link">
|
||||
<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onmouseup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Keyboard Event Handlers (for PaperScript)</h3>
|
||||
|
||||
<div id="onkeydown-member" class="member">
|
||||
<div id="onkeydown-link" class="member-link">
|
||||
<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeydown-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="onkeyup-member" class="member">
|
||||
<div id="onkeyup-link" class="member-link">
|
||||
<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
<div id="onkeyup-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>A reference to the <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<tt>Function</tt>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 2011 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||||
<div class="content-end"></div>
|
||||
|
||||
</body>
|
||||
96
dist/docs/classes/index.html
vendored
96
dist/docs/classes/index.html
vendored
|
|
@ -1,96 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Paper.js</title>
|
||||
<base target="classFrame">
|
||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
||||
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body class="reference">
|
||||
<div class="reference-packages">
|
||||
<h1>Paper.js</h1>
|
||||
<ul class="package-classes"><li><a href="../classes/global.html">Global Scope</a></li>
|
||||
<li>
|
||||
<h2>Basic Types</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Point.html">Point</a></li>
|
||||
<li><a href="../classes/Size.html">Size</a></li>
|
||||
<li><a href="../classes/Rectangle.html">Rectangle</a></li>
|
||||
<li><a href="../classes/Matrix.html">Matrix</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Items</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Item.html">Item</a></li>
|
||||
<li><a href="../classes/Layer.html">Layer</a></li>
|
||||
<li><a href="../classes/Group.html">Group</a></li>
|
||||
<li><a href="../classes/PlacedItem.html">PlacedItem</a></li>
|
||||
<li><a href="../classes/Raster.html">Raster</a></li>
|
||||
<li><a href="../classes/PlacedSymbol.html">PlacedSymbol</a></li>
|
||||
<li><hr /></li>
|
||||
<li><a href="../classes/HitResult.html">HitResult</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Paths</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/PathItem.html">PathItem</a></li>
|
||||
<li><a href="../classes/Path.html">Path</a></li>
|
||||
<li><a href="../classes/CompoundPath.html">CompoundPath</a></li>
|
||||
<li><a href="../classes/Segment.html">Segment</a></li>
|
||||
<li><a href="../classes/Curve.html">Curve</a></li>
|
||||
<li><a href="../classes/PathStyle.html">PathStyle</a></li>
|
||||
<li><hr /></li>
|
||||
<li><a href="../classes/CurveLocation.html">CurveLocation</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Projects</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Project.html">Project</a></li>
|
||||
<li><a href="../classes/Symbol.html">Symbol</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Colors</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Color.html">Color</a></li>
|
||||
<li><a href="../classes/RgbColor.html">RgbColor</a></li>
|
||||
<li><a href="../classes/GrayColor.html">GrayColor</a></li>
|
||||
<li><a href="../classes/HsbColor.html">HsbColor</a></li>
|
||||
<li><a href="../classes/HslColor.html">HslColor</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Gradients</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/GradientColor.html">GradientColor</a></li>
|
||||
<li><a href="../classes/Gradient.html">Gradient</a></li>
|
||||
<li><a href="../classes/GradientStop.html">GradientStop</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Interface</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/View.html">View</a></li>
|
||||
<li><a href="../classes/Tool.html">Tool</a></li>
|
||||
<li><a href="../classes/ToolEvent.html">ToolEvent</a></li>
|
||||
<li><a href="../classes/Key.html">Key</a></li>
|
||||
<li><a href="../classes/KeyEvent.html">KeyEvent</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Typography</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/TextItem.html">TextItem</a></li>
|
||||
<li><a href="../classes/PointText.html">PointText</a></li>
|
||||
<li><h3>Style</h3></li>
|
||||
<li><a href="../classes/CharacterStyle.html">CharacterStyle</a></li>
|
||||
<li><a href="../classes/ParagraphStyle.html">ParagraphStyle</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>JavaScript</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/PaperScope.html">PaperScope</a></li>
|
||||
<li><a href="../classes/PaperScript.html">PaperScript</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
13
dist/docs/index.html
vendored
13
dist/docs/index.html
vendored
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>
|
||||
Paper.js API
|
||||
</title>
|
||||
</head>
|
||||
<frameset cols="230,*">
|
||||
<frame src="classes/index.html" name="packageListFrame" title="All Packages">
|
||||
<frame src="about:blank" name="classFrame" title="Class and interface descriptions">
|
||||
</frameset>
|
||||
</html>
|
||||
BIN
dist/docs/resources/css/assets/bullet.gif
vendored
BIN
dist/docs/resources/css/assets/bullet.gif
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 44 B |
141
dist/docs/resources/css/codemirror.css
vendored
141
dist/docs/resources/css/codemirror.css
vendored
|
|
@ -1,141 +0,0 @@
|
|||
.CodeMirror,
|
||||
.CodeMirror textarea,
|
||||
.CodeMirror pre {
|
||||
font-family: Menlo, Consolas, "Vera Mono", monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.CodeMirror-gutter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-width: 30px;
|
||||
height: 100%;
|
||||
background-color: #f4f4f4;
|
||||
border-right: 1px solid #999;
|
||||
}
|
||||
|
||||
.CodeMirror-gutter-text {
|
||||
color: #aaa;
|
||||
text-align: right;
|
||||
padding: 2px 8px 2px 8px; /* 2px required for CodeMirror-selected */
|
||||
}
|
||||
|
||||
.CodeMirror-gutter-text pre {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
background: #ffffff;
|
||||
padding: 2px 0 2px 8px; /* 2px required for CodeMirror-selected */
|
||||
}
|
||||
|
||||
.CodeMirror-lines pre.highlight {
|
||||
background-color: #edf5fc;
|
||||
}
|
||||
|
||||
/*
|
||||
.CodeMirror-lines pre:hover {
|
||||
background-color: #edf5fc;
|
||||
}
|
||||
|
||||
.CodeMirror-lines pre.highlight:hover {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
*/
|
||||
|
||||
.CodeMirror pre {
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
border-left: 1px solid #7c7c7c !important;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.CodeMirror-focused .CodeMirror-cursor {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
span.CodeMirror-selected {
|
||||
background: #ccc !important;
|
||||
color: HighlightText !important;
|
||||
padding: 2px 0 2px 0;
|
||||
}
|
||||
|
||||
.CodeMirror-focused span.CodeMirror-selected {
|
||||
background: Highlight !important;
|
||||
}
|
||||
|
||||
.CodeMirror-matchingbracket {
|
||||
background: #e3fc8d !important;
|
||||
}
|
||||
|
||||
.CodeMirror-nonmatchingbracket {
|
||||
color: #d62a28 !important;
|
||||
}
|
||||
|
||||
/* JavaScript */
|
||||
|
||||
span.cm-keyword {
|
||||
color: #ff7800;
|
||||
}
|
||||
span.cm-atom,
|
||||
span.cm-number {
|
||||
color: #3b5bb5;
|
||||
}
|
||||
span.cm-def,
|
||||
span.cm-variable-2,
|
||||
span.cm-variable-3 {
|
||||
color: #3a4a64;
|
||||
}
|
||||
span.cm-variable {
|
||||
color: #000;
|
||||
}
|
||||
span.cm-property {
|
||||
color: #000;
|
||||
}
|
||||
span.cm-operator {
|
||||
color: #000;
|
||||
}
|
||||
span.cm-comment {
|
||||
color: #8c868f;
|
||||
}
|
||||
span.cm-string {
|
||||
color: #409b1c;
|
||||
}
|
||||
span.cm-meta {
|
||||
color: #555;
|
||||
}
|
||||
span.cm-error {
|
||||
color: #f30;
|
||||
}
|
||||
span.cm-qualifier {
|
||||
color: #555;
|
||||
}
|
||||
span.cm-builtin {
|
||||
color: #30a;
|
||||
}
|
||||
span.cm-bracket {
|
||||
color: #cc7;
|
||||
}
|
||||
span.cm-tag {
|
||||
font-weight: bold;
|
||||
color: #3b5bb5;
|
||||
}
|
||||
span.cm-attribute {
|
||||
font-style: italic;
|
||||
color: #3b5bb5;
|
||||
}
|
||||
64
dist/docs/resources/css/paperscript.css
vendored
64
dist/docs/resources/css/paperscript.css
vendored
|
|
@ -1,64 +0,0 @@
|
|||
.paperscript .button,
|
||||
.paperscript .explain {
|
||||
display: none;
|
||||
position: relative; /* position (top / right) relative to paperscriptcontainer */
|
||||
float: right; /* align right as block */
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
padding: 2px 6px;
|
||||
margin-bottom: -20px; /* move canvas up by 16px (height) + 2 * 2px (padding) */
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
z-index: 1;
|
||||
top: 8px; /* margin to top */
|
||||
}
|
||||
|
||||
.paperscript .button {
|
||||
right: 8px; /* margin to right */
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.paperscript .explain {
|
||||
display: block;
|
||||
right: 64px; /* margin to right */
|
||||
background: #e3f4fc;
|
||||
margin-bottom: -36px; /* (height) + 2 * 2px (padding) */
|
||||
}
|
||||
|
||||
.paperscript:hover .button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.paperscript .button:hover {
|
||||
background: #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paperscript .source {
|
||||
overflow: auto;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.paperscript .CodeMirror {
|
||||
margin: 0 !important; /* Override any potential margins again */
|
||||
}
|
||||
|
||||
.paperscript .CodeMirror-gutter-text,
|
||||
.paperscript .CodeMirror-lines {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.paperscript .canvas {
|
||||
line-height: 0; /* prevent weird 5px padding under canvas elements */
|
||||
}
|
||||
|
||||
.paperscript .canvas.border canvas {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.paperscript.split .canvas {
|
||||
border: 1px solid #999;
|
||||
border-top: 0;
|
||||
}
|
||||
128
dist/docs/resources/css/reference.css
vendored
128
dist/docs/resources/css/reference.css
vendored
|
|
@ -1,128 +0,0 @@
|
|||
/* These styles are shared with the server version of docs */
|
||||
|
||||
.reference h1, .reference h2, .reference h3 {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
height: 18px; /* -2px so border-bottom aligns with contained links */
|
||||
border-bottom: 1px solid;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.reference h3 {
|
||||
margin-top: 16px;
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
|
||||
.reference a tt {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.reference p {
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.reference ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.reference-list ul, .reference-inherited ul {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.reference hr {
|
||||
border: none;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
.reference-packages {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.reference-packages h2, .reference-packages h3, .reference-packages hr {
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.reference-packages .first h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
* html .reference-packages img {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.reference-packages li {
|
||||
list-style: none;
|
||||
list-style-image: none; /* needed for ie 6 */
|
||||
}
|
||||
|
||||
.reference-members {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.member-group-text {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.member-description {
|
||||
border: 1px solid #999;
|
||||
/* .member-header defines border-top for operator lists */
|
||||
border-top: 0;
|
||||
margin: 16px 0 16px 0;
|
||||
}
|
||||
|
||||
.member-header {
|
||||
border-top: 1px solid #999;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.member-title {
|
||||
float: left;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.member-close {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.member-text {
|
||||
border-top: 1px dashed #999;
|
||||
padding: 10px 10px 0 10px;
|
||||
margin-bottom: -6px; /* Compensate margins of p and ul to end up with 10px */
|
||||
}
|
||||
|
||||
.reference ul,
|
||||
.reference .paperscript,
|
||||
.reference .CodeMirror {
|
||||
margin-top: -8px; /* Move half way up close to previous paragraph */
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.reference ul {
|
||||
margin-top: 0; /* Clear the above -10px for ul again */
|
||||
}
|
||||
|
||||
.member-link {
|
||||
text-indent: -30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.reference-inherited ul li {
|
||||
text-indent: -30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.package-classes {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.package-classes ul {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.reference h2 a {
|
||||
font-weight: bold;
|
||||
}
|
||||
86
dist/docs/resources/css/style.css
vendored
86
dist/docs/resources/css/style.css
vendored
|
|
@ -1,86 +0,0 @@
|
|||
body, select, input, textarea {
|
||||
font-family: "Lucida Grande", Geneva, Verdana, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fff;
|
||||
margin: 16px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
color: #000;
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
select, input, textarea {
|
||||
font-size: 11px;
|
||||
margin: 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
tt, pre {
|
||||
font-family: Menlo, Consolas, "Vera Mono", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0 0 20px 16px;
|
||||
list-style: disc outside url(assets/bullet.gif);
|
||||
}
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.reference-packages, .reference-packages a {
|
||||
color: #009dec;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
/* Border-bottom color for headers and ruler */
|
||||
.reference-packages h2, .reference-packages h3, .reference-packages hr {
|
||||
border-color: #009dec;
|
||||
}
|
||||
|
||||
.reference-packages a:hover {
|
||||
background: #e3f4fc;
|
||||
}
|
||||
|
||||
.reference h1 {
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 24px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
}
|
||||
4040
dist/docs/resources/js/bootstrap.js
vendored
4040
dist/docs/resources/js/bootstrap.js
vendored
File diff suppressed because it is too large
Load diff
1
dist/docs/resources/js/codemirror.js
vendored
1
dist/docs/resources/js/codemirror.js
vendored
File diff suppressed because one or more lines are too long
7842
dist/docs/resources/js/paper.js
vendored
7842
dist/docs/resources/js/paper.js
vendored
File diff suppressed because one or more lines are too long
258
dist/docs/resources/js/reference.js
vendored
258
dist/docs/resources/js/reference.js
vendored
|
|
@ -1,258 +0,0 @@
|
|||
ContentEnd = HtmlElement.extend({
|
||||
_class: 'content-end',
|
||||
|
||||
initialize: function() {
|
||||
var anchor = $$('a[name]').getLast(),
|
||||
that = this;
|
||||
if (anchor) {
|
||||
function resize() {
|
||||
var bottom = $window.getScrollSize().height
|
||||
- anchor.getOffset().y - $window.getSize().height;
|
||||
that.setHeight(that.getHeight() - bottom);
|
||||
}
|
||||
$window.addEvents({
|
||||
load: resize,
|
||||
resize: resize
|
||||
});
|
||||
// Not sure why these are required twice, in addition to load()..
|
||||
resize();
|
||||
resize();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function createCodeMirror(place, options, source) {
|
||||
return new CodeMirror(place, Hash.create({}, {
|
||||
lineNumbers: true,
|
||||
matchBrackets: true,
|
||||
indentUnit: 4,
|
||||
tabMode: 'shift',
|
||||
value: source.getText().replace(/\t/gi, ' ').match(
|
||||
// Remove first & last empty line
|
||||
/^\s*?[\n\r]?([\u0000-\uffff]*?)[\n\r]?\s*?$/)[1]
|
||||
}, options));
|
||||
}
|
||||
|
||||
Code = HtmlElement.extend({
|
||||
_class: 'code',
|
||||
|
||||
initialize: function() {
|
||||
// Only format this element if it is visible, otherwise wait until
|
||||
// it is made visible and then call initialize() manually.
|
||||
if (this.initialized || this.getBounds().height == 0)
|
||||
return;
|
||||
var that = this;
|
||||
var start = this.getProperty('start');
|
||||
var highlight = this.getProperty('highlight');
|
||||
var editor = createCodeMirror(function(el) {
|
||||
that.replaceWith(el);
|
||||
}, {
|
||||
lineNumbers: !this.hasParent('.resource-text'),
|
||||
firstLineNumber: (start || 1).toInt(),
|
||||
readOnly: true
|
||||
}, this);
|
||||
if (highlight) {
|
||||
var highlights = highlight.split(',');
|
||||
for (var i = 0, l = highlights.length; i < l; i++) {
|
||||
var highlight = highlights[i].split('-');
|
||||
var hlStart = highlight[0].toInt() - 1;
|
||||
var hlEnd = highlight.length == 2
|
||||
? highlight[1].toInt() - 1 : hlStart;
|
||||
if (start) {
|
||||
hlStart -= start - 1;
|
||||
hlEnd -= start - 1;
|
||||
}
|
||||
for (var j = hlStart; j <= hlEnd; j++) {
|
||||
editor.setLineClass(j, 'highlight');
|
||||
}
|
||||
}
|
||||
}
|
||||
this.initialized = true;
|
||||
}
|
||||
});
|
||||
|
||||
PaperScript = HtmlElement.extend({
|
||||
_class: 'paperscript',
|
||||
|
||||
initialize: function() {
|
||||
// Only format this element if it is visible, otherwise wait until
|
||||
// it is made visible and then call initialize() manually.
|
||||
if (this.initialized || this.getBounds().height == 0)
|
||||
return;
|
||||
var script = $('script', this),
|
||||
button = $('.button', this);
|
||||
if (!script || !button)
|
||||
return;
|
||||
var source = button.injectAfter('div', {
|
||||
className: 'source hidden'
|
||||
});
|
||||
var that = this,
|
||||
canvas = $('canvas', this),
|
||||
hasResize = canvas.getProperty('resize'),
|
||||
showSplit = this.hasClass('split'),
|
||||
sourceFirst = this.hasClass('source'),
|
||||
width, height,
|
||||
editor = null,
|
||||
hasBorders = true;
|
||||
|
||||
function showSource(show) {
|
||||
source.modifyClass('hidden', !show);
|
||||
button.setText(show ? 'Run' : 'Source');
|
||||
if (show && !editor) {
|
||||
editor = createCodeMirror(source.$, {
|
||||
/*
|
||||
onKeyEvent: function(editor, event) {
|
||||
event = new DomEvent(event);
|
||||
if (event.type == 'keydown') {
|
||||
var pos = editor.getCursor();
|
||||
pos.ch += 4;
|
||||
editor.setCursor(pos);
|
||||
event.stop();
|
||||
}
|
||||
},
|
||||
*/
|
||||
}, script);
|
||||
}
|
||||
}
|
||||
|
||||
function runScript() {
|
||||
var scope = paper.PaperScope.get(script.$);
|
||||
if (scope) {
|
||||
// Update script to edited version
|
||||
var code = editor.getValue();
|
||||
script.setText(code);
|
||||
// Keep a reference to the used canvas, since we're going to
|
||||
// fully clear the scope and initialize again with this canvas.
|
||||
var canvas = scope.view.canvas;
|
||||
// Clear scope first, then evaluate a new script.
|
||||
scope.clear();
|
||||
scope.initialize(canvas);
|
||||
scope.evaluate(code);
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
if (!canvas.hasClass('hidden')) {
|
||||
width = canvas.getWidth();
|
||||
height = canvas.getHeight();
|
||||
} else if (hasResize) {
|
||||
// Can't get correct dimensions from hidden canvas,
|
||||
// so calculate again.
|
||||
var size = $window.getScrollSize();
|
||||
var offset = source.getOffset();
|
||||
width = size.width - offset.x;
|
||||
height = size.height - offset.y;
|
||||
}
|
||||
// Resize the main element as well, so that the float:right button
|
||||
// is always positioned correctly.
|
||||
that.set({ width: width, height: height });
|
||||
source.set({
|
||||
width: width - (hasBorders ? 2 : 1),
|
||||
height: height - (hasBorders ? 2 : 0)
|
||||
});
|
||||
}
|
||||
|
||||
function toggleView() {
|
||||
var show = source.hasClass('hidden');
|
||||
resize();
|
||||
canvas.modifyClass('hidden', show);
|
||||
showSource(show);
|
||||
if (!show)
|
||||
runScript();
|
||||
// Remove padding
|
||||
button.setStyle('right',
|
||||
$('.CodeMirror', source).getScrollSize().height > height
|
||||
? 24 : 8);
|
||||
}
|
||||
|
||||
if (hasResize) {
|
||||
// Delay the installing of the resize event, so paper.js installs
|
||||
// its own before us.
|
||||
(function() {
|
||||
$window.addEvents({
|
||||
resize: resize
|
||||
});
|
||||
}).delay(1);
|
||||
hasBorders = false;
|
||||
source.setStyles({
|
||||
borderWidth: '0 0 0 1px'
|
||||
});
|
||||
}
|
||||
|
||||
if (showSplit) {
|
||||
showSource(true);
|
||||
} else if (sourceFirst) {
|
||||
toggleView();
|
||||
}
|
||||
|
||||
button.addEvents({
|
||||
click: function(event) {
|
||||
if (showSplit) {
|
||||
runScript();
|
||||
} else {
|
||||
toggleView();
|
||||
}
|
||||
event.stop();
|
||||
},
|
||||
|
||||
mousedown: function(event) {
|
||||
event.stop();
|
||||
}
|
||||
});
|
||||
this.initialized = true;
|
||||
}
|
||||
});
|
||||
|
||||
var lastMemberId = null;
|
||||
function toggleMember(id, scrollTo, dontScroll) {
|
||||
var link = $('#' + id + '-link');
|
||||
if (!link)
|
||||
return true;
|
||||
var desc = $('#' + id + '-description');
|
||||
var v = !link.hasClass('hidden');
|
||||
// Retrieve y-offset before any changes, so we can correct scrolling after
|
||||
var offset = (v ? link : desc).getOffset().y;
|
||||
if (lastMemberId && lastMemberId != id) {
|
||||
var prevId = lastMemberId;
|
||||
lastMemberId = null;
|
||||
toggleMember(prevId, false, true);
|
||||
}
|
||||
lastMemberId = v && id;
|
||||
link.modifyClass('hidden', v);
|
||||
desc.modifyClass('hidden', !v);
|
||||
if (!dontScroll) {
|
||||
// Correct scrolling relatively to where we are, by checking the amount
|
||||
// the element has shifted due to the above toggleMember call, and
|
||||
// correcting by 11px offset, caused by 1px border and 10px padding.
|
||||
var scroll = $window.getScrollOffset();
|
||||
$window.setScrollOffset(scroll.x, scroll.y
|
||||
+ (v ? desc : link).getOffset().y - offset + 11 * (v ? 1 : -1));
|
||||
}
|
||||
if (!desc.editor && v) {
|
||||
desc.editor = $$('pre.code, .paperscript', desc).each(function(code) {
|
||||
code.initialize();
|
||||
});
|
||||
}
|
||||
if (scrollTo)
|
||||
scrollToMember(id);
|
||||
return false;
|
||||
}
|
||||
|
||||
function scrollToElement(id) {
|
||||
var e = $('#' + id + '-member');
|
||||
if (e) {
|
||||
if (e.hasClass('member'))
|
||||
toggleMember(id);
|
||||
var offs = e.getOffset();
|
||||
$window.setScrollOffset(offs);
|
||||
} else {
|
||||
window.location.hash = id;
|
||||
}
|
||||
}
|
||||
|
||||
$document.addEvent('domready', function() {
|
||||
var h = unescape(window.location.hash);
|
||||
if (h) scrollToElement(h.substring(1));
|
||||
if (window.paper)
|
||||
paper.load();
|
||||
});
|
||||
Loading…
Reference in a new issue