mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-01 02:38:43 -05:00
Also include prebuilt docs for now.
This commit is contained in:
Jürg Lehni
parent
fee977e2eb
commit
0ebdc2a719
46 changed files with 57127 additions and 0 deletions
402
dist/docs/classes/CharacterStyle.html
vendored
Normal file
402
dist/docs/classes/CharacterStyle.html
vendored
Normal file
|
|
@ -0,0 +1,402 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>Example:</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>
|
||||
String
|
||||
</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>
|
||||
Number
|
||||
</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/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="canvas0">
|
||||
// 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="canvas0"></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>
|
||||
Number
|
||||
</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="canvas1">
|
||||
// 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="canvas1"></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>
|
||||
String ('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="canvas2">
|
||||
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="canvas2"></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>
|
||||
Number
|
||||
</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/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="canvas3">
|
||||
// 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="canvas3"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
632
dist/docs/classes/Color.html
vendored
Normal file
632
dist/docs/classes/Color.html
vendored
Normal file
|
|
@ -0,0 +1,632 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
|
||||
|
||||
</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>Boolean</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>
|
||||
<p>Example:</p>
|
||||
<pre class="code">
|
||||
var color = new RGBColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'
|
||||
</pre>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
String('rgb', 'hsb', 'gray')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</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>
|
||||
Number
|
||||
</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="canvas4">
|
||||
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="canvas4"></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>
|
||||
Number
|
||||
</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="canvas5">
|
||||
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="canvas5"></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>
|
||||
Number
|
||||
</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="canvas6">
|
||||
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="canvas6"></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>
|
||||
Number
|
||||
</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="canvas7">
|
||||
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="canvas7"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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="canvas8">
|
||||
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="canvas8"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas9">
|
||||
// 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="canvas9"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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>Boolean</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>String</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>String</tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
3412
dist/docs/classes/CompoundPath.html
vendored
Normal file
3412
dist/docs/classes/CompoundPath.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
781
dist/docs/classes/Curve.html
vendored
Normal file
781
dist/docs/classes/Curve.html
vendored
Normal file
|
|
@ -0,0 +1,781 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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...</p>
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="curve-segment1-segment2-member" class="member">
|
||||
<div id="curve-segment1-segment2-link" class="member-link">
|
||||
<a name="curve-segment1-segment2" href="#" onClick="return toggleMember('curve-segment1-segment2', false);"><tt><b>Curve</b>(segment1, segment2)</tt></a>
|
||||
</div>
|
||||
<div id="curve-segment1-segment2-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', false);"><tt><b>Curve</b>(segment1, segment2)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve-segment1-segment2', 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>
|
||||
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
Boolean
|
||||
</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>
|
||||
Number
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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>Boolean</tt> — <tt>true</tt> the curve is linear, <tt>false</tt> otherwise
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="getparameter-length-member" class="member">
|
||||
<div id="getparameter-length-link" class="member-link">
|
||||
<a name="getparameter-length" href="#" onClick="return toggleMember('getparameter-length', false);"><tt><b>getParameter</b>(length[, start])</tt></a>
|
||||
</div>
|
||||
<div id="getparameter-length-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('getparameter-length', false);"><tt><b>getParameter</b>(length[, start])</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameter-length', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>length:</tt>
|
||||
Number
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>start:</tt>
|
||||
Number
|
||||
|
||||
— optional
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<ul><b>Returns:</b>
|
||||
|
||||
<li>
|
||||
<tt>Boolean</tt> — <tt>true</tt> the curve is linear, <tt>false</tt> otherwise
|
||||
</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>
|
||||
Number
|
||||
— 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>
|
||||
Number
|
||||
— 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>
|
||||
Number
|
||||
— 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="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>String</tt> — A string representation of the curve.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
461
dist/docs/classes/CurveLocation.html
vendored
Normal file
461
dist/docs/classes/CurveLocation.html
vendored
Normal file
|
|
@ -0,0 +1,461 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="curvelocation-curve-parameter-point-member" class="member">
|
||||
<div id="curvelocation-curve-parameter-point-link" class="member-link">
|
||||
<a name="curvelocation-curve-parameter-point" href="#" onClick="return toggleMember('curvelocation-curve-parameter-point', false);"><tt><b>CurveLocation</b>(curve, parameter, point)</tt></a>
|
||||
</div>
|
||||
<div id="curvelocation-curve-parameter-point-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', false);"><tt><b>CurveLocation</b>(curve, parameter, point)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curvelocation-curve-parameter-point', 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>
|
||||
Number
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</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="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 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>
|
||||
Index
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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>String</tt> — A string representation of the curve location.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
197
dist/docs/classes/Gradient.html
vendored
Normal file
197
dist/docs/classes/Gradient.html
vendored
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
String
|
||||
— '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>Boolean</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>Functions</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 © 21011 <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>
|
||||
|
||||
</body>
|
||||
462
dist/docs/classes/GradientColor.html
vendored
Normal file
462
dist/docs/classes/GradientColor.html
vendored
Normal file
|
|
@ -0,0 +1,462 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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="canvas42">
|
||||
// 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="canvas42"></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="canvas43">
|
||||
// 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="canvas43"></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="canvas44">
|
||||
// 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="canvas44"></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="canvas45">
|
||||
// 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="canvas45"></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="canvas46">
|
||||
// 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="canvas46"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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 © 21011 <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>
|
||||
|
||||
</body>
|
||||
255
dist/docs/classes/GradientStop.html
vendored
Normal file
255
dist/docs/classes/GradientStop.html
vendored
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
Number
|
||||
— 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>
|
||||
Number
|
||||
</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="canvas47">
|
||||
// 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="canvas47"></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="canvas48">
|
||||
// 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="canvas48"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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 © 21011 <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>
|
||||
|
||||
</body>
|
||||
708
dist/docs/classes/GrayColor.html
vendored
Normal file
708
dist/docs/classes/GrayColor.html
vendored
Normal file
|
|
@ -0,0 +1,708 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
Number
|
||||
— the amount of gray in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
Number
|
||||
— 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="canvas49">
|
||||
// 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="canvas49"></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>
|
||||
<p>Example:</p>
|
||||
<pre class="code">
|
||||
var color = new RGBColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'
|
||||
</pre>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
String('rgb', 'hsb', 'gray')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</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>
|
||||
Number
|
||||
</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="canvas50">
|
||||
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="canvas50"></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>
|
||||
Number
|
||||
</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="canvas51">
|
||||
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="canvas51"></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>
|
||||
Number
|
||||
</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="canvas52">
|
||||
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="canvas52"></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>
|
||||
Number
|
||||
</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="canvas53">
|
||||
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="canvas53"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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="canvas54">
|
||||
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="canvas54"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas55">
|
||||
// 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="canvas55"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Functions 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>Boolean</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>Boolean</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>String</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>String</tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
2960
dist/docs/classes/Group.html
vendored
Normal file
2960
dist/docs/classes/Group.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
725
dist/docs/classes/HSBColor.html
vendored
Normal file
725
dist/docs/classes/HSBColor.html
vendored
Normal file
|
|
@ -0,0 +1,725 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
Number
|
||||
— the hue of the color as a value in degrees between
|
||||
<tt>0</tt> and <tt>360</tt>.
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>saturation:</tt>
|
||||
Number
|
||||
— the saturation of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>brightness:</tt>
|
||||
Number
|
||||
— the brightness of the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
Number
|
||||
— 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="canvas89">
|
||||
// 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="canvas89"></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>
|
||||
<p>Example:</p>
|
||||
<pre class="code">
|
||||
var color = new RGBColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'
|
||||
</pre>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
String('rgb', 'hsb', 'gray')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</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>
|
||||
Number
|
||||
</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="canvas90">
|
||||
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="canvas90"></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>
|
||||
Number
|
||||
</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="canvas91">
|
||||
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="canvas91"></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>
|
||||
Number
|
||||
</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="canvas92">
|
||||
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="canvas92"></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>
|
||||
Number
|
||||
</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="canvas93">
|
||||
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="canvas93"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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="canvas94">
|
||||
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="canvas94"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas95">
|
||||
// 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="canvas95"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Functions 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>Boolean</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>Boolean</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>String</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>String</tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
2826
dist/docs/classes/Item.html
vendored
Normal file
2826
dist/docs/classes/Item.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
97
dist/docs/classes/Key.html
vendored
Normal file
97
dist/docs/classes/Key.html
vendored
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 Functions</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>
|
||||
String
|
||||
— 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>Boolean</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 © 21011 <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>
|
||||
|
||||
</body>
|
||||
175
dist/docs/classes/KeyEvent.html
vendored
Normal file
175
dist/docs/classes/KeyEvent.html
vendored
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>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>
|
||||
String('keydown', 'keyup')
|
||||
</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>
|
||||
String
|
||||
</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>
|
||||
String
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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>String</tt> — A string representation of the key event.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
2961
dist/docs/classes/Layer.html
vendored
Normal file
2961
dist/docs/classes/Layer.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
326
dist/docs/classes/Line.html
vendored
Normal file
326
dist/docs/classes/Line.html
vendored
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
Boolean
|
||||
|
||||
— 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>
|
||||
Boolean
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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>Number</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>Number</tt>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
1511
dist/docs/classes/Matrix.html
vendored
Normal file
1511
dist/docs/classes/Matrix.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
87
dist/docs/classes/ParagraphStyle.html
vendored
Normal file
87
dist/docs/classes/ParagraphStyle.html
vendored
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>Example:</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>
|
||||
String('left', 'right', 'center')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
5274
dist/docs/classes/Path.html
vendored
Normal file
5274
dist/docs/classes/Path.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
323
dist/docs/classes/PathStyle.html
vendored
Normal file
323
dist/docs/classes/PathStyle.html
vendored
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>Example:</p>
|
||||
<pre class="code">
|
||||
var circleStyle = {
|
||||
fillColor: new RGBColor(1, 0, 0),
|
||||
strokeColor: 'black',
|
||||
strokeWidth: 5
|
||||
};
|
||||
var path = new Path.Circle(new Point(50, 50), 30);
|
||||
path.style = circleStyle;
|
||||
</pre>
|
||||
</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/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="canvas223">
|
||||
// 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="canvas223"></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>
|
||||
Number
|
||||
</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="canvas224">
|
||||
// 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="canvas224"></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>
|
||||
String ('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="canvas225">
|
||||
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="canvas225"></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>
|
||||
Number
|
||||
</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/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="canvas226">
|
||||
// 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="canvas226"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
2952
dist/docs/classes/PlacedSymbol.html
vendored
Normal file
2952
dist/docs/classes/PlacedSymbol.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
2184
dist/docs/classes/Point.html
vendored
Normal file
2184
dist/docs/classes/Point.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
3061
dist/docs/classes/PointText.html
vendored
Normal file
3061
dist/docs/classes/PointText.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
449
dist/docs/classes/Project.html
vendored
Normal file
449
dist/docs/classes/Project.html
vendored
Normal file
|
|
@ -0,0 +1,449 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>The Project item refers to..</p>
|
||||
<p>The currently active project can be accessed through the global <tt>project</tt> variable.</p>
|
||||
<p>An array of all open projects is accessible through the global <tt>projects</tt> 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>
|
||||
|
||||
|
||||
|
||||
|
||||
</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="canvas292">
|
||||
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="canvas292"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas293">
|
||||
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="canvas293"></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 global projects array.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Number
|
||||
</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>Functions</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="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>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
724
dist/docs/classes/RGBColor.html
vendored
Normal file
724
dist/docs/classes/RGBColor.html
vendored
Normal file
|
|
@ -0,0 +1,724 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
Number
|
||||
— the amount of red in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>green:</tt>
|
||||
Number
|
||||
— the amount of green in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>blue:</tt>
|
||||
Number
|
||||
— the amount of blue in the color as a value
|
||||
between <tt>0</tt> and <tt>1</tt>
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>alpha:</tt>
|
||||
Number
|
||||
— 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="canvas325">
|
||||
// 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="canvas325"></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>
|
||||
<p>Example:</p>
|
||||
<pre class="code">
|
||||
var color = new RGBColor(1, 0, 0);
|
||||
console.log(color.type); // 'rgb'
|
||||
</pre>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
String('rgb', 'hsb', 'gray')
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</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>
|
||||
Number
|
||||
</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="canvas326">
|
||||
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="canvas326"></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>
|
||||
Number
|
||||
</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="canvas327">
|
||||
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="canvas327"></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>
|
||||
Number
|
||||
</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="canvas328">
|
||||
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="canvas328"></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>
|
||||
Number
|
||||
</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="canvas329">
|
||||
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="canvas329"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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="canvas330">
|
||||
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="canvas330"></canvas></div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Hue cycling:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas331">
|
||||
// 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="canvas331"></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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- =========================== inherited methods ========================= -->
|
||||
<div class="reference-members"><h2>Functions 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>Boolean</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>Boolean</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>String</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>String</tt> — A css string representation of the color.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
3536
dist/docs/classes/Raster.html
vendored
Normal file
3536
dist/docs/classes/Raster.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
1232
dist/docs/classes/Rectangle.html
vendored
Normal file
1232
dist/docs/classes/Rectangle.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
517
dist/docs/classes/Segment.html
vendored
Normal file
517
dist/docs/classes/Segment.html
vendored
Normal file
|
|
@ -0,0 +1,517 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 a part of a path which is
|
||||
described by the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array. Every segment of a
|
||||
path corresponds to an anchor point (anchor points are the path handles
|
||||
that are visible when the path is selected).</p>
|
||||
</div>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</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>([point[, handleIn[, handleOut]]])</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>([point[, handleIn[, handleOut]]])</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>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>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
<p>
|
||||
<b>Example</b>
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas332">
|
||||
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="canvas332"></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>
|
||||
Boolean
|
||||
</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>
|
||||
Number
|
||||
</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>Functions</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>String</tt> — A string representation of the segment.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
1243
dist/docs/classes/Size.html
vendored
Normal file
1243
dist/docs/classes/Size.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
269
dist/docs/classes/Symbol.html
vendored
Normal file
269
dist/docs/classes/Symbol.html
vendored
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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="canvas333">
|
||||
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="canvas333"></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>Functions</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 © 21011 <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>
|
||||
|
||||
</body>
|
||||
2973
dist/docs/classes/TextItem.html
vendored
Normal file
2973
dist/docs/classes/TextItem.html
vendored
Normal file
File diff suppressed because it is too large
Load diff
568
dist/docs/classes/Tool.html
vendored
Normal file
568
dist/docs/classes/Tool.html
vendored
Normal file
|
|
@ -0,0 +1,568 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>Example code:</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>
|
||||
|
||||
<!-- ============================== constructors ========================= -->
|
||||
<div class="reference-members"><h2>Constructors</h2>
|
||||
|
||||
|
||||
<div id="tool-handlers-scope-member" class="member">
|
||||
<div id="tool-handlers-scope-link" class="member-link">
|
||||
<a name="tool-handlers-scope" href="#" onClick="return toggleMember('tool-handlers-scope', false);"><tt><b>Tool</b>(handlers, scope)</tt></a>
|
||||
</div>
|
||||
<div id="tool-handlers-scope-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('tool-handlers-scope', false);"><tt><b>Tool</b>(handlers, scope)</tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool-handlers-scope', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div class="member-text">
|
||||
<p>Initializes the tool's settings, so a new tool can be assigned to it</p>
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>handlers:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<tt>scope:</tt>
|
||||
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
Number
|
||||
</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>
|
||||
function
|
||||
</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="canvas367">
|
||||
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="canvas367"></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>
|
||||
function
|
||||
</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="canvas368">
|
||||
// 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="canvas368"></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>
|
||||
function
|
||||
</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="canvas369">
|
||||
// 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="canvas369"></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>
|
||||
function
|
||||
</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="canvas370">
|
||||
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="canvas370"></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>
|
||||
Function
|
||||
</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="canvas371">
|
||||
// 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="canvas371"></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>
|
||||
Function
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
326
dist/docs/classes/ToolEvent.html
vendored
Normal file
326
dist/docs/classes/ToolEvent.html
vendored
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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>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="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>
|
||||
Number
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
object
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- ============================== methods ================================ -->
|
||||
<div class="reference-members"><h2>Functions</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>String</tt> — A string representation of the tool event.
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
419
dist/docs/classes/View.html
vendored
Normal file
419
dist/docs/classes/View.html
vendored
Normal file
|
|
@ -0,0 +1,419 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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..</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>
|
||||
Canvas
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="reference-members"><h2>Properties</h2>
|
||||
|
||||
|
||||
<div id="viewbounds-member" class="member">
|
||||
<div id="viewbounds-link" class="member-link">
|
||||
<a name="viewbounds" href="#" onClick="return toggleMember('viewbounds', false);"><tt><b>viewBounds</b></tt></a>
|
||||
</div>
|
||||
<div id="viewbounds-description" class="member-description hidden">
|
||||
<div class="member-header">
|
||||
<div class="member-title">
|
||||
<div class="member-link">
|
||||
<a href="#" onClick="return toggleMember('viewbounds', false);"><tt><b>viewBounds</b></tt></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('viewbounds', false);"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div class="member-text">
|
||||
<p>The bounds of the view, i.e. the bounds of the part of the project which
|
||||
is visible in the window.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||||
</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">
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Number
|
||||
</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>
|
||||
function
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
<b>Example</b> — Creating an animation:
|
||||
</p>
|
||||
|
||||
<div class="paperscript split">
|
||||
<div class="button">Run</div>
|
||||
<script type="text/paperscript" canvas="canvas372">
|
||||
// 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="canvas372"></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>
|
||||
function
|
||||
</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>Functions</h2>
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
<ul><b>Parameters:</b>
|
||||
|
||||
<li>
|
||||
<tt>point:</tt>
|
||||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
428
dist/docs/classes/global.html
vendored
Normal file
428
dist/docs/classes/global.html
vendored
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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="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 global 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 global projects array.</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="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 tool object.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
<a href="../classes/Tool.html"><tt>Tool</tt></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>View 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>A reference to the <a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Function
|
||||
</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>
|
||||
Function
|
||||
</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>A reference to the <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Function
|
||||
</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>
|
||||
Function
|
||||
</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>
|
||||
Function
|
||||
</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>
|
||||
Function
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</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>A reference to the <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a> handler function.</p>
|
||||
|
||||
|
||||
<ul><b>Type:</b>
|
||||
<li>
|
||||
Function
|
||||
</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>
|
||||
Function
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- =========================== copyright notice ========================= -->
|
||||
<p class="footer">Copyright © 21011 <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>
|
||||
|
||||
</body>
|
||||
84
dist/docs/classes/index.html
vendored
Normal file
84
dist/docs/classes/index.html
vendored
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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/Raster.html">Raster</a></li>
|
||||
<li><a href="../classes/PlacedSymbol.html">PlacedSymbol</a></li>
|
||||
</ul>
|
||||
<li>
|
||||
<h2>Paths</h2>
|
||||
<ul>
|
||||
<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>Tools</h2>
|
||||
<ul>
|
||||
<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>Projects</h2>
|
||||
<ul>
|
||||
<li><a href="../classes/Project.html">Project</a></li>
|
||||
<li><a href="../classes/View.html">View</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>
|
||||
</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>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>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
12
dist/docs/index.html
vendored
Normal file
12
dist/docs/index.html
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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
Normal file
BIN
dist/docs/resources/css/assets/bullet.gif
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 B |
110
dist/docs/resources/css/codemirror.css
vendored
Normal file
110
dist/docs/resources/css/codemirror.css
vendored
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
.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.js-comment {
|
||||
color: #8c868f;
|
||||
}
|
||||
span.js-keyword {
|
||||
color: #ff7800;
|
||||
}
|
||||
span.js-atom {
|
||||
color: #3b5bb5;
|
||||
}
|
||||
span.js-string {
|
||||
color: #409b1c;
|
||||
}
|
||||
span.js-variable {
|
||||
color: #000000;
|
||||
}
|
||||
span.js-variabledef,
|
||||
span.js-localvariable {
|
||||
color: #3a4a64;
|
||||
}
|
||||
53
dist/docs/resources/css/paperscript.css
vendored
Normal file
53
dist/docs/resources/css/paperscript.css
vendored
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
.paperscript .button {
|
||||
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) */
|
||||
top: 8px; /* margin to top */
|
||||
right: 8px; /* margin to right */
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.paperscript .source {
|
||||
overflow: auto;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
.paperscript:hover .button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.paperscript .button:hover {
|
||||
background: #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.paperscript .CodeMirror {
|
||||
margin-bottom: 0; /* Override any potential bottom 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;
|
||||
}
|
||||
133
dist/docs/resources/css/reference.css
vendored
Normal file
133
dist/docs/resources/css/reference.css
vendored
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
/* 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 a tt,
|
||||
.reference a tt b {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
*/
|
||||
|
||||
.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
Normal file
86
dist/docs/resources/css/style.css
vendored
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
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
Normal file
4040
dist/docs/resources/js/bootstrap.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
dist/docs/resources/js/codemirror.js
vendored
Normal file
1
dist/docs/resources/js/codemirror.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6922
dist/docs/resources/js/paper.js
vendored
Normal file
6922
dist/docs/resources/js/paper.js
vendored
Normal file
File diff suppressed because one or more lines are too long
230
dist/docs/resources/js/reference.js
vendored
Normal file
230
dist/docs/resources/js/reference.js
vendored
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
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
|
||||
script.setText(editor.getValue());
|
||||
// Clear scope first, then evaluate a new script.
|
||||
scope.clear();
|
||||
scope.evaluate(script.$);
|
||||
}
|
||||
}
|
||||
|
||||
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(document.location.hash);
|
||||
if (h) scrollToElement(h.substring(1));
|
||||
if (window.paper)
|
||||
paper.load();
|
||||
});
|
||||
Loading…
Reference in a new issue