scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Bump version to 0.22 and include new dist files.

Browse source
This commit is contained in:
Jürg Lehni 2011-11-10 19:19:25 +01:00
parent a6c273c2e9
commit 6effceb9bc
29 changed files with 1520 additions and 827 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
build/preprocess.sh
View file

@ -31,7 +31,7 @@
# stripped Formated but without comments
# compressed Uses UglifyJS to reduce file size
VERSION=0.21
VERSION=0.22
DATE=$(git log -1 --pretty=format:%ad)
COMMAND="./prepro.js -d '{ \"version\": $VERSION, \"date\": \"$DATE\" }' -d '$4' $2"

8
dist/docs/classes/CharacterStyle.html vendored
View file

@ -151,7 +151,7 @@ text.characterStyle = {
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -167,7 +167,7 @@ text.characterStyle = {
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
@ -530,7 +530,7 @@ limit on the ratio of the miter length to the <a href="../classes/PathStyle.html
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -546,7 +546,7 @@ limit on the ratio of the miter length to the <a href="../classes/PathStyle.html
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>

48
dist/docs/classes/Color.html vendored
View file

@ -18,10 +18,10 @@
<h1>Color</h1>
<p>All properties and functions that expect color values accept
instances of the different color classes such as <a href="../classes/RGBColor.html"><tt>RGBColor</tt></a>,
<a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> and <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>, and also accept named colors
instances of the different color classes such as <a href="../classes/RgbColor.html"><tt>RgbColor</tt></a>,
<a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> and <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>, and also accept named colors
and hex values as strings which are then converted to instances of
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> internally.</p>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> internally.</p>
<p>
<b>Example</b> &mdash; Named color values:
</p>
@ -34,7 +34,7 @@ and hex values as strings which are then converted to instances of
var circle = new Path.Circle(new Point(80, 50), 30);
// Pass a color name to the fillColor property, which is internally
// converted to an RGBColor.
// converted to an RgbColor.
circle.fillColor = 'green';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
@ -53,7 +53,7 @@ circle.fillColor = 'green';
var circle = new Path.Circle(new Point(80, 50), 30);
// Pass a hex string to the fillColor property, which is internally
// converted to an RGBColor.
// converted to an RgbColor.
circle.fillColor = '#ff0000';
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
@ -141,7 +141,7 @@ same as those of the supplied one.</p>
</p>
<pre class="code">var color = new RGBColor(1, 0, 0);
<pre class="code">var color = new RgbColor(1, 0, 0);
console.log(color.type); // 'rgb'</pre>
</div>
@ -520,6 +520,40 @@ function onFrame(event) {
</ul>
</div>
</div>
</div>
<h3>HSL Components</h3>
<div id="lightness-member" class="member">
<div id="lightness-link" class="member-link">
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
<div id="lightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
@ -554,7 +588,7 @@ function onFrame(event) {
<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>&nbsp;&mdash;&nbsp;a copy of the color object
<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>&nbsp;&mdash;&nbsp;a copy of the color object
</li>
</ul>

40
dist/docs/classes/CompoundPath.html vendored
View file

@ -1554,6 +1554,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1982,7 +2014,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1998,7 +2030,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
</div>
@ -2356,7 +2388,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -2372,7 +2404,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
</div>

2
dist/docs/classes/GradientStop.html vendored
View file

@ -48,7 +48,7 @@
<tt>color:</tt>
<a href="../classes/Color.html"><tt>Color</tt></a>
&mdash;&nbsp;the color of the stop
&mdash;&nbsp;optional, default: <tt>new RGBColor(0, 0, 0)</tt>
&mdash;&nbsp;optional, default: <tt>new RgbColor(0, 0, 0)</tt>
</li>
<li>

110
dist/docs/classes/GrayColor.html vendored
View file

@ -94,6 +94,43 @@ circle.fillColor = new GrayColor(0.5);
<div class="reference-members"><h2>Properties</h2>
<div id="gray-member" class="member">
<div id="gray-link" class="member-link">
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
</div>
<div id="gray-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of gray in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
@ -133,7 +170,7 @@ circle.fillColor = new GrayColor(0.5);
</p>
<pre class="code">var color = new RGBColor(1, 0, 0);
<pre class="code">var color = new RgbColor(1, 0, 0);
console.log(color.type); // 'rgb'</pre>
</div>
@ -344,41 +381,6 @@ circle.fillColor.blue = 1;
</div>
</div>
</div>
</div>
<h3>Gray Components</h3>
<div id="gray-member" class="member">
<div id="gray-link" class="member-link">
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
</div>
<div id="gray-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of gray in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
@ -512,6 +514,40 @@ function onFrame(event) {
</ul>
</div>
</div>
</div>
<h3>HSL Components</h3>
<div id="lightness-member" class="member">
<div id="lightness-link" class="member-link">
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
<div id="lightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
@ -545,7 +581,7 @@ function onFrame(event) {
<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>&nbsp;&mdash;&nbsp;a copy of the color object
<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>&nbsp;&mdash;&nbsp;a copy of the color object
</li>
</ul>

40
dist/docs/classes/Group.html vendored
View file

@ -759,6 +759,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1187,7 +1219,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1203,7 +1235,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
</div>
@ -1561,7 +1593,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1577,7 +1609,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
</div>

288
dist/docs/classes/HsbColor.html vendored
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>HSBColor</title>
<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">
@ -15,11 +15,11 @@
</head>
<body class="reference">
<div class="reference-class">
<h1>HSBColor</h1>
<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>
<p>An HsbColor object is used to represent any HSB color value.</p>
</div>
@ -29,20 +29,20 @@
<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>
<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>
<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>
<p>Creates an HsbColor object</p>
<ul><b>Parameters:</b>
@ -82,7 +82,7 @@ between <tt>0</tt> and <tt>1</tt>
<p>
<b>Example</b> &mdash; Creating an HSBColor:
<b>Example</b> &mdash; Creating an HsbColor:
</p>
<div class="paperscript split">
@ -92,9 +92,9 @@ between <tt>0</tt> and <tt>1</tt>
// 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
// Create an HsbColor with a hue of 90 degrees, a saturation
// 100% and a brightness of 100%:
circle.fillColor = new HSBColor(90, 1, 1);
circle.fillColor = new HsbColor(90, 1, 1);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
@ -111,6 +111,141 @@ circle.fillColor = new HSBColor(90, 1, 1);
<div class="reference-members"><h2>Properties</h2>
<div id="hue-member" class="member">
<div id="hue-link" class="member-link">
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
</div>
<div id="hue-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The hue of the color as a value in degrees between <tt>0</tt> and
<tt>360</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the hue of a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-1">
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'red';
circle.fillColor.hue += 30;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
<p>
<b>Example</b> &mdash; Hue cycling:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-2">
// Create a rectangle shaped path, using the dimensions
// of the view:
var path = new Path.Rectangle(view.bounds);
path.fillColor = 'red';
function onFrame(event) {
path.fillColor.hue += 0.5;
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
</div>
</div>
</div>
<div id="saturation-member" class="member">
<div id="saturation-link" class="member-link">
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
<div id="saturation-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="brightness-member" class="member">
<div id="brightness-link" class="member-link">
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
</div>
<div id="brightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
@ -150,7 +285,7 @@ circle.fillColor = new HSBColor(90, 1, 1);
</p>
<pre class="code">var color = new RGBColor(1, 0, 0);
<pre class="code">var color = new RgbColor(1, 0, 0);
console.log(color.type); // 'rgb'</pre>
</div>
@ -191,7 +326,7 @@ colors of the different subclasses support alpha values.</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-1">
<script type="text/paperscript" canvas="canvas-3">
var circle = new Path.Circle(new Point(80, 50), 30);
// Fill the circle with red and give it a 20pt green stroke:
@ -204,7 +339,7 @@ circle.style = {
// Make the stroke half transparent:
circle.strokeColor.alpha = 0.5;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>
@ -248,14 +383,14 @@ circle.strokeColor.alpha = 0.5;
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-2">
<script type="text/paperscript" canvas="canvas-4">
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'blue';
// Blue + red = purple:
circle.fillColor.red = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>
@ -297,7 +432,7 @@ circle.fillColor.red = 1;
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-3">
<script type="text/paperscript" canvas="canvas-5">
var circle = new Path.Circle(new Point(80, 50), 30);
// First we set the fill color to red:
@ -306,7 +441,7 @@ circle.fillColor = 'red';
// Red + green = yellow:
circle.fillColor.green = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>
@ -348,7 +483,7 @@ circle.fillColor.green = 1;
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-4">
<script type="text/paperscript" canvas="canvas-6">
var circle = new Path.Circle(new Point(80, 50), 30);
// First we set the fill color to red:
@ -357,7 +492,7 @@ circle.fillColor = 'red';
// Red + blue = purple:
circle.fillColor.blue = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
</div>
@ -402,124 +537,25 @@ circle.fillColor.blue = 1;
</div>
<h3>HSB Components</h3>
<h3>HSL 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 id="lightness-member" class="member">
<div id="lightness-link" class="member-link">
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
<div id="hue-description" class="member-description hidden">
<div id="lightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The hue of the color as a value in degrees between <tt>0</tt> and
<tt>360</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the hue of a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-5">
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'red';
circle.fillColor.hue += 30;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>
<p>
<b>Example</b> &mdash; Hue cycling:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-6">
// Create a rectangle shaped path, using the dimensions
// of the view:
var path = new Path.Rectangle(view.bounds);
path.fillColor = 'red';
function onFrame(event) {
path.fillColor.hue += 0.5;
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
</div>
</div>
</div>
</div>
<div id="saturation-member" class="member">
<div id="saturation-link" class="member-link">
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
<div id="saturation-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="brightness-member" class="member">
<div id="brightness-link" class="member-link">
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
</div>
<div id="brightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
@ -562,7 +598,7 @@ function onFrame(event) {
<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>&nbsp;&mdash;&nbsp;a copy of the color object
<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>&nbsp;&mdash;&nbsp;a copy of the color object
</li>
</ul>

224
dist/docs/classes/HslColor.html vendored
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>HSLColor</title>
<title>HslColor</title>
<base target="classFrame">
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
@ -15,11 +15,11 @@
</head>
<body class="reference">
<div class="reference-class">
<h1>HSLColor</h1>
<h1>HslColor</h1>
<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
<p>An HSLColor object is used to represent any HSL color value.</p>
<p>An HslColor object is used to represent any HSL color value.</p>
</div>
@ -29,20 +29,20 @@
<div id="hslcolor-hue-saturation-lightness-member" class="member">
<div id="hslcolor-hue-saturation-lightness-link" class="member-link">
<a name="hslcolor-hue-saturation-lightness" href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HSLColor</b>(hue, saturation, lightness[, alpha])</tt></a>
<a name="hslcolor-hue-saturation-lightness" href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
</div>
<div id="hslcolor-hue-saturation-lightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HSLColor</b>(hue, saturation, lightness[, alpha])</tt></a>
<a href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hslcolor-hue-saturation-lightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Creates an HSLColor object</p>
<p>Creates an HslColor object</p>
<ul><b>Parameters:</b>
@ -82,7 +82,7 @@ between <tt>0</tt> and <tt>1</tt>
<p>
<b>Example</b> &mdash; Creating an HSLColor:
<b>Example</b> &mdash; Creating an HslColor:
</p>
<div class="paperscript split">
@ -92,9 +92,9 @@ between <tt>0</tt> and <tt>1</tt>
// with a radius of 30:
var circle = new Path.Circle(new Point(80, 50), 30);
// Create an HSLColor with a hue of 90 degrees, a saturation
// Create an HslColor with a hue of 90 degrees, a saturation
// 100% and a lightness of 50%:
circle.fillColor = new HSLColor(90, 1, 0.5);
circle.fillColor = new HslColor(90, 1, 0.5);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
@ -111,6 +111,107 @@ circle.fillColor = new HSLColor(90, 1, 0.5);
<div class="reference-members"><h2>Properties</h2>
<div id="hue-member" class="member">
<div id="hue-link" class="member-link">
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
</div>
<div id="hue-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The hue of the color as a value in degrees between <tt>0</tt> and
<tt>360</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="saturation-member" class="member">
<div id="saturation-link" class="member-link">
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
<div id="saturation-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="lightness-member" class="member">
<div id="lightness-link" class="member-link">
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
<div id="lightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
</div>
@ -150,7 +251,7 @@ circle.fillColor = new HSLColor(90, 1, 0.5);
</p>
<pre class="code">var color = new RGBColor(1, 0, 0);
<pre class="code">var color = new RgbColor(1, 0, 0);
console.log(color.type); // 'rgb'</pre>
</div>
@ -396,107 +497,6 @@ circle.fillColor.blue = 1;
</ul>
</div>
</div>
</div>
<h3>HSB Components</h3>
<div id="hue-member" class="member">
<div id="hue-link" class="member-link">
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
</div>
<div id="hue-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The hue of the color as a value in degrees between <tt>0</tt> and
<tt>360</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the hue of a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-5">
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'red';
circle.fillColor.hue += 30;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>
<p>
<b>Example</b> &mdash; Hue cycling:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-6">
// Create a rectangle shaped path, using the dimensions
// of the view:
var path = new Path.Rectangle(view.bounds);
path.fillColor = 'red';
function onFrame(event) {
path.fillColor.hue += 0.5;
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
</div>
</div>
</div>
</div>
<div id="saturation-member" class="member">
<div id="saturation-link" class="member-link">
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
<div id="saturation-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
@ -562,7 +562,7 @@ function onFrame(event) {
<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>&nbsp;&mdash;&nbsp;a copy of the color object
<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>&nbsp;&mdash;&nbsp;a copy of the color object
</li>
</ul>

40
dist/docs/classes/Item.html vendored
View file

@ -623,6 +623,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1051,7 +1083,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1067,7 +1099,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>
@ -1425,7 +1457,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1441,7 +1473,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
</div>

40
dist/docs/classes/Layer.html vendored
View file

@ -718,6 +718,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1146,7 +1178,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1162,7 +1194,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>
@ -1520,7 +1552,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1536,7 +1568,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
</div>

151
dist/docs/classes/Matrix.html vendored
View file

@ -338,6 +338,40 @@ to {@link #initialize(a, c, b, d, tx, ty)}.</p>
</ul>
</div>
</div>
</div>
<div id="rotation-member" class="member">
<div id="rotation-link" class="member-link">
<a name="rotation" href="#" onClick="return toggleMember('rotation', false);"><tt><b>rotation</b></tt></a>
</div>
<div id="rotation-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('rotation', false);"><tt><b>rotation</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotation', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The rotation angle of the matrix. If a non-uniform rotation is applied as
a result of a shear() or scale() command, undefined is returned, as the
resulting transformation cannot be expressed in one rotation angle.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
@ -1008,24 +1042,22 @@ anchor point.</p>
</div>
<div id="transform-point-src-srcOff-dst-dstOff-numPts-member" class="member">
<div id="transform-point-src-srcOff-dst-dstOff-numPts-link" class="member-link">
<a name="transform-point-src-srcOff-dst-dstOff-numPts" href="#" onClick="return toggleMember('transform-point-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(point, src, srcOff, dst, dstOff, numPts)</tt></a>
<div id="transform-point-member" class="member">
<div id="transform-point-link" class="member-link">
<a name="transform-point" href="#" onClick="return toggleMember('transform-point', false);"><tt><b>transform</b>(point)</tt></a>
</div>
<div id="transform-point-src-srcOff-dst-dstOff-numPts-description" class="member-description hidden">
<div id="transform-point-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('transform-point-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(point, src, srcOff, dst, dstOff, numPts)</tt></a>
<a href="#" onClick="return toggleMember('transform-point', false);"><tt><b>transform</b>(point)</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-point-src-srcOff-dst-dstOff-numPts', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-point', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Transforms a point or an array of coordinates by this matrix and returns
the result. If an array is transformed, the the result is stored into a
destination array.</p>
<p>Transforms a point and returns the result.</p>
<ul><b>Parameters:</b>
@ -1036,6 +1068,44 @@ destination array.</p>
</li>
</ul>
<ul><b>Returns:</b>
<li>
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The transformed point
</li>
</ul>
</div>
</div>
</div>
<div id="transform-src-srcOff-dst-dstOff-numPts-member" class="member">
<div id="transform-src-srcOff-dst-dstOff-numPts-link" class="member-link">
<a name="transform-src-srcOff-dst-dstOff-numPts" href="#" onClick="return toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(src, srcOff, dst, dstOff, numPts)</tt></a>
</div>
<div id="transform-src-srcOff-dst-dstOff-numPts-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(src, srcOff, dst, dstOff, numPts)</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Transforms an array of coordinates by this matrix and stores the results
into the destination array, which is also returned.</p>
<ul><b>Parameters:</b>
<li>
<tt>src:</tt>
<tt>Number</tt>
@ -1077,35 +1147,10 @@ destination array.</p>
</ul>
</div>
</div>
</div>
<div id="getdeterminant-member" class="member">
<div id="getdeterminant-link" class="member-link">
<a name="getdeterminant" href="#" onClick="return toggleMember('getdeterminant', false);"><tt><b>getDeterminant</b>()</tt></a>
</div>
<div id="getdeterminant-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('getdeterminant', false);"><tt><b>getDeterminant</b>()</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdeterminant', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<ul><b>Returns:</b>
<li>
<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;The determinant of this transform
<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;The dst array, containing the transformed coordinates.
</li>
</ul>
@ -1117,35 +1162,35 @@ destination array.</p>
</div>
<div id="getrotation-member" class="member">
<div id="getrotation-link" class="member-link">
<a name="getrotation" href="#" onClick="return toggleMember('getrotation', false);"><tt><b>getRotation</b>()</tt></a>
<div id="inversetransform-point-member" class="member">
<div id="inversetransform-point-link" class="member-link">
<a name="inversetransform-point" href="#" onClick="return toggleMember('inversetransform-point', false);"><tt><b>inverseTransform</b>(point)</tt></a>
</div>
<div id="getrotation-description" class="member-description hidden">
<div id="inversetransform-point-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('getrotation', false);"><tt><b>getRotation</b>()</tt></a>
<a href="#" onClick="return toggleMember('inversetransform-point', false);"><tt><b>inverseTransform</b>(point)</tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getrotation', false);"></div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('inversetransform-point', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>Returns the rotation angle of the matrix. If a non-uniform
rotation is applied as a result of a shear() or scale() command,
undefined is returned, as the resulting transformation cannot be
expressed in one rotation angle</p>
<p>Inverse transforms a point and returns the result.</p>
<ul><b>Returns:</b>
<li>
<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;The rotation angle of the matrix
</li>
</ul>
<ul><b>Parameters:</b>
<li>
<tt>point:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;The point to be transformed
</li>
</ul>
</div>

40
dist/docs/classes/Path.html vendored
View file

@ -3870,6 +3870,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -4298,7 +4330,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -4314,7 +4346,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
</div>
@ -4672,7 +4704,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -4688,7 +4720,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
</div>

40
dist/docs/classes/PathItem.html vendored
View file

@ -1451,6 +1451,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1879,7 +1911,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1895,7 +1927,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
</div>
@ -2253,7 +2285,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -2269,7 +2301,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
</div>

10
dist/docs/classes/PathStyle.html vendored
View file

@ -33,7 +33,7 @@ apply it to a series of items:</p>
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-0">
var circleStyle = {
fillColor: new RGBColor(1, 0, 0),
fillColor: new RgbColor(1, 0, 0),
strokeColor: 'black',
strokeWidth: 5
};
@ -77,7 +77,7 @@ path.style = circleStyle;
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -93,7 +93,7 @@ path.style = circleStyle;
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
@ -456,7 +456,7 @@ limit on the ratio of the miter length to the <a href="../classes/PathStyle.html
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -472,7 +472,7 @@ limit on the ratio of the miter length to the <a href="../classes/PathStyle.html
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
</div>

40
dist/docs/classes/PlacedItem.html vendored
View file

@ -665,6 +665,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1093,7 +1125,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1109,7 +1141,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>
@ -1467,7 +1499,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1483,7 +1515,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
</div>

40
dist/docs/classes/PlacedSymbol.html vendored
View file

@ -751,6 +751,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1179,7 +1211,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1195,7 +1227,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
</div>
@ -1553,7 +1585,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1569,7 +1601,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
</div>

40
dist/docs/classes/PointText.html vendored
View file

@ -714,6 +714,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1142,7 +1174,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1158,7 +1190,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>
@ -1516,7 +1548,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1532,7 +1564,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
</div>

2
dist/docs/classes/Project.html vendored
View file

@ -504,7 +504,7 @@ type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../clas
<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
items, taking into account stroke width.</p>
<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
<p><b>options.segments:</b> <tt>Boolean</tt> - Hit test for
<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>

46
dist/docs/classes/Raster.html vendored
View file

@ -393,7 +393,7 @@ effects.</p>
<ul><b>Returns:</b>
<li>
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a></tt>&nbsp;&mdash;&nbsp;the average color contained in the area covered by the
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the average color contained in the area covered by the
specified path, rectangle or point.
</li>
@ -447,7 +447,7 @@ specified path, rectangle or point.
<ul><b>Returns:</b>
<li>
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
</li>
</ul>
@ -491,7 +491,7 @@ specified path, rectangle or point.
<ul><b>Returns:</b>
<li>
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
</li>
</ul>
@ -1335,6 +1335,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1763,7 +1795,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1779,7 +1811,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
</div>
@ -2137,7 +2169,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -2153,7 +2185,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
</div>

364
dist/docs/classes/RgbColor.html vendored
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8">
<title>RGBColor</title>
<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">
@ -15,11 +15,11 @@
</head>
<body class="reference">
<div class="reference-class">
<h1>RGBColor</h1>
<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>
<p>An RgbColor object is used to represent any RGB color value.</p>
</div>
@ -29,20 +29,20 @@
<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>
<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>
<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>
<p>Creates an RgbColor object</p>
<ul><b>Parameters:</b>
@ -82,7 +82,7 @@ between <tt>0</tt> and <tt>1</tt>
<p>
<b>Example</b> &mdash; Creating an RGBColor:
<b>Example</b> &mdash; Creating an RgbColor:
</p>
<div class="paperscript split">
@ -93,7 +93,7 @@ between <tt>0</tt> and <tt>1</tt>
var circle = new Path.Circle(new Point(80, 50), 30);
// 100% red, 0% blue, 50% blue:
circle.fillColor = new RGBColor(1, 0, 0.5);
circle.fillColor = new RgbColor(1, 0, 0.5);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
</div>
@ -110,6 +110,161 @@ circle.fillColor = new RGBColor(1, 0, 0.5);
<div class="reference-members"><h2>Properties</h2>
<div id="red-member" class="member">
<div id="red-link" class="member-link">
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
</div>
<div id="red-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of red in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the amount of red in a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-1">
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'blue';
// Blue + red = purple:
circle.fillColor.red = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
</div>
</div>
</div>
<div id="green-member" class="member">
<div id="green-link" class="member-link">
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
</div>
<div id="green-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of green in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the amount of green in a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-2">
var circle = new Path.Circle(new Point(80, 50), 30);
// First we set the fill color to red:
circle.fillColor = 'red';
// Red + green = yellow:
circle.fillColor.green = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
</div>
</div>
</div>
<div id="blue-member" class="member">
<div id="blue-link" class="member-link">
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
</div>
<div id="blue-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of blue in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the amount of blue in a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-3">
var circle = new Path.Circle(new Point(80, 50), 30);
// First we set the fill color to red:
circle.fillColor = 'red';
// Red + blue = purple:
circle.fillColor.blue = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>
</div>
</div>
</div>
</div>
@ -149,7 +304,7 @@ circle.fillColor = new RGBColor(1, 0, 0.5);
</p>
<pre class="code">var color = new RGBColor(1, 0, 0);
<pre class="code">var color = new RgbColor(1, 0, 0);
console.log(color.type); // 'rgb'</pre>
</div>
@ -190,7 +345,7 @@ colors of the different subclasses support alpha values.</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-1">
<script type="text/paperscript" canvas="canvas-4">
var circle = new Path.Circle(new Point(80, 50), 30);
// Fill the circle with red and give it a 20pt green stroke:
@ -203,159 +358,6 @@ circle.style = {
// Make the stroke half transparent:
circle.strokeColor.alpha = 0.5;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
</div>
</div>
</div>
</div>
<h3>RGB Components</h3>
<div id="red-member" class="member">
<div id="red-link" class="member-link">
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
</div>
<div id="red-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of red in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the amount of red in a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-2">
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'blue';
// Blue + red = purple:
circle.fillColor.red = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
</div>
</div>
</div>
</div>
<div id="green-member" class="member">
<div id="green-link" class="member-link">
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
</div>
<div id="green-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of green in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the amount of green in a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-3">
var circle = new Path.Circle(new Point(80, 50), 30);
// First we set the fill color to red:
circle.fillColor = 'red';
// Red + green = yellow:
circle.fillColor.green = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
</div>
</div>
</div>
</div>
<div id="blue-member" class="member">
<div id="blue-link" class="member-link">
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
</div>
<div id="blue-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The amount of blue in the color as a value between <tt>0</tt> and
<tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
<p>
<b>Example</b> &mdash; Changing the amount of blue in a color:
</p>
<div class="paperscript split">
<div class="button">Run</div>
<script type="text/paperscript" canvas="canvas-4">
var circle = new Path.Circle(new Point(80, 50), 30);
// First we set the fill color to red:
circle.fillColor = 'red';
// Red + blue = purple:
circle.fillColor.blue = 1;
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>
@ -528,6 +530,40 @@ function onFrame(event) {
</ul>
</div>
</div>
</div>
<h3>HSL Components</h3>
<div id="lightness-member" class="member">
<div id="lightness-link" class="member-link">
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
<div id="lightness-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
<ul><b>Type:</b>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
@ -561,7 +597,7 @@ function onFrame(event) {
<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>&nbsp;&mdash;&nbsp;a copy of the color object
<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>&nbsp;&mdash;&nbsp;a copy of the color object
</li>
</ul>

40
dist/docs/classes/TextItem.html vendored
View file

@ -772,6 +772,38 @@ already contained within a clipping group.</p>
</div>
<div id="layer-member" class="member">
<div id="layer-link" class="member-link">
<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
<div id="layer-description" class="member-description hidden">
<div class="member-header">
<div class="member-title">
<div class="member-link">
<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
</div>
</div>
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
<div class="clear"></div>
</div>
<div class="member-text">
<p>The layer that this item is contained within.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/Layer.html"><tt>Layer</tt></a>
</li>
</ul>
</div>
</div>
</div>
<div id="parent-member" class="member">
<div id="parent-link" class="member-link">
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
@ -1200,7 +1232,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1216,7 +1248,7 @@ accessing <tt>item.children[item.children.length - 1]</tt>.</p>
var circle = new Path.Circle(new Point(80, 50), 35);
// Set its stroke color to RGB red:
circle.strokeColor = new RGBColor(1, 0, 0);
circle.strokeColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
</div>
@ -1574,7 +1606,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
<ul><b>Type:</b>
<li>
<a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a> / <a href="../classes/HSLColor.html"><tt>HSLColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
</li>
</ul>
@ -1590,7 +1622,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
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);
circle.fillColor = new RgbColor(1, 0, 0);
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
</div>

6
dist/docs/classes/index.html vendored
View file

@ -55,10 +55,10 @@
<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/RgbColor.html">RgbColor</a></li>
<li><a href="../classes/GrayColor.html">GrayColor</a></li>
<li><a href="../classes/HSBColor.html">HSBColor</a></li>
<li><a href="../classes/HSLColor.html">HSLColor</a></li>
<li><a href="../classes/HsbColor.html">HsbColor</a></li>
<li><a href="../classes/HslColor.html">HslColor</a></li>
</ul>
<li>
<h2>Gradients</h2>

54
dist/docs/resources/css/codemirror.css vendored
View file

@ -92,24 +92,50 @@ span.CodeMirror-selected {
span.cm-keyword {
color: #ff7800;
}
span.cm-number,
span.cm-atom {
span.cm-atom,
span.cm-number {
color: #3b5bb5;
}
span.cm-string {
color: #409b1c;
}
span.cm-comment {
color: #8c868f;
}
span.cm-property {
color: #000;
}
span.cm-variable {
color: #000;
}
span.cm-def,
span.cm-variable-2,
span.cm-variable-3 {
color: #3a4a64;
}
span.cm-variable {
color: #000;
}
span.cm-property {
color: #000;
}
span.cm-operator {
color: #000;
}
span.cm-comment {
color: #8c868f;
}
span.cm-string {
color: #409b1c;
}
span.cm-meta {
color: #555;
}
span.cm-error {
color: #f30;
}
span.cm-qualifier {
color: #555;
}
span.cm-builtin {
color: #30a;
}
span.cm-bracket {
color: #cc7;
}
span.cm-tag {
font-weight: bold;
color: #3b5bb5;
}
span.cm-attribute {
font-style: italic;
color: #3b5bb5;
}

25
dist/docs/resources/css/paperscript.css vendored
View file

@ -1,4 +1,5 @@
.paperscript .button {
.paperscript .button,
.paperscript .explain {
display: none;
position: relative; /* position (top / right) relative to paperscriptcontainer */
float: right; /* align right as block */
@ -6,18 +7,23 @@
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;
top: 8px; /* margin to top */
}
.paperscript .source {
overflow: auto;
border: 1px solid #999;
.paperscript .button {
right: 8px; /* margin to right */
background: #eee;
}
.paperscript .explain {
display: block;
right: 64px; /* margin to right */
background: #e3f4fc;
margin-bottom: -36px; /* (height) + 2 * 2px (padding) */
}
.paperscript:hover .button {
@ -29,6 +35,11 @@
cursor: pointer;
}
.paperscript .source {
overflow: auto;
border: 1px solid #999;
}
.paperscript .CodeMirror {
margin: 0 !important; /* Override any potential margins again */
}

7
dist/docs/resources/css/reference.css vendored
View file

@ -17,12 +17,6 @@
.reference a tt {
line-height: 18px;
}
/*
.reference a tt,
.reference a tt b {
padding-bottom: 1px;
}
*/
.reference p {
margin: 0 0 16px 0;
@ -58,6 +52,7 @@
* html .reference-packages img {
margin-top: 5px;
}
.reference-packages li {
list-style: none;
list-style-image: none; /* needed for ie 6 */

2
dist/docs/resources/js/codemirror.js vendored
View file

File diff suppressed because one or more lines are too long

299
dist/docs/resources/js/paper.js vendored
View file

@ -1,27 +1,27 @@
/*!
* Paper.js v0.21
* Paper.js v0.22
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http:
* http:
* http://paperjs.org/
* http://scriptographer.org/
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http:
* http://lehni.org/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*
* Date: Tue Aug 2 10:08:08 2011 +0100
* Date: Thu Nov 10 18:30:18 2011 +0100
*
***
*
* Bootstrap.js JavaScript Framework.
* http:
* http://bootstrapjs.org/
*
* Copyright (c) 2006 - 2011 Juerg Lehni
* http:
* http://lehni.org/
*
* Distributed under the MIT license.
*
@ -31,14 +31,14 @@
*
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
* http:
* http://marijn.haverbeke.nl/parse-js/
*
* Ported by to JavaScript by Mihai Bazon
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
* http:
* http://mihai.bazon.net/blog/
*
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
* http:
* http://lehni.org/
*
* Distributed under the BSD license.
*/
@ -409,7 +409,7 @@ var PaperScope = this.PaperScope = Base.extend({
PaperScope._scopes[this._id] = this;
},
version: 0.21,
version: 0.22,
evaluate: function(code) {
var res = PaperScript.evaluate(code, this);
@ -804,7 +804,9 @@ var LinkedPoint = Point.extend({
},
statics: {
create: function(owner, setter, x, y) {
create: function(owner, setter, x, y, dontLink) {
if (dontLink)
return Point.create(x, y);
var point = new LinkedPoint(LinkedPoint.dont);
point._x = x;
point._y = y;
@ -893,7 +895,7 @@ var Size = this.Size = Base.extend({
},
isZero: function() {
return this.width == 0 && this.width == 0;
return this.width == 0 && this.height == 0;
},
isNaN: function() {
@ -959,13 +961,15 @@ var LinkedSize = Size.extend({
},
statics: {
create: function(owner, setter, width, height) {
var point = new LinkedSize(LinkedSize.dont);
point._width = width;
point._height = height;
point._owner = owner;
point._setter = setter;
return point;
create: function(owner, setter, width, height, dontLink) {
if (dontLink)
return Size.create(width, height);
var size = new LinkedSize(LinkedSize.dont);
size._width = width;
size._height = height;
size._owner = owner;
size._setter = setter;
return size;
}
}
});
@ -1020,7 +1024,8 @@ var Rectangle = this.Rectangle = Base.extend({
},
getPoint: function() {
return LinkedPoint.create(this, 'setPoint', this.x, this.y);
return LinkedPoint.create(this, 'setPoint', this.x, this.y,
arguments[0]);
},
setPoint: function(point) {
@ -1031,7 +1036,8 @@ var Rectangle = this.Rectangle = Base.extend({
},
getSize: function() {
return LinkedSize.create(this, 'setSize', this.width, this.height);
return LinkedSize.create(this, 'setSize', this.width, this.height,
arguments[0]);
},
setSize: function(size) {
@ -1099,7 +1105,7 @@ var Rectangle = this.Rectangle = Base.extend({
getCenter: function() {
return LinkedPoint.create(this, 'setCenter',
this.getCenterX(), this.getCenterY());
this.getCenterX(), this.getCenterY(), arguments[0]);
},
setCenter: function(point) {
@ -1223,7 +1229,7 @@ var Rectangle = this.Rectangle = Base.extend({
set = 'set' + part;
this[get] = function() {
return LinkedPoint.create(this, set,
this[getX](), this[getY]());
this[getX](), this[getY](), arguments[0]);
};
this[set] = function(point) {
point = Point.read(arguments);
@ -1323,7 +1329,7 @@ var Matrix = this.Matrix = Base.extend({
return this;
},
scale: function(hor, ver , center) {
scale: function( hor, ver, center) {
if (arguments.length < 2 || typeof ver === 'object') {
center = Point.read(arguments, 1);
ver = hor;
@ -1354,7 +1360,7 @@ var Matrix = this.Matrix = Base.extend({
Matrix.getRotateInstance.apply(Matrix, arguments));
},
shear: function(hor, ver, center) {
shear: function( hor, ver, center) {
if (arguments.length < 2 || typeof ver === 'object') {
center = Point.read(arguments, 1);
ver = hor;
@ -1471,8 +1477,30 @@ var Matrix = this.Matrix = Base.extend({
max[0] - min[0], max[1] - min[1]);
},
getDeterminant: function() {
return this._a * this._d - this._b * this._c;
inverseTransform: function(point) {
return this._inverseTransform(Point.read(arguments));
},
_getDeterminant: function() {
var det = this._a * this._d - this._b * this._c;
return isFinite(det) && Math.abs(det) > Numerical.EPSILON
&& isFinite(this._tx) && isFinite(this._ty)
? det : null;
},
_inverseTransform: function(point, dest, dontNotify) {
var det = this._getDeterminant();
if (!det)
return null;
var x = point.x - this._tx,
y = point.y - this._ty;
if (!dest)
dest = new Point(Point.dont);
return dest.set(
(x * this._d - y * this._b) / det,
(y * this._a - x * this._c) / det,
dontNotify
);
},
getTranslation: function() {
@ -1498,28 +1526,22 @@ var Matrix = this.Matrix = Base.extend({
},
isInvertible: function() {
var det = this.getDeterminant();
return isFinite(det) && det != 0 && isFinite(this._tx)
&& isFinite(this._ty);
return !!this._getDeterminant();
},
isSingular: function() {
return !this.isInvertible();
return !this._getDeterminant();
},
createInverse: function() {
var det = this.getDeterminant();
if (isFinite(det) && det != 0 && isFinite(this._tx)
&& isFinite(this._ty)) {
return Matrix.create(
var det = this._getDeterminant();
return det && Matrix.create(
this._d / det,
-this._c / det,
-this._b / det,
this._a / det,
(this._b * this._ty - this._d * this._tx) / det,
(this._c * this._tx - this._a * this._ty) / det);
}
return null;
},
createShiftless: function() {
@ -1818,11 +1840,20 @@ var Item = this.Item = Base.extend({
delete this._position;
}
if (flags & ChangeFlag.APPEARANCE) {
if (this._project)
this._project._needsRedraw();
this._project._needsRedraw();
}
if (this._parentSymbol)
this._parentSymbol._changed(flags);
if (this._project._changes) {
var entry = this._project._changesById[this._id];
if (entry) {
entry.flags |= flags;
} else {
entry = { item: this, flags: flags };
this._project._changesById[this._id] = entry;
this._project._changes.push(entry);
}
}
},
getId: function() {
@ -1972,6 +2003,15 @@ var Item = this.Item = Base.extend({
}
},
getLayer: function() {
var parent = this;
while (parent = parent._parent) {
if (parent instanceof Layer)
return parent;
}
return null;
},
getParent: function() {
return this._parent;
},
@ -2048,8 +2088,7 @@ var Item = this.Item = Base.extend({
matrix.applyToContext(ctx);
this.draw(ctx, {});
var raster = new Raster(canvas);
raster.setPosition(this.getPosition());
raster.scale(1 / scale);
raster.setBounds(bounds);
return raster;
},
@ -2855,7 +2894,7 @@ var Raster = this.Raster = PlacedItem.extend({
channels = new Array(4);
for (var i = 0; i < 4; i++)
channels[i] = pixels[i] / 255;
return RGBColor.read(channels);
return RgbColor.read(channels);
},
setPixel: function(point, color) {
@ -3102,6 +3141,7 @@ var Segment = this.Segment = Base.extend({
if (selected)
selection[0] = false;
selection[index] = selected;
path._changed(Change.ATTRIBUTE);
}
}
this._selectionState = (selection[0] ? SelectionState.POINT : 0)
@ -3241,6 +3281,10 @@ var SegmentPoint = Point.extend({
this._owner._changed(this);
},
isZero: function() {
return this._x == 0 && this._y == 0;
},
setSelected: function(selected) {
this._owner._setSelected(this, selected);
},
@ -3742,7 +3786,7 @@ var Curve = this.Curve = Base.extend({
return [0.5 * (w[0].x + w[5].x)];
if (isFlatEnough(w)) {
var line = new Line(w[0], w[5], true);
return [ line.vector.getLength(true) < Numerical.EPSILON
return [ line.vector.getLength(true) <= Numerical.EPSILON
? line.point.x
: xAxis.intersect(line).x ];
}
@ -4427,8 +4471,8 @@ var Path = this.Path = PathItem.extend({
ctx.rect(point._x - 1, point._y - 1, 2, 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.restore();
}
ctx.restore();
}
}
@ -5051,13 +5095,17 @@ Path.inject({ statics: new function() {
Rectangle: function(rect) {
rect = Rectangle.read(arguments);
var path = new Path(),
corners = ['getBottomLeft', 'getTopLeft', 'getTopRight',
'getBottomRight'],
segments = new Array(4);
for (var i = 0; i < 4; i++)
segments[i] = new Segment(rect[corners[i]]());
path._add(segments);
var left = rect.x,
top = rect.y
right = left + rect.width,
bottom = top + rect.height,
path = new Path();
path._add([
new Segment(Point.create(left, bottom)),
new Segment(Point.create(left, top)),
new Segment(Point.create(right, top)),
new Segment(Point.create(right, bottom))
]);
path._closed = true;
return path;
},
@ -5070,13 +5118,13 @@ Path.inject({ statics: new function() {
rect = Rectangle.read(arguments, 0, 4);
size = Size.read(arguments, 4, 2);
}
size = Size.min(size, rect.getSize().divide(2));
size = Size.min(size, rect.getSize(true).divide(2));
var path = new Path(),
uSize = size.multiply(kappa * 2),
bl = rect.getBottomLeft(),
tl = rect.getTopLeft(),
tr = rect.getTopRight(),
br = rect.getBottomRight();
bl = rect.getBottomLeft(true),
tl = rect.getTopLeft(true),
tr = rect.getTopRight(true),
br = rect.getBottomRight(true);
path._add([
new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
@ -5097,13 +5145,13 @@ Path.inject({ statics: new function() {
Oval: function(rect) {
rect = Rectangle.read(arguments);
var path = new Path(),
topLeft = rect.getTopLeft(),
size = new Size(rect.width, rect.height),
point = rect.getPoint(true),
size = rect.getSize(true),
segments = new Array(4);
for (var i = 0; i < 4; i++) {
var segment = ovalSegments[i];
segments[i] = new Segment(
segment._point.multiply(size).add(topLeft),
segment._point.multiply(size).add(point),
segment._handleIn.multiply(size),
segment._handleOut.multiply(size)
);
@ -5121,7 +5169,7 @@ Path.inject({ statics: new function() {
center = Point.read(arguments, 0, 1);
}
return Path.Oval(new Rectangle(center.subtract(radius),
new Size(radius * 2, radius * 2)));
Size.create(radius * 2, radius * 2)));
},
Arc: function(from, through, to) {
@ -5583,9 +5631,8 @@ var TextItem = this.TextItem = Item.extend({
var PointText = this.PointText = TextItem.extend({
initialize: function(point) {
this.base();
var point = Point.read(arguments);
this._point = LinkedPoint.create(this, 'setPoint', point.x, point.y);
this._matrix = new Matrix().translate(point);
this._point = Point.read(arguments).clone();
this._matrix = new Matrix().translate(this._point);
},
clone: function() {
@ -5595,16 +5642,16 @@ var PointText = this.PointText = TextItem.extend({
},
getPoint: function() {
return this._point;
return LinkedPoint.create(this, 'setPoint',
this._point.x, this._point.y);
},
setPoint: function(point) {
this._transform(new Matrix().translate(
Point.read(arguments).subtract(this._point)));
this.translate(Point.read(arguments).subtract(this._point));
},
getPosition: function() {
return this._point;
return this.getPoint();
},
setPosition: function(point) {
@ -5613,7 +5660,7 @@ var PointText = this.PointText = TextItem.extend({
_transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
matrix._transformPoint(this._point, this._point, true);
matrix._transformPoint(this._point, this._point);
},
draw: function(ctx) {
@ -5771,7 +5818,7 @@ var Color = this.Color = Base.extend(new function() {
var colorCache = {},
colorContext;
function nameToRGBColor(name) {
function nameToRgbColor(name) {
var color = colorCache[name];
if (color)
return color.clone();
@ -5785,10 +5832,10 @@ var Color = this.Color = Base.extend(new function() {
colorContext.fillRect(0, 0, 1, 1);
var data = colorContext.getImageData(0, 0, 1, 1).data,
rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
return (colorCache[name] = RGBColor.read(rgb)).clone();
return (colorCache[name] = RgbColor.read(rgb)).clone();
}
function hexToRGBColor(string) {
function hexToRgbColor(string) {
var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
if (hex.length >= 4) {
var rgb = new Array(3);
@ -5797,7 +5844,7 @@ var Color = this.Color = Base.extend(new function() {
rgb[i] = parseInt(channel.length == 1
? channel + channel : channel, 16) / 255;
}
return RGBColor.read(rgb);
return RgbColor.read(rgb);
}
}
@ -5824,7 +5871,7 @@ var Color = this.Color = Base.extend(new function() {
: (r - g) / delta + 4) * 60,
s = max == 0 ? 0 : delta / max,
v = max;
return new HSBColor(h, s, v, color._alpha);
return new HsbColor(h, s, v, color._alpha);
},
'hsb-rgb': function(color) {
@ -5840,7 +5887,7 @@ var Color = this.Color = Base.extend(new function() {
b * (1 - s * f),
b * (1 - s * (1 - f))
];
return new RGBColor(v[i[0]], v[i[1]], v[i[2]], color._alpha);
return new RgbColor(v[i[0]], v[i[1]], v[i[2]], color._alpha);
},
'rgb-hsl': function(color) {
@ -5850,15 +5897,16 @@ var Color = this.Color = Base.extend(new function() {
max = Math.max(r, g, b),
min = Math.min(r, g, b),
delta = max - min,
h = delta == 0 ? 0
achromatic = delta == 0,
h = achromatic ? 0
: ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
: max == g ? (b - r) / delta + 2
: (r - g) / delta + 4) * 60,
l = (max + min) / 2,
s = l < 0.5
? delta / (max + min)
: delta / (2 - max - min);
return new HSLColor(h, s, l, color._alpha);
s = achromatic ? 0 : l < 0.5
? delta / (max + min)
: delta / (2 - max - min);
return new HslColor(h, s, l, color._alpha);
},
'hsl-rgb': function(color) {
@ -5867,7 +5915,7 @@ var Color = this.Color = Base.extend(new function() {
l = color._lightness,
t1, t2, c;
if (s == 0)
return new RGBColor(l, l, l, color._alpha);
return new RgbColor(l, l, l, color._alpha);
var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
t1 = 2 * l - t2,
@ -5884,7 +5932,7 @@ var Color = this.Color = Base.extend(new function() {
? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
: t1;
}
return new RGBColor(c[0], c[1], c[2], color._alpha);
return new RgbColor(c[0], c[1], c[2], color._alpha);
},
'rgb-gray': function(color) {
@ -5894,15 +5942,15 @@ var Color = this.Color = Base.extend(new function() {
'gray-rgb': function(color) {
var comp = 1 - color._gray;
return new RGBColor(comp, comp, comp, color._alpha);
return new RgbColor(comp, comp, comp, color._alpha);
},
'gray-hsb': function(color) {
return new HSBColor(0, 0, 1 - color._gray, color._alpha);
return new HsbColor(0, 0, 1 - color._gray, color._alpha);
},
'gray-hsl': function(color) {
return new HSLColor(0, 0, 1 - color._gray, color._alpha);
return new HslColor(0, 0, 1 - color._gray, color._alpha);
}
};
@ -5915,23 +5963,23 @@ var Color = this.Color = Base.extend(new function() {
if (typeof arg === 'object' && !isArray) {
if (!type) {
return arg.red !== undefined
? new RGBColor(arg.red, arg.green, arg.blue, arg.alpha)
? new RgbColor(arg.red, arg.green, arg.blue, arg.alpha)
: arg.gray !== undefined
? new GrayColor(arg.gray, arg.alpha)
: arg.lightness !== undefined
? new HSLColor(arg.hue, arg.saturation, arg.lightness,
? new HslColor(arg.hue, arg.saturation, arg.lightness,
arg.alpha)
: arg.hue !== undefined
? new HSBColor(arg.hue, arg.saturation, arg.brightness,
? new HsbColor(arg.hue, arg.saturation, arg.brightness,
arg.alpha)
: new RGBColor();
: new RgbColor();
} else {
return Color.read(arguments).convert(type);
}
} else if (typeof arg === 'string') {
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
? hexToRGBColor(arg)
: nameToRGBColor(arg);
? hexToRgbColor(arg)
: nameToRgbColor(arg);
return type
? rgbColor.convert(type)
: rgbColor;
@ -5940,7 +5988,7 @@ var Color = this.Color = Base.extend(new function() {
: Array.prototype.slice.call(arguments);
if (!type) {
if (components.length >= 3)
return new RGBColor(components);
return new RgbColor(components);
return new GrayColor(components);
} else {
Base.each(this._components,
@ -6121,17 +6169,17 @@ var GrayColor = this.GrayColor = Color.extend({
_colorType: 'gray'
});
var RGBColor = this.RGBColor = Color.extend({
var RgbColor = this.RgbColor = this.RGBColor = Color.extend({
_colorType: 'rgb'
});
var HSBColor = this.HSBColor = Color.extend({
var HsbColor = this.HsbColor = this.HSBColor = Color.extend({
_colorType: 'hsb'
});
var HSLColor = this.HSLColor = Color.extend({
var HslColor = this.HslColor = this.HSLColor = Color.extend({
_colorType: 'hsl'
});
@ -6489,6 +6537,7 @@ var View = this.View = PaperScopeItem.extend({
initialize: function(canvas) {
this.base();
var size;
if (typeof canvas === 'string')
canvas = document.getElementById(canvas);
if (canvas instanceof HTMLCanvasElement) {
@ -6533,16 +6582,19 @@ var View = this.View = PaperScopeItem.extend({
this._id = this._canvas.getAttribute('id');
if (this._id == null)
this._canvas.setAttribute('id', this._id = 'canvas-' + View._id++);
View._views[this._id] = this;
this._viewSize = LinkedSize.create(this, 'setViewSize',
size.width, size.height);
this._context = this._canvas.getContext('2d');
this._matrix = new Matrix();
this._zoom = 1;
this._events = this._createEvents();
DomEvent.add(this._canvas, this._events);
if (!View._focused)
View._focused = this;
this._scope._redrawNotified = false;
},
@ -6557,6 +6609,22 @@ var View = this.View = PaperScopeItem.extend({
return true;
},
_redraw: function() {
this._redrawNeeded = true;
if (this._onFrameCallback) {
this._onFrameCallback(0, true);
} else {
this.draw();
}
},
_transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
this._bounds = null;
this._inverse = null;
this._redraw();
},
getCanvas: function() {
return this._canvas;
},
@ -6581,16 +6649,12 @@ var View = this.View = PaperScopeItem.extend({
delta: delta
});
}
if (this._onFrameCallback) {
this._onFrameCallback(0, true);
} else {
this.draw(true);
}
this._redraw();
},
getBounds: function() {
if (!this._bounds)
this._bounds = this._matrix._transformBounds(
this._bounds = this._getInverse()._transformBounds(
new Rectangle(new Point(), this._viewSize));
return this._bounds;
},
@ -6624,12 +6688,6 @@ var View = this.View = PaperScopeItem.extend({
this._transform(new Matrix().translate(Point.read(arguments).negate()));
},
_transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
this._bounds = null;
this._inverse = null;
},
draw: function(checkRedraw) {
if (checkRedraw && !this._redrawNeeded)
return false;
@ -6704,7 +6762,12 @@ var View = this.View = PaperScopeItem.extend({
},
onResize: null
}, new function() {
}, {
statics: {
_views: {},
_id: 0
}
}, new function() {
var tool,
timer,
curPoint,
@ -6815,8 +6878,6 @@ var View = this.View = PaperScopeItem.extend({
},
statics: {
_views: {},
_id: 0,
updateFocus: updateFocus
}
@ -6883,7 +6944,9 @@ var Key = this.Key = new function() {
39: 'right',
40: 'down',
46: 'delete',
91: 'command'
91: 'command',
93: 'command',
224: 'command'
},
modifiers = Base.merge({
@ -6920,12 +6983,10 @@ var Key = this.Key = new function() {
var code = event.which || event.keyCode;
var key = keys[code], name;
if (key) {
if (modifiers[name = Base.camelize(key)] !== undefined) {
if ((name = Base.camelize(key)) in modifiers)
modifiers[name] = true;
} else {
charCodeMap[code] = 0;
handleKey(true, code, null, event);
}
charCodeMap[code] = 0;
handleKey(true, code, null, event);
} else {
downCode = code;
}
@ -6943,9 +7004,9 @@ var Key = this.Key = new function() {
keyup: function(event) {
var code = event.which || event.keyCode,
key = keys[code], name;
if (key && modifiers[name = Base.camelize(key)] !== undefined) {
if (key && (name = Base.camelize(key)) in modifiers)
modifiers[name] = false;
} else if (charCodeMap[code] != null) {
if (charCodeMap[code] != null) {
handleKey(false, code, charCodeMap[code], event);
delete charCodeMap[code];
}
@ -7778,4 +7839,4 @@ Base.each(this, function(val, key) {
this.enumerable = true;
return new (PaperScope.inject(this));
};
};

299
dist/paper.js vendored
View file

@ -1,27 +1,27 @@
/*!
* Paper.js v0.21
* Paper.js v0.22
*
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
* based on Scriptographer.org and designed to be largely API compatible.
* http:
* http:
* http://paperjs.org/
* http://scriptographer.org/
*
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
* http:
* http://lehni.org/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*
* Date: Tue Aug 2 10:08:08 2011 +0100
* Date: Thu Nov 10 18:30:18 2011 +0100
*
***
*
* Bootstrap.js JavaScript Framework.
* http:
* http://bootstrapjs.org/
*
* Copyright (c) 2006 - 2011 Juerg Lehni
* http:
* http://lehni.org/
*
* Distributed under the MIT license.
*
@ -31,14 +31,14 @@
*
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
* http:
* http://marijn.haverbeke.nl/parse-js/
*
* Ported by to JavaScript by Mihai Bazon
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
* http:
* http://mihai.bazon.net/blog/
*
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
* http:
* http://lehni.org/
*
* Distributed under the BSD license.
*/
@ -409,7 +409,7 @@ var PaperScope = this.PaperScope = Base.extend({
PaperScope._scopes[this._id] = this;
},
version: 0.21,
version: 0.22,
evaluate: function(code) {
var res = PaperScript.evaluate(code, this);
@ -804,7 +804,9 @@ var LinkedPoint = Point.extend({
},
statics: {
create: function(owner, setter, x, y) {
create: function(owner, setter, x, y, dontLink) {
if (dontLink)
return Point.create(x, y);
var point = new LinkedPoint(LinkedPoint.dont);
point._x = x;
point._y = y;
@ -893,7 +895,7 @@ var Size = this.Size = Base.extend({
},
isZero: function() {
return this.width == 0 && this.width == 0;
return this.width == 0 && this.height == 0;
},
isNaN: function() {
@ -959,13 +961,15 @@ var LinkedSize = Size.extend({
},
statics: {
create: function(owner, setter, width, height) {
var point = new LinkedSize(LinkedSize.dont);
point._width = width;
point._height = height;
point._owner = owner;
point._setter = setter;
return point;
create: function(owner, setter, width, height, dontLink) {
if (dontLink)
return Size.create(width, height);
var size = new LinkedSize(LinkedSize.dont);
size._width = width;
size._height = height;
size._owner = owner;
size._setter = setter;
return size;
}
}
});
@ -1020,7 +1024,8 @@ var Rectangle = this.Rectangle = Base.extend({
},
getPoint: function() {
return LinkedPoint.create(this, 'setPoint', this.x, this.y);
return LinkedPoint.create(this, 'setPoint', this.x, this.y,
arguments[0]);
},
setPoint: function(point) {
@ -1031,7 +1036,8 @@ var Rectangle = this.Rectangle = Base.extend({
},
getSize: function() {
return LinkedSize.create(this, 'setSize', this.width, this.height);
return LinkedSize.create(this, 'setSize', this.width, this.height,
arguments[0]);
},
setSize: function(size) {
@ -1099,7 +1105,7 @@ var Rectangle = this.Rectangle = Base.extend({
getCenter: function() {
return LinkedPoint.create(this, 'setCenter',
this.getCenterX(), this.getCenterY());
this.getCenterX(), this.getCenterY(), arguments[0]);
},
setCenter: function(point) {
@ -1223,7 +1229,7 @@ var Rectangle = this.Rectangle = Base.extend({
set = 'set' + part;
this[get] = function() {
return LinkedPoint.create(this, set,
this[getX](), this[getY]());
this[getX](), this[getY](), arguments[0]);
};
this[set] = function(point) {
point = Point.read(arguments);
@ -1323,7 +1329,7 @@ var Matrix = this.Matrix = Base.extend({
return this;
},
scale: function(hor, ver , center) {
scale: function( hor, ver, center) {
if (arguments.length < 2 || typeof ver === 'object') {
center = Point.read(arguments, 1);
ver = hor;
@ -1354,7 +1360,7 @@ var Matrix = this.Matrix = Base.extend({
Matrix.getRotateInstance.apply(Matrix, arguments));
},
shear: function(hor, ver, center) {
shear: function( hor, ver, center) {
if (arguments.length < 2 || typeof ver === 'object') {
center = Point.read(arguments, 1);
ver = hor;
@ -1471,8 +1477,30 @@ var Matrix = this.Matrix = Base.extend({
max[0] - min[0], max[1] - min[1]);
},
getDeterminant: function() {
return this._a * this._d - this._b * this._c;
inverseTransform: function(point) {
return this._inverseTransform(Point.read(arguments));
},
_getDeterminant: function() {
var det = this._a * this._d - this._b * this._c;
return isFinite(det) && Math.abs(det) > Numerical.EPSILON
&& isFinite(this._tx) && isFinite(this._ty)
? det : null;
},
_inverseTransform: function(point, dest, dontNotify) {
var det = this._getDeterminant();
if (!det)
return null;
var x = point.x - this._tx,
y = point.y - this._ty;
if (!dest)
dest = new Point(Point.dont);
return dest.set(
(x * this._d - y * this._b) / det,
(y * this._a - x * this._c) / det,
dontNotify
);
},
getTranslation: function() {
@ -1498,28 +1526,22 @@ var Matrix = this.Matrix = Base.extend({
},
isInvertible: function() {
var det = this.getDeterminant();
return isFinite(det) && det != 0 && isFinite(this._tx)
&& isFinite(this._ty);
return !!this._getDeterminant();
},
isSingular: function() {
return !this.isInvertible();
return !this._getDeterminant();
},
createInverse: function() {
var det = this.getDeterminant();
if (isFinite(det) && det != 0 && isFinite(this._tx)
&& isFinite(this._ty)) {
return Matrix.create(
var det = this._getDeterminant();
return det && Matrix.create(
this._d / det,
-this._c / det,
-this._b / det,
this._a / det,
(this._b * this._ty - this._d * this._tx) / det,
(this._c * this._tx - this._a * this._ty) / det);
}
return null;
},
createShiftless: function() {
@ -1818,11 +1840,20 @@ var Item = this.Item = Base.extend({
delete this._position;
}
if (flags & ChangeFlag.APPEARANCE) {
if (this._project)
this._project._needsRedraw();
this._project._needsRedraw();
}
if (this._parentSymbol)
this._parentSymbol._changed(flags);
if (this._project._changes) {
var entry = this._project._changesById[this._id];
if (entry) {
entry.flags |= flags;
} else {
entry = { item: this, flags: flags };
this._project._changesById[this._id] = entry;
this._project._changes.push(entry);
}
}
},
getId: function() {
@ -1972,6 +2003,15 @@ var Item = this.Item = Base.extend({
}
},
getLayer: function() {
var parent = this;
while (parent = parent._parent) {
if (parent instanceof Layer)
return parent;
}
return null;
},
getParent: function() {
return this._parent;
},
@ -2048,8 +2088,7 @@ var Item = this.Item = Base.extend({
matrix.applyToContext(ctx);
this.draw(ctx, {});
var raster = new Raster(canvas);
raster.setPosition(this.getPosition());
raster.scale(1 / scale);
raster.setBounds(bounds);
return raster;
},
@ -2855,7 +2894,7 @@ var Raster = this.Raster = PlacedItem.extend({
channels = new Array(4);
for (var i = 0; i < 4; i++)
channels[i] = pixels[i] / 255;
return RGBColor.read(channels);
return RgbColor.read(channels);
},
setPixel: function(point, color) {
@ -3102,6 +3141,7 @@ var Segment = this.Segment = Base.extend({
if (selected)
selection[0] = false;
selection[index] = selected;
path._changed(Change.ATTRIBUTE);
}
}
this._selectionState = (selection[0] ? SelectionState.POINT : 0)
@ -3241,6 +3281,10 @@ var SegmentPoint = Point.extend({
this._owner._changed(this);
},
isZero: function() {
return this._x == 0 && this._y == 0;
},
setSelected: function(selected) {
this._owner._setSelected(this, selected);
},
@ -3742,7 +3786,7 @@ var Curve = this.Curve = Base.extend({
return [0.5 * (w[0].x + w[5].x)];
if (isFlatEnough(w)) {
var line = new Line(w[0], w[5], true);
return [ line.vector.getLength(true) < Numerical.EPSILON
return [ line.vector.getLength(true) <= Numerical.EPSILON
? line.point.x
: xAxis.intersect(line).x ];
}
@ -4427,8 +4471,8 @@ var Path = this.Path = PathItem.extend({
ctx.rect(point._x - 1, point._y - 1, 2, 2);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.restore();
}
ctx.restore();
}
}
@ -5051,13 +5095,17 @@ Path.inject({ statics: new function() {
Rectangle: function(rect) {
rect = Rectangle.read(arguments);
var path = new Path(),
corners = ['getBottomLeft', 'getTopLeft', 'getTopRight',
'getBottomRight'],
segments = new Array(4);
for (var i = 0; i < 4; i++)
segments[i] = new Segment(rect[corners[i]]());
path._add(segments);
var left = rect.x,
top = rect.y
right = left + rect.width,
bottom = top + rect.height,
path = new Path();
path._add([
new Segment(Point.create(left, bottom)),
new Segment(Point.create(left, top)),
new Segment(Point.create(right, top)),
new Segment(Point.create(right, bottom))
]);
path._closed = true;
return path;
},
@ -5070,13 +5118,13 @@ Path.inject({ statics: new function() {
rect = Rectangle.read(arguments, 0, 4);
size = Size.read(arguments, 4, 2);
}
size = Size.min(size, rect.getSize().divide(2));
size = Size.min(size, rect.getSize(true).divide(2));
var path = new Path(),
uSize = size.multiply(kappa * 2),
bl = rect.getBottomLeft(),
tl = rect.getTopLeft(),
tr = rect.getTopRight(),
br = rect.getBottomRight();
bl = rect.getBottomLeft(true),
tl = rect.getTopLeft(true),
tr = rect.getTopRight(true),
br = rect.getBottomRight(true);
path._add([
new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
@ -5097,13 +5145,13 @@ Path.inject({ statics: new function() {
Oval: function(rect) {
rect = Rectangle.read(arguments);
var path = new Path(),
topLeft = rect.getTopLeft(),
size = new Size(rect.width, rect.height),
point = rect.getPoint(true),
size = rect.getSize(true),
segments = new Array(4);
for (var i = 0; i < 4; i++) {
var segment = ovalSegments[i];
segments[i] = new Segment(
segment._point.multiply(size).add(topLeft),
segment._point.multiply(size).add(point),
segment._handleIn.multiply(size),
segment._handleOut.multiply(size)
);
@ -5121,7 +5169,7 @@ Path.inject({ statics: new function() {
center = Point.read(arguments, 0, 1);
}
return Path.Oval(new Rectangle(center.subtract(radius),
new Size(radius * 2, radius * 2)));
Size.create(radius * 2, radius * 2)));
},
Arc: function(from, through, to) {
@ -5583,9 +5631,8 @@ var TextItem = this.TextItem = Item.extend({
var PointText = this.PointText = TextItem.extend({
initialize: function(point) {
this.base();
var point = Point.read(arguments);
this._point = LinkedPoint.create(this, 'setPoint', point.x, point.y);
this._matrix = new Matrix().translate(point);
this._point = Point.read(arguments).clone();
this._matrix = new Matrix().translate(this._point);
},
clone: function() {
@ -5595,16 +5642,16 @@ var PointText = this.PointText = TextItem.extend({
},
getPoint: function() {
return this._point;
return LinkedPoint.create(this, 'setPoint',
this._point.x, this._point.y);
},
setPoint: function(point) {
this._transform(new Matrix().translate(
Point.read(arguments).subtract(this._point)));
this.translate(Point.read(arguments).subtract(this._point));
},
getPosition: function() {
return this._point;
return this.getPoint();
},
setPosition: function(point) {
@ -5613,7 +5660,7 @@ var PointText = this.PointText = TextItem.extend({
_transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
matrix._transformPoint(this._point, this._point, true);
matrix._transformPoint(this._point, this._point);
},
draw: function(ctx) {
@ -5771,7 +5818,7 @@ var Color = this.Color = Base.extend(new function() {
var colorCache = {},
colorContext;
function nameToRGBColor(name) {
function nameToRgbColor(name) {
var color = colorCache[name];
if (color)
return color.clone();
@ -5785,10 +5832,10 @@ var Color = this.Color = Base.extend(new function() {
colorContext.fillRect(0, 0, 1, 1);
var data = colorContext.getImageData(0, 0, 1, 1).data,
rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
return (colorCache[name] = RGBColor.read(rgb)).clone();
return (colorCache[name] = RgbColor.read(rgb)).clone();
}
function hexToRGBColor(string) {
function hexToRgbColor(string) {
var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
if (hex.length >= 4) {
var rgb = new Array(3);
@ -5797,7 +5844,7 @@ var Color = this.Color = Base.extend(new function() {
rgb[i] = parseInt(channel.length == 1
? channel + channel : channel, 16) / 255;
}
return RGBColor.read(rgb);
return RgbColor.read(rgb);
}
}
@ -5824,7 +5871,7 @@ var Color = this.Color = Base.extend(new function() {
: (r - g) / delta + 4) * 60,
s = max == 0 ? 0 : delta / max,
v = max;
return new HSBColor(h, s, v, color._alpha);
return new HsbColor(h, s, v, color._alpha);
},
'hsb-rgb': function(color) {
@ -5840,7 +5887,7 @@ var Color = this.Color = Base.extend(new function() {
b * (1 - s * f),
b * (1 - s * (1 - f))
];
return new RGBColor(v[i[0]], v[i[1]], v[i[2]], color._alpha);
return new RgbColor(v[i[0]], v[i[1]], v[i[2]], color._alpha);
},
'rgb-hsl': function(color) {
@ -5850,15 +5897,16 @@ var Color = this.Color = Base.extend(new function() {
max = Math.max(r, g, b),
min = Math.min(r, g, b),
delta = max - min,
h = delta == 0 ? 0
achromatic = delta == 0,
h = achromatic ? 0
: ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
: max == g ? (b - r) / delta + 2
: (r - g) / delta + 4) * 60,
l = (max + min) / 2,
s = l < 0.5
? delta / (max + min)
: delta / (2 - max - min);
return new HSLColor(h, s, l, color._alpha);
s = achromatic ? 0 : l < 0.5
? delta / (max + min)
: delta / (2 - max - min);
return new HslColor(h, s, l, color._alpha);
},
'hsl-rgb': function(color) {
@ -5867,7 +5915,7 @@ var Color = this.Color = Base.extend(new function() {
l = color._lightness,
t1, t2, c;
if (s == 0)
return new RGBColor(l, l, l, color._alpha);
return new RgbColor(l, l, l, color._alpha);
var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
t1 = 2 * l - t2,
@ -5884,7 +5932,7 @@ var Color = this.Color = Base.extend(new function() {
? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
: t1;
}
return new RGBColor(c[0], c[1], c[2], color._alpha);
return new RgbColor(c[0], c[1], c[2], color._alpha);
},
'rgb-gray': function(color) {
@ -5894,15 +5942,15 @@ var Color = this.Color = Base.extend(new function() {
'gray-rgb': function(color) {
var comp = 1 - color._gray;
return new RGBColor(comp, comp, comp, color._alpha);
return new RgbColor(comp, comp, comp, color._alpha);
},
'gray-hsb': function(color) {
return new HSBColor(0, 0, 1 - color._gray, color._alpha);
return new HsbColor(0, 0, 1 - color._gray, color._alpha);
},
'gray-hsl': function(color) {
return new HSLColor(0, 0, 1 - color._gray, color._alpha);
return new HslColor(0, 0, 1 - color._gray, color._alpha);
}
};
@ -5915,23 +5963,23 @@ var Color = this.Color = Base.extend(new function() {
if (typeof arg === 'object' && !isArray) {
if (!type) {
return arg.red !== undefined
? new RGBColor(arg.red, arg.green, arg.blue, arg.alpha)
? new RgbColor(arg.red, arg.green, arg.blue, arg.alpha)
: arg.gray !== undefined
? new GrayColor(arg.gray, arg.alpha)
: arg.lightness !== undefined
? new HSLColor(arg.hue, arg.saturation, arg.lightness,
? new HslColor(arg.hue, arg.saturation, arg.lightness,
arg.alpha)
: arg.hue !== undefined
? new HSBColor(arg.hue, arg.saturation, arg.brightness,
? new HsbColor(arg.hue, arg.saturation, arg.brightness,
arg.alpha)
: new RGBColor();
: new RgbColor();
} else {
return Color.read(arguments).convert(type);
}
} else if (typeof arg === 'string') {
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
? hexToRGBColor(arg)
: nameToRGBColor(arg);
? hexToRgbColor(arg)
: nameToRgbColor(arg);
return type
? rgbColor.convert(type)
: rgbColor;
@ -5940,7 +5988,7 @@ var Color = this.Color = Base.extend(new function() {
: Array.prototype.slice.call(arguments);
if (!type) {
if (components.length >= 3)
return new RGBColor(components);
return new RgbColor(components);
return new GrayColor(components);
} else {
Base.each(this._components,
@ -6121,17 +6169,17 @@ var GrayColor = this.GrayColor = Color.extend({
_colorType: 'gray'
});
var RGBColor = this.RGBColor = Color.extend({
var RgbColor = this.RgbColor = this.RGBColor = Color.extend({
_colorType: 'rgb'
});
var HSBColor = this.HSBColor = Color.extend({
var HsbColor = this.HsbColor = this.HSBColor = Color.extend({
_colorType: 'hsb'
});
var HSLColor = this.HSLColor = Color.extend({
var HslColor = this.HslColor = this.HSLColor = Color.extend({
_colorType: 'hsl'
});
@ -6489,6 +6537,7 @@ var View = this.View = PaperScopeItem.extend({
initialize: function(canvas) {
this.base();
var size;
if (typeof canvas === 'string')
canvas = document.getElementById(canvas);
if (canvas instanceof HTMLCanvasElement) {
@ -6533,16 +6582,19 @@ var View = this.View = PaperScopeItem.extend({
this._id = this._canvas.getAttribute('id');
if (this._id == null)
this._canvas.setAttribute('id', this._id = 'canvas-' + View._id++);
View._views[this._id] = this;
this._viewSize = LinkedSize.create(this, 'setViewSize',
size.width, size.height);
this._context = this._canvas.getContext('2d');
this._matrix = new Matrix();
this._zoom = 1;
this._events = this._createEvents();
DomEvent.add(this._canvas, this._events);
if (!View._focused)
View._focused = this;
this._scope._redrawNotified = false;
},
@ -6557,6 +6609,22 @@ var View = this.View = PaperScopeItem.extend({
return true;
},
_redraw: function() {
this._redrawNeeded = true;
if (this._onFrameCallback) {
this._onFrameCallback(0, true);
} else {
this.draw();
}
},
_transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
this._bounds = null;
this._inverse = null;
this._redraw();
},
getCanvas: function() {
return this._canvas;
},
@ -6581,16 +6649,12 @@ var View = this.View = PaperScopeItem.extend({
delta: delta
});
}
if (this._onFrameCallback) {
this._onFrameCallback(0, true);
} else {
this.draw(true);
}
this._redraw();
},
getBounds: function() {
if (!this._bounds)
this._bounds = this._matrix._transformBounds(
this._bounds = this._getInverse()._transformBounds(
new Rectangle(new Point(), this._viewSize));
return this._bounds;
},
@ -6624,12 +6688,6 @@ var View = this.View = PaperScopeItem.extend({
this._transform(new Matrix().translate(Point.read(arguments).negate()));
},
_transform: function(matrix, flags) {
this._matrix.preConcatenate(matrix);
this._bounds = null;
this._inverse = null;
},
draw: function(checkRedraw) {
if (checkRedraw && !this._redrawNeeded)
return false;
@ -6704,7 +6762,12 @@ var View = this.View = PaperScopeItem.extend({
},
onResize: null
}, new function() {
}, {
statics: {
_views: {},
_id: 0
}
}, new function() {
var tool,
timer,
curPoint,
@ -6815,8 +6878,6 @@ var View = this.View = PaperScopeItem.extend({
},
statics: {
_views: {},
_id: 0,
updateFocus: updateFocus
}
@ -6883,7 +6944,9 @@ var Key = this.Key = new function() {
39: 'right',
40: 'down',
46: 'delete',
91: 'command'
91: 'command',
93: 'command',
224: 'command'
},
modifiers = Base.merge({
@ -6920,12 +6983,10 @@ var Key = this.Key = new function() {
var code = event.which || event.keyCode;
var key = keys[code], name;
if (key) {
if (modifiers[name = Base.camelize(key)] !== undefined) {
if ((name = Base.camelize(key)) in modifiers)
modifiers[name] = true;
} else {
charCodeMap[code] = 0;
handleKey(true, code, null, event);
}
charCodeMap[code] = 0;
handleKey(true, code, null, event);
} else {
downCode = code;
}
@ -6943,9 +7004,9 @@ var Key = this.Key = new function() {
keyup: function(event) {
var code = event.which || event.keyCode,
key = keys[code], name;
if (key && modifiers[name = Base.camelize(key)] !== undefined) {
if (key && (name = Base.camelize(key)) in modifiers)
modifiers[name] = false;
} else if (charCodeMap[code] != null) {
if (charCodeMap[code] != null) {
handleKey(false, code, charCodeMap[code], event);
delete charCodeMap[code];
}
@ -7778,4 +7839,4 @@ Base.each(this, function(val, key) {
this.enumerable = true;
return new (PaperScope.inject(this));
};
};