mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-07-05 17:30:26 -04:00
Bump version to 0.22 and include new dist files.
This commit is contained in:
Jürg Lehni
parent
a6c273c2e9
commit
6effceb9bc
29 changed files with 1520 additions and 827 deletions
build
dist
docs
classes
CharacterStyle.htmlColor.htmlCompoundPath.htmlGradientStop.htmlGrayColor.htmlGroup.htmlHsbColor.htmlHslColor.htmlItem.htmlLayer.htmlMatrix.htmlPath.htmlPathItem.htmlPathStyle.htmlPlacedItem.htmlPlacedSymbol.htmlPointText.htmlProject.htmlRaster.htmlRgbColor.htmlTextItem.htmlindex.html
resources
|
|
@ -31,7 +31,7 @@
|
||||||
# stripped Formated but without comments
|
# stripped Formated but without comments
|
||||||
# compressed Uses UglifyJS to reduce file size
|
# compressed Uses UglifyJS to reduce file size
|
||||||
|
|
||||||
VERSION=0.21
|
VERSION=0.22
|
||||||
DATE=$(git log -1 --pretty=format:%ad)
|
DATE=$(git log -1 --pretty=format:%ad)
|
||||||
|
|
||||||
COMMAND="./prepro.js -d '{ \"version\": $VERSION, \"date\": \"$DATE\" }' -d '$4' $2"
|
COMMAND="./prepro.js -d '{ \"version\": $VERSION, \"date\": \"$DATE\" }' -d '$4' $2"
|
||||||
|
|
|
||||||
8
dist/docs/classes/CharacterStyle.html
vendored
8
dist/docs/classes/CharacterStyle.html
vendored
|
|
@ -151,7 +151,7 @@ text.characterStyle = {
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
@ -167,7 +167,7 @@ text.characterStyle = {
|
||||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||||
</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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
48
dist/docs/classes/Color.html
vendored
48
dist/docs/classes/Color.html
vendored
|
|
@ -18,10 +18,10 @@
|
||||||
<h1>Color</h1>
|
<h1>Color</h1>
|
||||||
|
|
||||||
<p>All properties and functions that expect color values accept
|
<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>,
|
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
|
<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
|
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>
|
<p>
|
||||||
<b>Example</b> — Named color values:
|
<b>Example</b> — Named color values:
|
||||||
</p>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
// Pass a color name to the fillColor property, which is internally
|
// Pass a color name to the fillColor property, which is internally
|
||||||
// converted to an RGBColor.
|
// converted to an RgbColor.
|
||||||
circle.fillColor = 'green';
|
circle.fillColor = 'green';
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
<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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
// Pass a hex string to the fillColor property, which is internally
|
// Pass a hex string to the fillColor property, which is internally
|
||||||
// converted to an RGBColor.
|
// converted to an RgbColor.
|
||||||
circle.fillColor = '#ff0000';
|
circle.fillColor = '#ff0000';
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
<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>
|
</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>
|
console.log(color.type); // 'rgb'</pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -520,6 +520,40 @@ function onFrame(event) {
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>HSL Components</h3>
|
||||||
|
|
||||||
|
<div id="lightness-member" class="member">
|
||||||
|
<div id="lightness-link" class="member-link">
|
||||||
|
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
<div id="lightness-description" class="member-description hidden">
|
||||||
|
<div class="member-header">
|
||||||
|
<div class="member-title">
|
||||||
|
<div class="member-link">
|
||||||
|
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-text">
|
||||||
|
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Type:</b>
|
||||||
|
<li>
|
||||||
|
<tt>Number</tt>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -554,7 +588,7 @@ function onFrame(event) {
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a></tt> — a copy of the color object
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
40
dist/docs/classes/CompoundPath.html
vendored
40
dist/docs/classes/CompoundPath.html
vendored
|
|
@ -1554,6 +1554,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2356,7 +2388,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
2
dist/docs/classes/GradientStop.html
vendored
2
dist/docs/classes/GradientStop.html
vendored
|
|
@ -48,7 +48,7 @@
|
||||||
<tt>color:</tt>
|
<tt>color:</tt>
|
||||||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||||||
— the color of the stop
|
— the color of the stop
|
||||||
— optional, default: <tt>new RGBColor(0, 0, 0)</tt>
|
— optional, default: <tt>new RgbColor(0, 0, 0)</tt>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
|
|
|
||||||
110
dist/docs/classes/GrayColor.html
vendored
110
dist/docs/classes/GrayColor.html
vendored
|
|
@ -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>
|
</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>
|
console.log(color.type); // 'rgb'</pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -344,41 +381,6 @@ circle.fillColor.blue = 1;
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>Gray Components</h3>
|
|
||||||
|
|
||||||
<div id="gray-member" class="member">
|
|
||||||
<div id="gray-link" class="member-link">
|
|
||||||
<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="gray-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The amount of gray in the color as a value between <tt>0</tt> and
|
|
||||||
<tt>1</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -512,6 +514,40 @@ function onFrame(event) {
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>HSL Components</h3>
|
||||||
|
|
||||||
|
<div id="lightness-member" class="member">
|
||||||
|
<div id="lightness-link" class="member-link">
|
||||||
|
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
<div id="lightness-description" class="member-description hidden">
|
||||||
|
<div class="member-header">
|
||||||
|
<div class="member-title">
|
||||||
|
<div class="member-link">
|
||||||
|
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-text">
|
||||||
|
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Type:</b>
|
||||||
|
<li>
|
||||||
|
<tt>Number</tt>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -545,7 +581,7 @@ function onFrame(event) {
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a></tt> — a copy of the color object
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
40
dist/docs/classes/Group.html
vendored
40
dist/docs/classes/Group.html
vendored
|
|
@ -759,6 +759,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1561,7 +1593,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
288
dist/docs/classes/HsbColor.html
vendored
288
dist/docs/classes/HsbColor.html
vendored
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>HSBColor</title>
|
<title>HsbColor</title>
|
||||||
<base target="classFrame">
|
<base target="classFrame">
|
||||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||||
|
|
@ -15,11 +15,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="reference">
|
<body class="reference">
|
||||||
<div class="reference-class">
|
<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> 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>
|
</div>
|
||||||
|
|
||||||
|
|
@ -29,20 +29,20 @@
|
||||||
|
|
||||||
<div id="hsbcolor-hue-saturation-brightness-member" class="member">
|
<div id="hsbcolor-hue-saturation-brightness-member" class="member">
|
||||||
<div id="hsbcolor-hue-saturation-brightness-link" class="member-link">
|
<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>
|
||||||
<div id="hsbcolor-hue-saturation-brightness-description" class="member-description hidden">
|
<div id="hsbcolor-hue-saturation-brightness-description" class="member-description hidden">
|
||||||
<div class="member-header">
|
<div class="member-header">
|
||||||
<div class="member-title">
|
<div class="member-title">
|
||||||
<div class="member-link">
|
<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>
|
</div>
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hsbcolor-hue-saturation-brightness', false);"></div>
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hsbcolor-hue-saturation-brightness', false);"></div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="member-text">
|
<div class="member-text">
|
||||||
<p>Creates an HSBColor object</p>
|
<p>Creates an HsbColor object</p>
|
||||||
|
|
||||||
<ul><b>Parameters:</b>
|
<ul><b>Parameters:</b>
|
||||||
|
|
||||||
|
|
@ -82,7 +82,7 @@ between <tt>0</tt> and <tt>1</tt>
|
||||||
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<b>Example</b> — Creating an HSBColor:
|
<b>Example</b> — Creating an HsbColor:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="paperscript split">
|
<div class="paperscript split">
|
||||||
|
|
@ -92,9 +92,9 @@ between <tt>0</tt> and <tt>1</tt>
|
||||||
// with a radius of 30:
|
// with a radius of 30:
|
||||||
var circle = new Path.Circle(new Point(80, 50), 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%:
|
// 100% and a brightness of 100%:
|
||||||
circle.fillColor = new HSBColor(90, 1, 1);
|
circle.fillColor = new HsbColor(90, 1, 1);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||||
</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> — Changing the hue of a color:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="paperscript split">
|
||||||
|
<div class="button">Run</div>
|
||||||
|
<script type="text/paperscript" canvas="canvas-1">
|
||||||
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
circle.fillColor = 'red';
|
||||||
|
circle.fillColor.hue += 30;
|
||||||
|
</script>
|
||||||
|
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<b>Example</b> — Hue cycling:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="paperscript split">
|
||||||
|
<div class="button">Run</div>
|
||||||
|
<script type="text/paperscript" canvas="canvas-2">
|
||||||
|
// Create a rectangle shaped path, using the dimensions
|
||||||
|
// of the view:
|
||||||
|
var path = new Path.Rectangle(view.bounds);
|
||||||
|
path.fillColor = 'red';
|
||||||
|
|
||||||
|
function onFrame(event) {
|
||||||
|
path.fillColor.hue += 0.5;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="saturation-member" class="member">
|
||||||
|
<div id="saturation-link" class="member-link">
|
||||||
|
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||||
|
</div>
|
||||||
|
<div id="saturation-description" class="member-description hidden">
|
||||||
|
<div class="member-header">
|
||||||
|
<div class="member-title">
|
||||||
|
<div class="member-link">
|
||||||
|
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-text">
|
||||||
|
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Type:</b>
|
||||||
|
<li>
|
||||||
|
<tt>Number</tt>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="brightness-member" class="member">
|
||||||
|
<div id="brightness-link" class="member-link">
|
||||||
|
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
<div id="brightness-description" class="member-description hidden">
|
||||||
|
<div class="member-header">
|
||||||
|
<div class="member-title">
|
||||||
|
<div class="member-link">
|
||||||
|
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-text">
|
||||||
|
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Type:</b>
|
||||||
|
<li>
|
||||||
|
<tt>Number</tt>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -150,7 +285,7 @@ circle.fillColor = new HSBColor(90, 1, 1);
|
||||||
</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>
|
console.log(color.type); // 'rgb'</pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -191,7 +326,7 @@ colors of the different subclasses support alpha values.</p>
|
||||||
|
|
||||||
<div class="paperscript split">
|
<div class="paperscript split">
|
||||||
<div class="button">Run</div>
|
<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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
// Fill the circle with red and give it a 20pt green stroke:
|
// Fill the circle with red and give it a 20pt green stroke:
|
||||||
|
|
@ -204,7 +339,7 @@ circle.style = {
|
||||||
// Make the stroke half transparent:
|
// Make the stroke half transparent:
|
||||||
circle.strokeColor.alpha = 0.5;
|
circle.strokeColor.alpha = 0.5;
|
||||||
</script>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -248,14 +383,14 @@ circle.strokeColor.alpha = 0.5;
|
||||||
|
|
||||||
<div class="paperscript split">
|
<div class="paperscript split">
|
||||||
<div class="button">Run</div>
|
<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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
circle.fillColor = 'blue';
|
circle.fillColor = 'blue';
|
||||||
|
|
||||||
// Blue + red = purple:
|
// Blue + red = purple:
|
||||||
circle.fillColor.red = 1;
|
circle.fillColor.red = 1;
|
||||||
</script>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -297,7 +432,7 @@ circle.fillColor.red = 1;
|
||||||
|
|
||||||
<div class="paperscript split">
|
<div class="paperscript split">
|
||||||
<div class="button">Run</div>
|
<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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
// First we set the fill color to red:
|
// First we set the fill color to red:
|
||||||
|
|
@ -306,7 +441,7 @@ circle.fillColor = 'red';
|
||||||
// Red + green = yellow:
|
// Red + green = yellow:
|
||||||
circle.fillColor.green = 1;
|
circle.fillColor.green = 1;
|
||||||
</script>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -348,7 +483,7 @@ circle.fillColor.green = 1;
|
||||||
|
|
||||||
<div class="paperscript split">
|
<div class="paperscript split">
|
||||||
<div class="button">Run</div>
|
<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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
// First we set the fill color to red:
|
// First we set the fill color to red:
|
||||||
|
|
@ -357,7 +492,7 @@ circle.fillColor = 'red';
|
||||||
// Red + blue = purple:
|
// Red + blue = purple:
|
||||||
circle.fillColor.blue = 1;
|
circle.fillColor.blue = 1;
|
||||||
</script>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -402,124 +537,25 @@ circle.fillColor.blue = 1;
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h3>HSB Components</h3>
|
<h3>HSL Components</h3>
|
||||||
|
|
||||||
<div id="hue-member" class="member">
|
<div id="lightness-member" class="member">
|
||||||
<div id="hue-link" class="member-link">
|
<div id="lightness-link" class="member-link">
|
||||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||||
</div>
|
</div>
|
||||||
<div id="hue-description" class="member-description hidden">
|
<div id="lightness-description" class="member-description hidden">
|
||||||
<div class="member-header">
|
<div class="member-header">
|
||||||
<div class="member-title">
|
<div class="member-title">
|
||||||
<div class="member-link">
|
<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>
|
</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 class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="member-text">
|
<div class="member-text">
|
||||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||||
<tt>360</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<b>Example</b> — Changing the hue of a color:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="paperscript split">
|
|
||||||
<div class="button">Run</div>
|
|
||||||
<script type="text/paperscript" canvas="canvas-5">
|
|
||||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
|
||||||
circle.fillColor = 'red';
|
|
||||||
circle.fillColor.hue += 30;
|
|
||||||
</script>
|
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<b>Example</b> — Hue cycling:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="paperscript split">
|
|
||||||
<div class="button">Run</div>
|
|
||||||
<script type="text/paperscript" canvas="canvas-6">
|
|
||||||
// Create a rectangle shaped path, using the dimensions
|
|
||||||
// of the view:
|
|
||||||
var path = new Path.Rectangle(view.bounds);
|
|
||||||
path.fillColor = 'red';
|
|
||||||
|
|
||||||
function onFrame(event) {
|
|
||||||
path.fillColor.hue += 0.5;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="saturation-member" class="member">
|
|
||||||
<div id="saturation-link" class="member-link">
|
|
||||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="saturation-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="brightness-member" class="member">
|
|
||||||
<div id="brightness-link" class="member-link">
|
|
||||||
<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="brightness-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
|
|
@ -562,7 +598,7 @@ function onFrame(event) {
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a></tt> — a copy of the color object
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
224
dist/docs/classes/HslColor.html
vendored
224
dist/docs/classes/HslColor.html
vendored
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>HSLColor</title>
|
<title>HslColor</title>
|
||||||
<base target="classFrame">
|
<base target="classFrame">
|
||||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||||
|
|
@ -15,11 +15,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="reference">
|
<body class="reference">
|
||||||
<div class="reference-class">
|
<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> 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>
|
</div>
|
||||||
|
|
||||||
|
|
@ -29,20 +29,20 @@
|
||||||
|
|
||||||
<div id="hslcolor-hue-saturation-lightness-member" class="member">
|
<div id="hslcolor-hue-saturation-lightness-member" class="member">
|
||||||
<div id="hslcolor-hue-saturation-lightness-link" class="member-link">
|
<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>
|
||||||
<div id="hslcolor-hue-saturation-lightness-description" class="member-description hidden">
|
<div id="hslcolor-hue-saturation-lightness-description" class="member-description hidden">
|
||||||
<div class="member-header">
|
<div class="member-header">
|
||||||
<div class="member-title">
|
<div class="member-title">
|
||||||
<div class="member-link">
|
<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>
|
</div>
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hslcolor-hue-saturation-lightness', false);"></div>
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hslcolor-hue-saturation-lightness', false);"></div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="member-text">
|
<div class="member-text">
|
||||||
<p>Creates an HSLColor object</p>
|
<p>Creates an HslColor object</p>
|
||||||
|
|
||||||
<ul><b>Parameters:</b>
|
<ul><b>Parameters:</b>
|
||||||
|
|
||||||
|
|
@ -82,7 +82,7 @@ between <tt>0</tt> and <tt>1</tt>
|
||||||
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<b>Example</b> — Creating an HSLColor:
|
<b>Example</b> — Creating an HslColor:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="paperscript split">
|
<div class="paperscript split">
|
||||||
|
|
@ -92,9 +92,9 @@ between <tt>0</tt> and <tt>1</tt>
|
||||||
// with a radius of 30:
|
// with a radius of 30:
|
||||||
var circle = new Path.Circle(new Point(80, 50), 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%:
|
// 100% and a lightness of 50%:
|
||||||
circle.fillColor = new HSLColor(90, 1, 0.5);
|
circle.fillColor = new HslColor(90, 1, 0.5);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||||
</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>
|
</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>
|
console.log(color.type); // 'rgb'</pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -396,107 +497,6 @@ circle.fillColor.blue = 1;
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>HSB Components</h3>
|
|
||||||
|
|
||||||
<div id="hue-member" class="member">
|
|
||||||
<div id="hue-link" class="member-link">
|
|
||||||
<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="hue-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The hue of the color as a value in degrees between <tt>0</tt> and
|
|
||||||
<tt>360</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<b>Example</b> — Changing the hue of a color:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="paperscript split">
|
|
||||||
<div class="button">Run</div>
|
|
||||||
<script type="text/paperscript" canvas="canvas-5">
|
|
||||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
|
||||||
circle.fillColor = 'red';
|
|
||||||
circle.fillColor.hue += 30;
|
|
||||||
</script>
|
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<b>Example</b> — Hue cycling:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="paperscript split">
|
|
||||||
<div class="button">Run</div>
|
|
||||||
<script type="text/paperscript" canvas="canvas-6">
|
|
||||||
// Create a rectangle shaped path, using the dimensions
|
|
||||||
// of the view:
|
|
||||||
var path = new Path.Rectangle(view.bounds);
|
|
||||||
path.fillColor = 'red';
|
|
||||||
|
|
||||||
function onFrame(event) {
|
|
||||||
path.fillColor.hue += 0.5;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="saturation-member" class="member">
|
|
||||||
<div id="saturation-link" class="member-link">
|
|
||||||
<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="saturation-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -562,7 +562,7 @@ function onFrame(event) {
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a></tt> — a copy of the color object
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
40
dist/docs/classes/Item.html
vendored
40
dist/docs/classes/Item.html
vendored
|
|
@ -623,6 +623,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1425,7 +1457,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
40
dist/docs/classes/Layer.html
vendored
40
dist/docs/classes/Layer.html
vendored
|
|
@ -718,6 +718,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1520,7 +1552,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
151
dist/docs/classes/Matrix.html
vendored
151
dist/docs/classes/Matrix.html
vendored
|
|
@ -338,6 +338,40 @@ to {@link #initialize(a, c, b, d, tx, ty)}.</p>
|
||||||
</ul>
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1008,24 +1042,22 @@ anchor point.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="transform-point-src-srcOff-dst-dstOff-numPts-member" class="member">
|
<div id="transform-point-member" class="member">
|
||||||
<div id="transform-point-src-srcOff-dst-dstOff-numPts-link" class="member-link">
|
<div id="transform-point-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>
|
<a name="transform-point" href="#" onClick="return toggleMember('transform-point', false);"><tt><b>transform</b>(point)</tt></a>
|
||||||
</div>
|
</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-header">
|
||||||
<div class="member-title">
|
<div class="member-title">
|
||||||
<div class="member-link">
|
<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>
|
</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 class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="member-text">
|
<div class="member-text">
|
||||||
<p>Transforms a point or an array of coordinates by this matrix and returns
|
<p>Transforms a point and returns the result.</p>
|
||||||
the result. If an array is transformed, the the result is stored into a
|
|
||||||
destination array.</p>
|
|
||||||
|
|
||||||
<ul><b>Parameters:</b>
|
<ul><b>Parameters:</b>
|
||||||
|
|
||||||
|
|
@ -1036,6 +1068,44 @@ destination array.</p>
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — 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>
|
<li>
|
||||||
<tt>src:</tt>
|
<tt>src:</tt>
|
||||||
<tt>Number</tt>
|
<tt>Number</tt>
|
||||||
|
|
@ -1077,35 +1147,10 @@ destination array.</p>
|
||||||
</ul>
|
</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>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><tt>Number</tt></tt> — The determinant of this transform
|
<tt><tt>Number</tt></tt> — The dst array, containing the transformed coordinates.
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -1117,35 +1162,35 @@ destination array.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="getrotation-member" class="member">
|
<div id="inversetransform-point-member" class="member">
|
||||||
<div id="getrotation-link" class="member-link">
|
<div id="inversetransform-point-link" class="member-link">
|
||||||
<a name="getrotation" href="#" onClick="return toggleMember('getrotation', false);"><tt><b>getRotation</b>()</tt></a>
|
<a name="inversetransform-point" href="#" onClick="return toggleMember('inversetransform-point', false);"><tt><b>inverseTransform</b>(point)</tt></a>
|
||||||
</div>
|
</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-header">
|
||||||
<div class="member-title">
|
<div class="member-title">
|
||||||
<div class="member-link">
|
<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>
|
</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 class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="member-text">
|
<div class="member-text">
|
||||||
<p>Returns the rotation angle of the matrix. If a non-uniform
|
<p>Inverse transforms a point and returns the result.</p>
|
||||||
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>Parameters:</b>
|
||||||
<ul><b>Returns:</b>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<tt><tt>Number</tt></tt> — The rotation angle of the matrix
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<tt>point:</tt>
|
||||||
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||||||
|
— The point to be transformed
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
40
dist/docs/classes/Path.html
vendored
40
dist/docs/classes/Path.html
vendored
|
|
@ -3870,6 +3870,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -4672,7 +4704,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
40
dist/docs/classes/PathItem.html
vendored
40
dist/docs/classes/PathItem.html
vendored
|
|
@ -1451,6 +1451,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2253,7 +2285,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
10
dist/docs/classes/PathStyle.html
vendored
10
dist/docs/classes/PathStyle.html
vendored
|
|
@ -33,7 +33,7 @@ apply it to a series of items:</p>
|
||||||
<div class="button">Run</div>
|
<div class="button">Run</div>
|
||||||
<script type="text/paperscript" canvas="canvas-0">
|
<script type="text/paperscript" canvas="canvas-0">
|
||||||
var circleStyle = {
|
var circleStyle = {
|
||||||
fillColor: new RGBColor(1, 0, 0),
|
fillColor: new RgbColor(1, 0, 0),
|
||||||
strokeColor: 'black',
|
strokeColor: 'black',
|
||||||
strokeWidth: 5
|
strokeWidth: 5
|
||||||
};
|
};
|
||||||
|
|
@ -77,7 +77,7 @@ path.style = circleStyle;
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
@ -93,7 +93,7 @@ path.style = circleStyle;
|
||||||
var circle = new Path.Circle(new Point(80, 50), 35);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||||
</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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
40
dist/docs/classes/PlacedItem.html
vendored
40
dist/docs/classes/PlacedItem.html
vendored
|
|
@ -665,6 +665,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1467,7 +1499,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
40
dist/docs/classes/PlacedSymbol.html
vendored
40
dist/docs/classes/PlacedSymbol.html
vendored
|
|
@ -751,6 +751,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1553,7 +1585,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
40
dist/docs/classes/PointText.html
vendored
40
dist/docs/classes/PointText.html
vendored
|
|
@ -714,6 +714,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1516,7 +1548,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
2
dist/docs/classes/Project.html
vendored
2
dist/docs/classes/Project.html
vendored
|
|
@ -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.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
|
<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
|
||||||
items, taking into account stroke width.</p>
|
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>
|
<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
|
<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>
|
(<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
46
dist/docs/classes/Raster.html
vendored
|
|
@ -393,7 +393,7 @@ effects.</p>
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a></tt> — the average color contained in the area covered by the
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt> — the average color contained in the area covered by the
|
||||||
specified path, rectangle or point.
|
specified path, rectangle or point.
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
@ -447,7 +447,7 @@ specified path, rectangle or point.
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a></tt> — the color of the pixel
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt> — the color of the pixel
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -491,7 +491,7 @@ specified path, rectangle or point.
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a></tt> — the color of the pixel
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt> — the color of the pixel
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -1335,6 +1335,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2137,7 +2169,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
364
dist/docs/classes/RgbColor.html
vendored
364
dist/docs/classes/RgbColor.html
vendored
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>RGBColor</title>
|
<title>RgbColor</title>
|
||||||
<base target="classFrame">
|
<base target="classFrame">
|
||||||
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
||||||
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
||||||
|
|
@ -15,11 +15,11 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="reference">
|
<body class="reference">
|
||||||
<div class="reference-class">
|
<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> 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>
|
</div>
|
||||||
|
|
||||||
|
|
@ -29,20 +29,20 @@
|
||||||
|
|
||||||
<div id="rgbcolor-red-green-blue-member" class="member">
|
<div id="rgbcolor-red-green-blue-member" class="member">
|
||||||
<div id="rgbcolor-red-green-blue-link" class="member-link">
|
<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>
|
||||||
<div id="rgbcolor-red-green-blue-description" class="member-description hidden">
|
<div id="rgbcolor-red-green-blue-description" class="member-description hidden">
|
||||||
<div class="member-header">
|
<div class="member-header">
|
||||||
<div class="member-title">
|
<div class="member-title">
|
||||||
<div class="member-link">
|
<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>
|
</div>
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rgbcolor-red-green-blue', false);"></div>
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rgbcolor-red-green-blue', false);"></div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="member-text">
|
<div class="member-text">
|
||||||
<p>Creates an RGBColor object</p>
|
<p>Creates an RgbColor object</p>
|
||||||
|
|
||||||
<ul><b>Parameters:</b>
|
<ul><b>Parameters:</b>
|
||||||
|
|
||||||
|
|
@ -82,7 +82,7 @@ between <tt>0</tt> and <tt>1</tt>
|
||||||
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<b>Example</b> — Creating an RGBColor:
|
<b>Example</b> — Creating an RgbColor:
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="paperscript split">
|
<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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
// 100% red, 0% blue, 50% blue:
|
// 100% red, 0% blue, 50% blue:
|
||||||
circle.fillColor = new RGBColor(1, 0, 0.5);
|
circle.fillColor = new RgbColor(1, 0, 0.5);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
||||||
</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> — Changing the amount of red in a color:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="paperscript split">
|
||||||
|
<div class="button">Run</div>
|
||||||
|
<script type="text/paperscript" canvas="canvas-1">
|
||||||
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
circle.fillColor = 'blue';
|
||||||
|
|
||||||
|
// Blue + red = purple:
|
||||||
|
circle.fillColor.red = 1;
|
||||||
|
</script>
|
||||||
|
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="green-member" class="member">
|
||||||
|
<div id="green-link" class="member-link">
|
||||||
|
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||||
|
</div>
|
||||||
|
<div id="green-description" class="member-description hidden">
|
||||||
|
<div class="member-header">
|
||||||
|
<div class="member-title">
|
||||||
|
<div class="member-link">
|
||||||
|
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-text">
|
||||||
|
<p>The amount of green in the color as a value between <tt>0</tt> and
|
||||||
|
<tt>1</tt>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Type:</b>
|
||||||
|
<li>
|
||||||
|
<tt>Number</tt>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<b>Example</b> — Changing the amount of green in a color:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="paperscript split">
|
||||||
|
<div class="button">Run</div>
|
||||||
|
<script type="text/paperscript" canvas="canvas-2">
|
||||||
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
|
// First we set the fill color to red:
|
||||||
|
circle.fillColor = 'red';
|
||||||
|
|
||||||
|
// Red + green = yellow:
|
||||||
|
circle.fillColor.green = 1;
|
||||||
|
</script>
|
||||||
|
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="blue-member" class="member">
|
||||||
|
<div id="blue-link" class="member-link">
|
||||||
|
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||||
|
</div>
|
||||||
|
<div id="blue-description" class="member-description hidden">
|
||||||
|
<div class="member-header">
|
||||||
|
<div class="member-title">
|
||||||
|
<div class="member-link">
|
||||||
|
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-text">
|
||||||
|
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
||||||
|
<tt>1</tt>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Type:</b>
|
||||||
|
<li>
|
||||||
|
<tt>Number</tt>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<b>Example</b> — Changing the amount of blue in a color:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="paperscript split">
|
||||||
|
<div class="button">Run</div>
|
||||||
|
<script type="text/paperscript" canvas="canvas-3">
|
||||||
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
|
// First we set the fill color to red:
|
||||||
|
circle.fillColor = 'red';
|
||||||
|
|
||||||
|
// Red + blue = purple:
|
||||||
|
circle.fillColor.blue = 1;
|
||||||
|
</script>
|
||||||
|
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -149,7 +304,7 @@ circle.fillColor = new RGBColor(1, 0, 0.5);
|
||||||
</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>
|
console.log(color.type); // 'rgb'</pre>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -190,7 +345,7 @@ colors of the different subclasses support alpha values.</p>
|
||||||
|
|
||||||
<div class="paperscript split">
|
<div class="paperscript split">
|
||||||
<div class="button">Run</div>
|
<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);
|
var circle = new Path.Circle(new Point(80, 50), 30);
|
||||||
|
|
||||||
// Fill the circle with red and give it a 20pt green stroke:
|
// Fill the circle with red and give it a 20pt green stroke:
|
||||||
|
|
@ -203,159 +358,6 @@ circle.style = {
|
||||||
// Make the stroke half transparent:
|
// Make the stroke half transparent:
|
||||||
circle.strokeColor.alpha = 0.5;
|
circle.strokeColor.alpha = 0.5;
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<h3>RGB Components</h3>
|
|
||||||
|
|
||||||
<div id="red-member" class="member">
|
|
||||||
<div id="red-link" class="member-link">
|
|
||||||
<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="red-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The amount of red in the color as a value between <tt>0</tt> and
|
|
||||||
<tt>1</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<b>Example</b> — Changing the amount of red in a color:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="paperscript split">
|
|
||||||
<div class="button">Run</div>
|
|
||||||
<script type="text/paperscript" canvas="canvas-2">
|
|
||||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
|
||||||
circle.fillColor = 'blue';
|
|
||||||
|
|
||||||
// Blue + red = purple:
|
|
||||||
circle.fillColor.red = 1;
|
|
||||||
</script>
|
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="green-member" class="member">
|
|
||||||
<div id="green-link" class="member-link">
|
|
||||||
<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="green-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The amount of green in the color as a value between <tt>0</tt> and
|
|
||||||
<tt>1</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<b>Example</b> — Changing the amount of green in a color:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="paperscript split">
|
|
||||||
<div class="button">Run</div>
|
|
||||||
<script type="text/paperscript" canvas="canvas-3">
|
|
||||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
|
||||||
|
|
||||||
// First we set the fill color to red:
|
|
||||||
circle.fillColor = 'red';
|
|
||||||
|
|
||||||
// Red + green = yellow:
|
|
||||||
circle.fillColor.green = 1;
|
|
||||||
</script>
|
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div id="blue-member" class="member">
|
|
||||||
<div id="blue-link" class="member-link">
|
|
||||||
<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
|
||||||
</div>
|
|
||||||
<div id="blue-description" class="member-description hidden">
|
|
||||||
<div class="member-header">
|
|
||||||
<div class="member-title">
|
|
||||||
<div class="member-link">
|
|
||||||
<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
|
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="member-text">
|
|
||||||
<p>The amount of blue in the color as a value between <tt>0</tt> and
|
|
||||||
<tt>1</tt>.</p>
|
|
||||||
|
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
|
||||||
<li>
|
|
||||||
<tt>Number</tt>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<b>Example</b> — Changing the amount of blue in a color:
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="paperscript split">
|
|
||||||
<div class="button">Run</div>
|
|
||||||
<script type="text/paperscript" canvas="canvas-4">
|
|
||||||
var circle = new Path.Circle(new Point(80, 50), 30);
|
|
||||||
|
|
||||||
// First we set the fill color to red:
|
|
||||||
circle.fillColor = 'red';
|
|
||||||
|
|
||||||
// Red + blue = purple:
|
|
||||||
circle.fillColor.blue = 1;
|
|
||||||
</script>
|
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -528,6 +530,40 @@ function onFrame(event) {
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h3>HSL Components</h3>
|
||||||
|
|
||||||
|
<div id="lightness-member" class="member">
|
||||||
|
<div id="lightness-link" class="member-link">
|
||||||
|
<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
<div id="lightness-description" class="member-description hidden">
|
||||||
|
<div class="member-header">
|
||||||
|
<div class="member-title">
|
||||||
|
<div class="member-link">
|
||||||
|
<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
|
||||||
|
<div class="clear"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-text">
|
||||||
|
<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<ul><b>Type:</b>
|
||||||
|
<li>
|
||||||
|
<tt>Number</tt>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -561,7 +597,7 @@ function onFrame(event) {
|
||||||
<ul><b>Returns:</b>
|
<ul><b>Returns:</b>
|
||||||
|
|
||||||
<li>
|
<li>
|
||||||
<tt><a href="../classes/RGBColor.html"><tt>RGBColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HSBColor.html"><tt>HSBColor</tt></a></tt> — a copy of the color object
|
<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt> — a copy of the color object
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
40
dist/docs/classes/TextItem.html
vendored
40
dist/docs/classes/TextItem.html
vendored
|
|
@ -772,6 +772,38 @@ already contained within a clipping group.</p>
|
||||||
</div>
|
</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-member" class="member">
|
||||||
<div id="parent-link" class="member-link">
|
<div id="parent-link" class="member-link">
|
||||||
<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
|
<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>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set its stroke color to RGB red:
|
// Set its stroke color to RGB red:
|
||||||
circle.strokeColor = new RGBColor(1, 0, 0);
|
circle.strokeColor = new RgbColor(1, 0, 0);
|
||||||
</script>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1574,7 +1606,7 @@ miterLimit imposes a limit on the ratio of the miter length to the
|
||||||
|
|
||||||
<ul><b>Type:</b>
|
<ul><b>Type:</b>
|
||||||
<li>
|
<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>
|
</li>
|
||||||
</ul>
|
</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);
|
var circle = new Path.Circle(new Point(80, 50), 35);
|
||||||
|
|
||||||
// Set the fill color of the circle to RGB red:
|
// 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>
|
</script>
|
||||||
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
|
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
6
dist/docs/classes/index.html
vendored
6
dist/docs/classes/index.html
vendored
|
|
@ -55,10 +55,10 @@
|
||||||
<h2>Colors</h2>
|
<h2>Colors</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../classes/Color.html">Color</a></li>
|
<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/GrayColor.html">GrayColor</a></li>
|
||||||
<li><a href="../classes/HSBColor.html">HSBColor</a></li>
|
<li><a href="../classes/HsbColor.html">HsbColor</a></li>
|
||||||
<li><a href="../classes/HSLColor.html">HSLColor</a></li>
|
<li><a href="../classes/HslColor.html">HslColor</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<li>
|
<li>
|
||||||
<h2>Gradients</h2>
|
<h2>Gradients</h2>
|
||||||
|
|
|
||||||
54
dist/docs/resources/css/codemirror.css
vendored
54
dist/docs/resources/css/codemirror.css
vendored
|
|
@ -92,24 +92,50 @@ span.CodeMirror-selected {
|
||||||
span.cm-keyword {
|
span.cm-keyword {
|
||||||
color: #ff7800;
|
color: #ff7800;
|
||||||
}
|
}
|
||||||
span.cm-number,
|
span.cm-atom,
|
||||||
span.cm-atom {
|
span.cm-number {
|
||||||
color: #3b5bb5;
|
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-def,
|
||||||
span.cm-variable-2,
|
span.cm-variable-2,
|
||||||
span.cm-variable-3 {
|
span.cm-variable-3 {
|
||||||
color: #3a4a64;
|
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
25
dist/docs/resources/css/paperscript.css
vendored
|
|
@ -1,4 +1,5 @@
|
||||||
.paperscript .button {
|
.paperscript .button,
|
||||||
|
.paperscript .explain {
|
||||||
display: none;
|
display: none;
|
||||||
position: relative; /* position (top / right) relative to paperscriptcontainer */
|
position: relative; /* position (top / right) relative to paperscriptcontainer */
|
||||||
float: right; /* align right as block */
|
float: right; /* align right as block */
|
||||||
|
|
@ -6,18 +7,23 @@
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
margin-bottom: -20px; /* move canvas up by 16px (height) + 2 * 2px (padding) */
|
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;
|
border-radius: 4px;
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
top: 8px; /* margin to top */
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperscript .source {
|
.paperscript .button {
|
||||||
overflow: auto;
|
right: 8px; /* margin to right */
|
||||||
border: 1px solid #999;
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paperscript .explain {
|
||||||
|
display: block;
|
||||||
|
right: 64px; /* margin to right */
|
||||||
|
background: #e3f4fc;
|
||||||
|
margin-bottom: -36px; /* (height) + 2 * 2px (padding) */
|
||||||
}
|
}
|
||||||
|
|
||||||
.paperscript:hover .button {
|
.paperscript:hover .button {
|
||||||
|
|
@ -29,6 +35,11 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paperscript .source {
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
|
||||||
.paperscript .CodeMirror {
|
.paperscript .CodeMirror {
|
||||||
margin: 0 !important; /* Override any potential margins again */
|
margin: 0 !important; /* Override any potential margins again */
|
||||||
}
|
}
|
||||||
|
|
|
||||||
7
dist/docs/resources/css/reference.css
vendored
7
dist/docs/resources/css/reference.css
vendored
|
|
@ -17,12 +17,6 @@
|
||||||
.reference a tt {
|
.reference a tt {
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
/*
|
|
||||||
.reference a tt,
|
|
||||||
.reference a tt b {
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.reference p {
|
.reference p {
|
||||||
margin: 0 0 16px 0;
|
margin: 0 0 16px 0;
|
||||||
|
|
@ -58,6 +52,7 @@
|
||||||
* html .reference-packages img {
|
* html .reference-packages img {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reference-packages li {
|
.reference-packages li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
list-style-image: none; /* needed for ie 6 */
|
list-style-image: none; /* needed for ie 6 */
|
||||||
|
|
|
||||||
2
dist/docs/resources/js/codemirror.js
vendored
2
dist/docs/resources/js/codemirror.js
vendored
File diff suppressed because one or more lines are too long
299
dist/docs/resources/js/paper.js
vendored
299
dist/docs/resources/js/paper.js
vendored
|
|
@ -1,27 +1,27 @@
|
||||||
/*!
|
/*!
|
||||||
* Paper.js v0.21
|
* Paper.js v0.22
|
||||||
*
|
*
|
||||||
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||||
* based on Scriptographer.org and designed to be largely API compatible.
|
* based on Scriptographer.org and designed to be largely API compatible.
|
||||||
* http:
|
* http://paperjs.org/
|
||||||
* http:
|
* http://scriptographer.org/
|
||||||
*
|
*
|
||||||
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||||
* http:
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
||||||
*
|
*
|
||||||
* Distributed under the MIT license. See LICENSE file for details.
|
* Distributed under the MIT license. See LICENSE file for details.
|
||||||
*
|
*
|
||||||
* All rights reserved.
|
* 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.
|
* Bootstrap.js JavaScript Framework.
|
||||||
* http:
|
* http://bootstrapjs.org/
|
||||||
*
|
*
|
||||||
* Copyright (c) 2006 - 2011 Juerg Lehni
|
* Copyright (c) 2006 - 2011 Juerg Lehni
|
||||||
* http:
|
* http://lehni.org/
|
||||||
*
|
*
|
||||||
* Distributed under the MIT license.
|
* Distributed under the MIT license.
|
||||||
*
|
*
|
||||||
|
|
@ -31,14 +31,14 @@
|
||||||
*
|
*
|
||||||
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
|
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
|
||||||
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
|
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
|
||||||
* http:
|
* http://marijn.haverbeke.nl/parse-js/
|
||||||
*
|
*
|
||||||
* Ported by to JavaScript by Mihai Bazon
|
* Ported by to JavaScript by Mihai Bazon
|
||||||
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
|
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
|
||||||
* http:
|
* http://mihai.bazon.net/blog/
|
||||||
*
|
*
|
||||||
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
|
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
|
||||||
* http:
|
* http://lehni.org/
|
||||||
*
|
*
|
||||||
* Distributed under the BSD license.
|
* Distributed under the BSD license.
|
||||||
*/
|
*/
|
||||||
|
|
@ -409,7 +409,7 @@ var PaperScope = this.PaperScope = Base.extend({
|
||||||
PaperScope._scopes[this._id] = this;
|
PaperScope._scopes[this._id] = this;
|
||||||
},
|
},
|
||||||
|
|
||||||
version: 0.21,
|
version: 0.22,
|
||||||
|
|
||||||
evaluate: function(code) {
|
evaluate: function(code) {
|
||||||
var res = PaperScript.evaluate(code, this);
|
var res = PaperScript.evaluate(code, this);
|
||||||
|
|
@ -804,7 +804,9 @@ var LinkedPoint = Point.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
statics: {
|
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);
|
var point = new LinkedPoint(LinkedPoint.dont);
|
||||||
point._x = x;
|
point._x = x;
|
||||||
point._y = y;
|
point._y = y;
|
||||||
|
|
@ -893,7 +895,7 @@ var Size = this.Size = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
isZero: function() {
|
isZero: function() {
|
||||||
return this.width == 0 && this.width == 0;
|
return this.width == 0 && this.height == 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
isNaN: function() {
|
isNaN: function() {
|
||||||
|
|
@ -959,13 +961,15 @@ var LinkedSize = Size.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
statics: {
|
statics: {
|
||||||
create: function(owner, setter, width, height) {
|
create: function(owner, setter, width, height, dontLink) {
|
||||||
var point = new LinkedSize(LinkedSize.dont);
|
if (dontLink)
|
||||||
point._width = width;
|
return Size.create(width, height);
|
||||||
point._height = height;
|
var size = new LinkedSize(LinkedSize.dont);
|
||||||
point._owner = owner;
|
size._width = width;
|
||||||
point._setter = setter;
|
size._height = height;
|
||||||
return point;
|
size._owner = owner;
|
||||||
|
size._setter = setter;
|
||||||
|
return size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1020,7 +1024,8 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
getPoint: function() {
|
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) {
|
setPoint: function(point) {
|
||||||
|
|
@ -1031,7 +1036,8 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
getSize: function() {
|
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) {
|
setSize: function(size) {
|
||||||
|
|
@ -1099,7 +1105,7 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
|
|
||||||
getCenter: function() {
|
getCenter: function() {
|
||||||
return LinkedPoint.create(this, 'setCenter',
|
return LinkedPoint.create(this, 'setCenter',
|
||||||
this.getCenterX(), this.getCenterY());
|
this.getCenterX(), this.getCenterY(), arguments[0]);
|
||||||
},
|
},
|
||||||
|
|
||||||
setCenter: function(point) {
|
setCenter: function(point) {
|
||||||
|
|
@ -1223,7 +1229,7 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
set = 'set' + part;
|
set = 'set' + part;
|
||||||
this[get] = function() {
|
this[get] = function() {
|
||||||
return LinkedPoint.create(this, set,
|
return LinkedPoint.create(this, set,
|
||||||
this[getX](), this[getY]());
|
this[getX](), this[getY](), arguments[0]);
|
||||||
};
|
};
|
||||||
this[set] = function(point) {
|
this[set] = function(point) {
|
||||||
point = Point.read(arguments);
|
point = Point.read(arguments);
|
||||||
|
|
@ -1323,7 +1329,7 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
scale: function(hor, ver , center) {
|
scale: function( hor, ver, center) {
|
||||||
if (arguments.length < 2 || typeof ver === 'object') {
|
if (arguments.length < 2 || typeof ver === 'object') {
|
||||||
center = Point.read(arguments, 1);
|
center = Point.read(arguments, 1);
|
||||||
ver = hor;
|
ver = hor;
|
||||||
|
|
@ -1354,7 +1360,7 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
Matrix.getRotateInstance.apply(Matrix, arguments));
|
Matrix.getRotateInstance.apply(Matrix, arguments));
|
||||||
},
|
},
|
||||||
|
|
||||||
shear: function(hor, ver, center) {
|
shear: function( hor, ver, center) {
|
||||||
if (arguments.length < 2 || typeof ver === 'object') {
|
if (arguments.length < 2 || typeof ver === 'object') {
|
||||||
center = Point.read(arguments, 1);
|
center = Point.read(arguments, 1);
|
||||||
ver = hor;
|
ver = hor;
|
||||||
|
|
@ -1471,8 +1477,30 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
max[0] - min[0], max[1] - min[1]);
|
max[0] - min[0], max[1] - min[1]);
|
||||||
},
|
},
|
||||||
|
|
||||||
getDeterminant: function() {
|
inverseTransform: function(point) {
|
||||||
return this._a * this._d - this._b * this._c;
|
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() {
|
getTranslation: function() {
|
||||||
|
|
@ -1498,28 +1526,22 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
isInvertible: function() {
|
isInvertible: function() {
|
||||||
var det = this.getDeterminant();
|
return !!this._getDeterminant();
|
||||||
return isFinite(det) && det != 0 && isFinite(this._tx)
|
|
||||||
&& isFinite(this._ty);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
isSingular: function() {
|
isSingular: function() {
|
||||||
return !this.isInvertible();
|
return !this._getDeterminant();
|
||||||
},
|
},
|
||||||
|
|
||||||
createInverse: function() {
|
createInverse: function() {
|
||||||
var det = this.getDeterminant();
|
var det = this._getDeterminant();
|
||||||
if (isFinite(det) && det != 0 && isFinite(this._tx)
|
return det && Matrix.create(
|
||||||
&& isFinite(this._ty)) {
|
|
||||||
return Matrix.create(
|
|
||||||
this._d / det,
|
this._d / det,
|
||||||
-this._c / det,
|
-this._c / det,
|
||||||
-this._b / det,
|
-this._b / det,
|
||||||
this._a / det,
|
this._a / det,
|
||||||
(this._b * this._ty - this._d * this._tx) / det,
|
(this._b * this._ty - this._d * this._tx) / det,
|
||||||
(this._c * this._tx - this._a * this._ty) / det);
|
(this._c * this._tx - this._a * this._ty) / det);
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
createShiftless: function() {
|
createShiftless: function() {
|
||||||
|
|
@ -1818,11 +1840,20 @@ var Item = this.Item = Base.extend({
|
||||||
delete this._position;
|
delete this._position;
|
||||||
}
|
}
|
||||||
if (flags & ChangeFlag.APPEARANCE) {
|
if (flags & ChangeFlag.APPEARANCE) {
|
||||||
if (this._project)
|
this._project._needsRedraw();
|
||||||
this._project._needsRedraw();
|
|
||||||
}
|
}
|
||||||
if (this._parentSymbol)
|
if (this._parentSymbol)
|
||||||
this._parentSymbol._changed(flags);
|
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() {
|
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() {
|
getParent: function() {
|
||||||
return this._parent;
|
return this._parent;
|
||||||
},
|
},
|
||||||
|
|
@ -2048,8 +2088,7 @@ var Item = this.Item = Base.extend({
|
||||||
matrix.applyToContext(ctx);
|
matrix.applyToContext(ctx);
|
||||||
this.draw(ctx, {});
|
this.draw(ctx, {});
|
||||||
var raster = new Raster(canvas);
|
var raster = new Raster(canvas);
|
||||||
raster.setPosition(this.getPosition());
|
raster.setBounds(bounds);
|
||||||
raster.scale(1 / scale);
|
|
||||||
return raster;
|
return raster;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -2855,7 +2894,7 @@ var Raster = this.Raster = PlacedItem.extend({
|
||||||
channels = new Array(4);
|
channels = new Array(4);
|
||||||
for (var i = 0; i < 4; i++)
|
for (var i = 0; i < 4; i++)
|
||||||
channels[i] = pixels[i] / 255;
|
channels[i] = pixels[i] / 255;
|
||||||
return RGBColor.read(channels);
|
return RgbColor.read(channels);
|
||||||
},
|
},
|
||||||
|
|
||||||
setPixel: function(point, color) {
|
setPixel: function(point, color) {
|
||||||
|
|
@ -3102,6 +3141,7 @@ var Segment = this.Segment = Base.extend({
|
||||||
if (selected)
|
if (selected)
|
||||||
selection[0] = false;
|
selection[0] = false;
|
||||||
selection[index] = selected;
|
selection[index] = selected;
|
||||||
|
path._changed(Change.ATTRIBUTE);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._selectionState = (selection[0] ? SelectionState.POINT : 0)
|
this._selectionState = (selection[0] ? SelectionState.POINT : 0)
|
||||||
|
|
@ -3241,6 +3281,10 @@ var SegmentPoint = Point.extend({
|
||||||
this._owner._changed(this);
|
this._owner._changed(this);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
isZero: function() {
|
||||||
|
return this._x == 0 && this._y == 0;
|
||||||
|
},
|
||||||
|
|
||||||
setSelected: function(selected) {
|
setSelected: function(selected) {
|
||||||
this._owner._setSelected(this, 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)];
|
return [0.5 * (w[0].x + w[5].x)];
|
||||||
if (isFlatEnough(w)) {
|
if (isFlatEnough(w)) {
|
||||||
var line = new Line(w[0], w[5], true);
|
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
|
? line.point.x
|
||||||
: xAxis.intersect(line).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.rect(point._x - 1, point._y - 1, 2, 2);
|
||||||
ctx.fillStyle = '#ffffff';
|
ctx.fillStyle = '#ffffff';
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.restore();
|
|
||||||
}
|
}
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -5051,13 +5095,17 @@ Path.inject({ statics: new function() {
|
||||||
|
|
||||||
Rectangle: function(rect) {
|
Rectangle: function(rect) {
|
||||||
rect = Rectangle.read(arguments);
|
rect = Rectangle.read(arguments);
|
||||||
var path = new Path(),
|
var left = rect.x,
|
||||||
corners = ['getBottomLeft', 'getTopLeft', 'getTopRight',
|
top = rect.y
|
||||||
'getBottomRight'],
|
right = left + rect.width,
|
||||||
segments = new Array(4);
|
bottom = top + rect.height,
|
||||||
for (var i = 0; i < 4; i++)
|
path = new Path();
|
||||||
segments[i] = new Segment(rect[corners[i]]());
|
path._add([
|
||||||
path._add(segments);
|
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;
|
path._closed = true;
|
||||||
return path;
|
return path;
|
||||||
},
|
},
|
||||||
|
|
@ -5070,13 +5118,13 @@ Path.inject({ statics: new function() {
|
||||||
rect = Rectangle.read(arguments, 0, 4);
|
rect = Rectangle.read(arguments, 0, 4);
|
||||||
size = Size.read(arguments, 4, 2);
|
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(),
|
var path = new Path(),
|
||||||
uSize = size.multiply(kappa * 2),
|
uSize = size.multiply(kappa * 2),
|
||||||
bl = rect.getBottomLeft(),
|
bl = rect.getBottomLeft(true),
|
||||||
tl = rect.getTopLeft(),
|
tl = rect.getTopLeft(true),
|
||||||
tr = rect.getTopRight(),
|
tr = rect.getTopRight(true),
|
||||||
br = rect.getBottomRight();
|
br = rect.getBottomRight(true);
|
||||||
path._add([
|
path._add([
|
||||||
new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
|
new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
|
||||||
new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
|
new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
|
||||||
|
|
@ -5097,13 +5145,13 @@ Path.inject({ statics: new function() {
|
||||||
Oval: function(rect) {
|
Oval: function(rect) {
|
||||||
rect = Rectangle.read(arguments);
|
rect = Rectangle.read(arguments);
|
||||||
var path = new Path(),
|
var path = new Path(),
|
||||||
topLeft = rect.getTopLeft(),
|
point = rect.getPoint(true),
|
||||||
size = new Size(rect.width, rect.height),
|
size = rect.getSize(true),
|
||||||
segments = new Array(4);
|
segments = new Array(4);
|
||||||
for (var i = 0; i < 4; i++) {
|
for (var i = 0; i < 4; i++) {
|
||||||
var segment = ovalSegments[i];
|
var segment = ovalSegments[i];
|
||||||
segments[i] = new Segment(
|
segments[i] = new Segment(
|
||||||
segment._point.multiply(size).add(topLeft),
|
segment._point.multiply(size).add(point),
|
||||||
segment._handleIn.multiply(size),
|
segment._handleIn.multiply(size),
|
||||||
segment._handleOut.multiply(size)
|
segment._handleOut.multiply(size)
|
||||||
);
|
);
|
||||||
|
|
@ -5121,7 +5169,7 @@ Path.inject({ statics: new function() {
|
||||||
center = Point.read(arguments, 0, 1);
|
center = Point.read(arguments, 0, 1);
|
||||||
}
|
}
|
||||||
return Path.Oval(new Rectangle(center.subtract(radius),
|
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) {
|
Arc: function(from, through, to) {
|
||||||
|
|
@ -5583,9 +5631,8 @@ var TextItem = this.TextItem = Item.extend({
|
||||||
var PointText = this.PointText = TextItem.extend({
|
var PointText = this.PointText = TextItem.extend({
|
||||||
initialize: function(point) {
|
initialize: function(point) {
|
||||||
this.base();
|
this.base();
|
||||||
var point = Point.read(arguments);
|
this._point = Point.read(arguments).clone();
|
||||||
this._point = LinkedPoint.create(this, 'setPoint', point.x, point.y);
|
this._matrix = new Matrix().translate(this._point);
|
||||||
this._matrix = new Matrix().translate(point);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
clone: function() {
|
clone: function() {
|
||||||
|
|
@ -5595,16 +5642,16 @@ var PointText = this.PointText = TextItem.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
getPoint: function() {
|
getPoint: function() {
|
||||||
return this._point;
|
return LinkedPoint.create(this, 'setPoint',
|
||||||
|
this._point.x, this._point.y);
|
||||||
},
|
},
|
||||||
|
|
||||||
setPoint: function(point) {
|
setPoint: function(point) {
|
||||||
this._transform(new Matrix().translate(
|
this.translate(Point.read(arguments).subtract(this._point));
|
||||||
Point.read(arguments).subtract(this._point)));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getPosition: function() {
|
getPosition: function() {
|
||||||
return this._point;
|
return this.getPoint();
|
||||||
},
|
},
|
||||||
|
|
||||||
setPosition: function(point) {
|
setPosition: function(point) {
|
||||||
|
|
@ -5613,7 +5660,7 @@ var PointText = this.PointText = TextItem.extend({
|
||||||
|
|
||||||
_transform: function(matrix, flags) {
|
_transform: function(matrix, flags) {
|
||||||
this._matrix.preConcatenate(matrix);
|
this._matrix.preConcatenate(matrix);
|
||||||
matrix._transformPoint(this._point, this._point, true);
|
matrix._transformPoint(this._point, this._point);
|
||||||
},
|
},
|
||||||
|
|
||||||
draw: function(ctx) {
|
draw: function(ctx) {
|
||||||
|
|
@ -5771,7 +5818,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
var colorCache = {},
|
var colorCache = {},
|
||||||
colorContext;
|
colorContext;
|
||||||
|
|
||||||
function nameToRGBColor(name) {
|
function nameToRgbColor(name) {
|
||||||
var color = colorCache[name];
|
var color = colorCache[name];
|
||||||
if (color)
|
if (color)
|
||||||
return color.clone();
|
return color.clone();
|
||||||
|
|
@ -5785,10 +5832,10 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
colorContext.fillRect(0, 0, 1, 1);
|
colorContext.fillRect(0, 0, 1, 1);
|
||||||
var data = colorContext.getImageData(0, 0, 1, 1).data,
|
var data = colorContext.getImageData(0, 0, 1, 1).data,
|
||||||
rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
|
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})$/);
|
var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
|
||||||
if (hex.length >= 4) {
|
if (hex.length >= 4) {
|
||||||
var rgb = new Array(3);
|
var rgb = new Array(3);
|
||||||
|
|
@ -5797,7 +5844,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
rgb[i] = parseInt(channel.length == 1
|
rgb[i] = parseInt(channel.length == 1
|
||||||
? channel + channel : channel, 16) / 255;
|
? 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,
|
: (r - g) / delta + 4) * 60,
|
||||||
s = max == 0 ? 0 : delta / max,
|
s = max == 0 ? 0 : delta / max,
|
||||||
v = max;
|
v = max;
|
||||||
return new HSBColor(h, s, v, color._alpha);
|
return new HsbColor(h, s, v, color._alpha);
|
||||||
},
|
},
|
||||||
|
|
||||||
'hsb-rgb': function(color) {
|
'hsb-rgb': function(color) {
|
||||||
|
|
@ -5840,7 +5887,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
b * (1 - s * f),
|
b * (1 - s * f),
|
||||||
b * (1 - s * (1 - 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) {
|
'rgb-hsl': function(color) {
|
||||||
|
|
@ -5850,15 +5897,16 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
max = Math.max(r, g, b),
|
max = Math.max(r, g, b),
|
||||||
min = Math.min(r, g, b),
|
min = Math.min(r, g, b),
|
||||||
delta = max - min,
|
delta = max - min,
|
||||||
h = delta == 0 ? 0
|
achromatic = delta == 0,
|
||||||
|
h = achromatic ? 0
|
||||||
: ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
|
: ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
|
||||||
: max == g ? (b - r) / delta + 2
|
: max == g ? (b - r) / delta + 2
|
||||||
: (r - g) / delta + 4) * 60,
|
: (r - g) / delta + 4) * 60,
|
||||||
l = (max + min) / 2,
|
l = (max + min) / 2,
|
||||||
s = l < 0.5
|
s = achromatic ? 0 : l < 0.5
|
||||||
? delta / (max + min)
|
? delta / (max + min)
|
||||||
: delta / (2 - max - min);
|
: delta / (2 - max - min);
|
||||||
return new HSLColor(h, s, l, color._alpha);
|
return new HslColor(h, s, l, color._alpha);
|
||||||
},
|
},
|
||||||
|
|
||||||
'hsl-rgb': function(color) {
|
'hsl-rgb': function(color) {
|
||||||
|
|
@ -5867,7 +5915,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
l = color._lightness,
|
l = color._lightness,
|
||||||
t1, t2, c;
|
t1, t2, c;
|
||||||
if (s == 0)
|
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 ],
|
var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
|
||||||
t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
|
t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
|
||||||
t1 = 2 * l - t2,
|
t1 = 2 * l - t2,
|
||||||
|
|
@ -5884,7 +5932,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
|
? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
|
||||||
: t1;
|
: 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) {
|
'rgb-gray': function(color) {
|
||||||
|
|
@ -5894,15 +5942,15 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
|
|
||||||
'gray-rgb': function(color) {
|
'gray-rgb': function(color) {
|
||||||
var comp = 1 - color._gray;
|
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) {
|
'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) {
|
'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 (typeof arg === 'object' && !isArray) {
|
||||||
if (!type) {
|
if (!type) {
|
||||||
return arg.red !== undefined
|
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
|
: arg.gray !== undefined
|
||||||
? new GrayColor(arg.gray, arg.alpha)
|
? new GrayColor(arg.gray, arg.alpha)
|
||||||
: arg.lightness !== undefined
|
: arg.lightness !== undefined
|
||||||
? new HSLColor(arg.hue, arg.saturation, arg.lightness,
|
? new HslColor(arg.hue, arg.saturation, arg.lightness,
|
||||||
arg.alpha)
|
arg.alpha)
|
||||||
: arg.hue !== undefined
|
: arg.hue !== undefined
|
||||||
? new HSBColor(arg.hue, arg.saturation, arg.brightness,
|
? new HsbColor(arg.hue, arg.saturation, arg.brightness,
|
||||||
arg.alpha)
|
arg.alpha)
|
||||||
: new RGBColor();
|
: new RgbColor();
|
||||||
} else {
|
} else {
|
||||||
return Color.read(arguments).convert(type);
|
return Color.read(arguments).convert(type);
|
||||||
}
|
}
|
||||||
} else if (typeof arg === 'string') {
|
} else if (typeof arg === 'string') {
|
||||||
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
|
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
|
||||||
? hexToRGBColor(arg)
|
? hexToRgbColor(arg)
|
||||||
: nameToRGBColor(arg);
|
: nameToRgbColor(arg);
|
||||||
return type
|
return type
|
||||||
? rgbColor.convert(type)
|
? rgbColor.convert(type)
|
||||||
: rgbColor;
|
: rgbColor;
|
||||||
|
|
@ -5940,7 +5988,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
: Array.prototype.slice.call(arguments);
|
: Array.prototype.slice.call(arguments);
|
||||||
if (!type) {
|
if (!type) {
|
||||||
if (components.length >= 3)
|
if (components.length >= 3)
|
||||||
return new RGBColor(components);
|
return new RgbColor(components);
|
||||||
return new GrayColor(components);
|
return new GrayColor(components);
|
||||||
} else {
|
} else {
|
||||||
Base.each(this._components,
|
Base.each(this._components,
|
||||||
|
|
@ -6121,17 +6169,17 @@ var GrayColor = this.GrayColor = Color.extend({
|
||||||
_colorType: 'gray'
|
_colorType: 'gray'
|
||||||
});
|
});
|
||||||
|
|
||||||
var RGBColor = this.RGBColor = Color.extend({
|
var RgbColor = this.RgbColor = this.RGBColor = Color.extend({
|
||||||
|
|
||||||
_colorType: 'rgb'
|
_colorType: 'rgb'
|
||||||
});
|
});
|
||||||
|
|
||||||
var HSBColor = this.HSBColor = Color.extend({
|
var HsbColor = this.HsbColor = this.HSBColor = Color.extend({
|
||||||
|
|
||||||
_colorType: 'hsb'
|
_colorType: 'hsb'
|
||||||
});
|
});
|
||||||
|
|
||||||
var HSLColor = this.HSLColor = Color.extend({
|
var HslColor = this.HslColor = this.HSLColor = Color.extend({
|
||||||
|
|
||||||
_colorType: 'hsl'
|
_colorType: 'hsl'
|
||||||
});
|
});
|
||||||
|
|
@ -6489,6 +6537,7 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
initialize: function(canvas) {
|
initialize: function(canvas) {
|
||||||
this.base();
|
this.base();
|
||||||
var size;
|
var size;
|
||||||
|
|
||||||
if (typeof canvas === 'string')
|
if (typeof canvas === 'string')
|
||||||
canvas = document.getElementById(canvas);
|
canvas = document.getElementById(canvas);
|
||||||
if (canvas instanceof HTMLCanvasElement) {
|
if (canvas instanceof HTMLCanvasElement) {
|
||||||
|
|
@ -6533,16 +6582,19 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
this._id = this._canvas.getAttribute('id');
|
this._id = this._canvas.getAttribute('id');
|
||||||
if (this._id == null)
|
if (this._id == null)
|
||||||
this._canvas.setAttribute('id', this._id = 'canvas-' + View._id++);
|
this._canvas.setAttribute('id', this._id = 'canvas-' + View._id++);
|
||||||
|
|
||||||
View._views[this._id] = this;
|
View._views[this._id] = this;
|
||||||
this._viewSize = LinkedSize.create(this, 'setViewSize',
|
this._viewSize = LinkedSize.create(this, 'setViewSize',
|
||||||
size.width, size.height);
|
size.width, size.height);
|
||||||
this._context = this._canvas.getContext('2d');
|
this._context = this._canvas.getContext('2d');
|
||||||
this._matrix = new Matrix();
|
this._matrix = new Matrix();
|
||||||
this._zoom = 1;
|
this._zoom = 1;
|
||||||
|
|
||||||
this._events = this._createEvents();
|
this._events = this._createEvents();
|
||||||
DomEvent.add(this._canvas, this._events);
|
DomEvent.add(this._canvas, this._events);
|
||||||
if (!View._focused)
|
if (!View._focused)
|
||||||
View._focused = this;
|
View._focused = this;
|
||||||
|
|
||||||
this._scope._redrawNotified = false;
|
this._scope._redrawNotified = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -6557,6 +6609,22 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
return true;
|
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() {
|
getCanvas: function() {
|
||||||
return this._canvas;
|
return this._canvas;
|
||||||
},
|
},
|
||||||
|
|
@ -6581,16 +6649,12 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
delta: delta
|
delta: delta
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (this._onFrameCallback) {
|
this._redraw();
|
||||||
this._onFrameCallback(0, true);
|
|
||||||
} else {
|
|
||||||
this.draw(true);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getBounds: function() {
|
getBounds: function() {
|
||||||
if (!this._bounds)
|
if (!this._bounds)
|
||||||
this._bounds = this._matrix._transformBounds(
|
this._bounds = this._getInverse()._transformBounds(
|
||||||
new Rectangle(new Point(), this._viewSize));
|
new Rectangle(new Point(), this._viewSize));
|
||||||
return this._bounds;
|
return this._bounds;
|
||||||
},
|
},
|
||||||
|
|
@ -6624,12 +6688,6 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
this._transform(new Matrix().translate(Point.read(arguments).negate()));
|
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) {
|
draw: function(checkRedraw) {
|
||||||
if (checkRedraw && !this._redrawNeeded)
|
if (checkRedraw && !this._redrawNeeded)
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -6704,7 +6762,12 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
onResize: null
|
onResize: null
|
||||||
}, new function() {
|
}, {
|
||||||
|
statics: {
|
||||||
|
_views: {},
|
||||||
|
_id: 0
|
||||||
|
}
|
||||||
|
}, new function() {
|
||||||
var tool,
|
var tool,
|
||||||
timer,
|
timer,
|
||||||
curPoint,
|
curPoint,
|
||||||
|
|
@ -6815,8 +6878,6 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
statics: {
|
statics: {
|
||||||
_views: {},
|
|
||||||
_id: 0,
|
|
||||||
|
|
||||||
updateFocus: updateFocus
|
updateFocus: updateFocus
|
||||||
}
|
}
|
||||||
|
|
@ -6883,7 +6944,9 @@ var Key = this.Key = new function() {
|
||||||
39: 'right',
|
39: 'right',
|
||||||
40: 'down',
|
40: 'down',
|
||||||
46: 'delete',
|
46: 'delete',
|
||||||
91: 'command'
|
91: 'command',
|
||||||
|
93: 'command',
|
||||||
|
224: 'command'
|
||||||
},
|
},
|
||||||
|
|
||||||
modifiers = Base.merge({
|
modifiers = Base.merge({
|
||||||
|
|
@ -6920,12 +6983,10 @@ var Key = this.Key = new function() {
|
||||||
var code = event.which || event.keyCode;
|
var code = event.which || event.keyCode;
|
||||||
var key = keys[code], name;
|
var key = keys[code], name;
|
||||||
if (key) {
|
if (key) {
|
||||||
if (modifiers[name = Base.camelize(key)] !== undefined) {
|
if ((name = Base.camelize(key)) in modifiers)
|
||||||
modifiers[name] = true;
|
modifiers[name] = true;
|
||||||
} else {
|
charCodeMap[code] = 0;
|
||||||
charCodeMap[code] = 0;
|
handleKey(true, code, null, event);
|
||||||
handleKey(true, code, null, event);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
downCode = code;
|
downCode = code;
|
||||||
}
|
}
|
||||||
|
|
@ -6943,9 +7004,9 @@ var Key = this.Key = new function() {
|
||||||
keyup: function(event) {
|
keyup: function(event) {
|
||||||
var code = event.which || event.keyCode,
|
var code = event.which || event.keyCode,
|
||||||
key = keys[code], name;
|
key = keys[code], name;
|
||||||
if (key && modifiers[name = Base.camelize(key)] !== undefined) {
|
if (key && (name = Base.camelize(key)) in modifiers)
|
||||||
modifiers[name] = false;
|
modifiers[name] = false;
|
||||||
} else if (charCodeMap[code] != null) {
|
if (charCodeMap[code] != null) {
|
||||||
handleKey(false, code, charCodeMap[code], event);
|
handleKey(false, code, charCodeMap[code], event);
|
||||||
delete charCodeMap[code];
|
delete charCodeMap[code];
|
||||||
}
|
}
|
||||||
|
|
@ -7778,4 +7839,4 @@ Base.each(this, function(val, key) {
|
||||||
|
|
||||||
this.enumerable = true;
|
this.enumerable = true;
|
||||||
return new (PaperScope.inject(this));
|
return new (PaperScope.inject(this));
|
||||||
};
|
};
|
||||||
299
dist/paper.js
vendored
299
dist/paper.js
vendored
|
|
@ -1,27 +1,27 @@
|
||||||
/*!
|
/*!
|
||||||
* Paper.js v0.21
|
* Paper.js v0.22
|
||||||
*
|
*
|
||||||
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
* This file is part of Paper.js, a JavaScript Vector Graphics Library,
|
||||||
* based on Scriptographer.org and designed to be largely API compatible.
|
* based on Scriptographer.org and designed to be largely API compatible.
|
||||||
* http:
|
* http://paperjs.org/
|
||||||
* http:
|
* http://scriptographer.org/
|
||||||
*
|
*
|
||||||
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
|
||||||
* http:
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
||||||
*
|
*
|
||||||
* Distributed under the MIT license. See LICENSE file for details.
|
* Distributed under the MIT license. See LICENSE file for details.
|
||||||
*
|
*
|
||||||
* All rights reserved.
|
* 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.
|
* Bootstrap.js JavaScript Framework.
|
||||||
* http:
|
* http://bootstrapjs.org/
|
||||||
*
|
*
|
||||||
* Copyright (c) 2006 - 2011 Juerg Lehni
|
* Copyright (c) 2006 - 2011 Juerg Lehni
|
||||||
* http:
|
* http://lehni.org/
|
||||||
*
|
*
|
||||||
* Distributed under the MIT license.
|
* Distributed under the MIT license.
|
||||||
*
|
*
|
||||||
|
|
@ -31,14 +31,14 @@
|
||||||
*
|
*
|
||||||
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
|
* A JavaScript tokenizer / parser / generator, originally written in Lisp.
|
||||||
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
|
* Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
|
||||||
* http:
|
* http://marijn.haverbeke.nl/parse-js/
|
||||||
*
|
*
|
||||||
* Ported by to JavaScript by Mihai Bazon
|
* Ported by to JavaScript by Mihai Bazon
|
||||||
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
|
* Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
|
||||||
* http:
|
* http://mihai.bazon.net/blog/
|
||||||
*
|
*
|
||||||
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
|
* Modifications and adaptions to browser (c) 2011, Juerg Lehni
|
||||||
* http:
|
* http://lehni.org/
|
||||||
*
|
*
|
||||||
* Distributed under the BSD license.
|
* Distributed under the BSD license.
|
||||||
*/
|
*/
|
||||||
|
|
@ -409,7 +409,7 @@ var PaperScope = this.PaperScope = Base.extend({
|
||||||
PaperScope._scopes[this._id] = this;
|
PaperScope._scopes[this._id] = this;
|
||||||
},
|
},
|
||||||
|
|
||||||
version: 0.21,
|
version: 0.22,
|
||||||
|
|
||||||
evaluate: function(code) {
|
evaluate: function(code) {
|
||||||
var res = PaperScript.evaluate(code, this);
|
var res = PaperScript.evaluate(code, this);
|
||||||
|
|
@ -804,7 +804,9 @@ var LinkedPoint = Point.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
statics: {
|
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);
|
var point = new LinkedPoint(LinkedPoint.dont);
|
||||||
point._x = x;
|
point._x = x;
|
||||||
point._y = y;
|
point._y = y;
|
||||||
|
|
@ -893,7 +895,7 @@ var Size = this.Size = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
isZero: function() {
|
isZero: function() {
|
||||||
return this.width == 0 && this.width == 0;
|
return this.width == 0 && this.height == 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
isNaN: function() {
|
isNaN: function() {
|
||||||
|
|
@ -959,13 +961,15 @@ var LinkedSize = Size.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
statics: {
|
statics: {
|
||||||
create: function(owner, setter, width, height) {
|
create: function(owner, setter, width, height, dontLink) {
|
||||||
var point = new LinkedSize(LinkedSize.dont);
|
if (dontLink)
|
||||||
point._width = width;
|
return Size.create(width, height);
|
||||||
point._height = height;
|
var size = new LinkedSize(LinkedSize.dont);
|
||||||
point._owner = owner;
|
size._width = width;
|
||||||
point._setter = setter;
|
size._height = height;
|
||||||
return point;
|
size._owner = owner;
|
||||||
|
size._setter = setter;
|
||||||
|
return size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -1020,7 +1024,8 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
getPoint: function() {
|
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) {
|
setPoint: function(point) {
|
||||||
|
|
@ -1031,7 +1036,8 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
getSize: function() {
|
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) {
|
setSize: function(size) {
|
||||||
|
|
@ -1099,7 +1105,7 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
|
|
||||||
getCenter: function() {
|
getCenter: function() {
|
||||||
return LinkedPoint.create(this, 'setCenter',
|
return LinkedPoint.create(this, 'setCenter',
|
||||||
this.getCenterX(), this.getCenterY());
|
this.getCenterX(), this.getCenterY(), arguments[0]);
|
||||||
},
|
},
|
||||||
|
|
||||||
setCenter: function(point) {
|
setCenter: function(point) {
|
||||||
|
|
@ -1223,7 +1229,7 @@ var Rectangle = this.Rectangle = Base.extend({
|
||||||
set = 'set' + part;
|
set = 'set' + part;
|
||||||
this[get] = function() {
|
this[get] = function() {
|
||||||
return LinkedPoint.create(this, set,
|
return LinkedPoint.create(this, set,
|
||||||
this[getX](), this[getY]());
|
this[getX](), this[getY](), arguments[0]);
|
||||||
};
|
};
|
||||||
this[set] = function(point) {
|
this[set] = function(point) {
|
||||||
point = Point.read(arguments);
|
point = Point.read(arguments);
|
||||||
|
|
@ -1323,7 +1329,7 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
scale: function(hor, ver , center) {
|
scale: function( hor, ver, center) {
|
||||||
if (arguments.length < 2 || typeof ver === 'object') {
|
if (arguments.length < 2 || typeof ver === 'object') {
|
||||||
center = Point.read(arguments, 1);
|
center = Point.read(arguments, 1);
|
||||||
ver = hor;
|
ver = hor;
|
||||||
|
|
@ -1354,7 +1360,7 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
Matrix.getRotateInstance.apply(Matrix, arguments));
|
Matrix.getRotateInstance.apply(Matrix, arguments));
|
||||||
},
|
},
|
||||||
|
|
||||||
shear: function(hor, ver, center) {
|
shear: function( hor, ver, center) {
|
||||||
if (arguments.length < 2 || typeof ver === 'object') {
|
if (arguments.length < 2 || typeof ver === 'object') {
|
||||||
center = Point.read(arguments, 1);
|
center = Point.read(arguments, 1);
|
||||||
ver = hor;
|
ver = hor;
|
||||||
|
|
@ -1471,8 +1477,30 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
max[0] - min[0], max[1] - min[1]);
|
max[0] - min[0], max[1] - min[1]);
|
||||||
},
|
},
|
||||||
|
|
||||||
getDeterminant: function() {
|
inverseTransform: function(point) {
|
||||||
return this._a * this._d - this._b * this._c;
|
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() {
|
getTranslation: function() {
|
||||||
|
|
@ -1498,28 +1526,22 @@ var Matrix = this.Matrix = Base.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
isInvertible: function() {
|
isInvertible: function() {
|
||||||
var det = this.getDeterminant();
|
return !!this._getDeterminant();
|
||||||
return isFinite(det) && det != 0 && isFinite(this._tx)
|
|
||||||
&& isFinite(this._ty);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
isSingular: function() {
|
isSingular: function() {
|
||||||
return !this.isInvertible();
|
return !this._getDeterminant();
|
||||||
},
|
},
|
||||||
|
|
||||||
createInverse: function() {
|
createInverse: function() {
|
||||||
var det = this.getDeterminant();
|
var det = this._getDeterminant();
|
||||||
if (isFinite(det) && det != 0 && isFinite(this._tx)
|
return det && Matrix.create(
|
||||||
&& isFinite(this._ty)) {
|
|
||||||
return Matrix.create(
|
|
||||||
this._d / det,
|
this._d / det,
|
||||||
-this._c / det,
|
-this._c / det,
|
||||||
-this._b / det,
|
-this._b / det,
|
||||||
this._a / det,
|
this._a / det,
|
||||||
(this._b * this._ty - this._d * this._tx) / det,
|
(this._b * this._ty - this._d * this._tx) / det,
|
||||||
(this._c * this._tx - this._a * this._ty) / det);
|
(this._c * this._tx - this._a * this._ty) / det);
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
createShiftless: function() {
|
createShiftless: function() {
|
||||||
|
|
@ -1818,11 +1840,20 @@ var Item = this.Item = Base.extend({
|
||||||
delete this._position;
|
delete this._position;
|
||||||
}
|
}
|
||||||
if (flags & ChangeFlag.APPEARANCE) {
|
if (flags & ChangeFlag.APPEARANCE) {
|
||||||
if (this._project)
|
this._project._needsRedraw();
|
||||||
this._project._needsRedraw();
|
|
||||||
}
|
}
|
||||||
if (this._parentSymbol)
|
if (this._parentSymbol)
|
||||||
this._parentSymbol._changed(flags);
|
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() {
|
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() {
|
getParent: function() {
|
||||||
return this._parent;
|
return this._parent;
|
||||||
},
|
},
|
||||||
|
|
@ -2048,8 +2088,7 @@ var Item = this.Item = Base.extend({
|
||||||
matrix.applyToContext(ctx);
|
matrix.applyToContext(ctx);
|
||||||
this.draw(ctx, {});
|
this.draw(ctx, {});
|
||||||
var raster = new Raster(canvas);
|
var raster = new Raster(canvas);
|
||||||
raster.setPosition(this.getPosition());
|
raster.setBounds(bounds);
|
||||||
raster.scale(1 / scale);
|
|
||||||
return raster;
|
return raster;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -2855,7 +2894,7 @@ var Raster = this.Raster = PlacedItem.extend({
|
||||||
channels = new Array(4);
|
channels = new Array(4);
|
||||||
for (var i = 0; i < 4; i++)
|
for (var i = 0; i < 4; i++)
|
||||||
channels[i] = pixels[i] / 255;
|
channels[i] = pixels[i] / 255;
|
||||||
return RGBColor.read(channels);
|
return RgbColor.read(channels);
|
||||||
},
|
},
|
||||||
|
|
||||||
setPixel: function(point, color) {
|
setPixel: function(point, color) {
|
||||||
|
|
@ -3102,6 +3141,7 @@ var Segment = this.Segment = Base.extend({
|
||||||
if (selected)
|
if (selected)
|
||||||
selection[0] = false;
|
selection[0] = false;
|
||||||
selection[index] = selected;
|
selection[index] = selected;
|
||||||
|
path._changed(Change.ATTRIBUTE);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._selectionState = (selection[0] ? SelectionState.POINT : 0)
|
this._selectionState = (selection[0] ? SelectionState.POINT : 0)
|
||||||
|
|
@ -3241,6 +3281,10 @@ var SegmentPoint = Point.extend({
|
||||||
this._owner._changed(this);
|
this._owner._changed(this);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
isZero: function() {
|
||||||
|
return this._x == 0 && this._y == 0;
|
||||||
|
},
|
||||||
|
|
||||||
setSelected: function(selected) {
|
setSelected: function(selected) {
|
||||||
this._owner._setSelected(this, 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)];
|
return [0.5 * (w[0].x + w[5].x)];
|
||||||
if (isFlatEnough(w)) {
|
if (isFlatEnough(w)) {
|
||||||
var line = new Line(w[0], w[5], true);
|
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
|
? line.point.x
|
||||||
: xAxis.intersect(line).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.rect(point._x - 1, point._y - 1, 2, 2);
|
||||||
ctx.fillStyle = '#ffffff';
|
ctx.fillStyle = '#ffffff';
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.restore();
|
|
||||||
}
|
}
|
||||||
|
ctx.restore();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -5051,13 +5095,17 @@ Path.inject({ statics: new function() {
|
||||||
|
|
||||||
Rectangle: function(rect) {
|
Rectangle: function(rect) {
|
||||||
rect = Rectangle.read(arguments);
|
rect = Rectangle.read(arguments);
|
||||||
var path = new Path(),
|
var left = rect.x,
|
||||||
corners = ['getBottomLeft', 'getTopLeft', 'getTopRight',
|
top = rect.y
|
||||||
'getBottomRight'],
|
right = left + rect.width,
|
||||||
segments = new Array(4);
|
bottom = top + rect.height,
|
||||||
for (var i = 0; i < 4; i++)
|
path = new Path();
|
||||||
segments[i] = new Segment(rect[corners[i]]());
|
path._add([
|
||||||
path._add(segments);
|
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;
|
path._closed = true;
|
||||||
return path;
|
return path;
|
||||||
},
|
},
|
||||||
|
|
@ -5070,13 +5118,13 @@ Path.inject({ statics: new function() {
|
||||||
rect = Rectangle.read(arguments, 0, 4);
|
rect = Rectangle.read(arguments, 0, 4);
|
||||||
size = Size.read(arguments, 4, 2);
|
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(),
|
var path = new Path(),
|
||||||
uSize = size.multiply(kappa * 2),
|
uSize = size.multiply(kappa * 2),
|
||||||
bl = rect.getBottomLeft(),
|
bl = rect.getBottomLeft(true),
|
||||||
tl = rect.getTopLeft(),
|
tl = rect.getTopLeft(true),
|
||||||
tr = rect.getTopRight(),
|
tr = rect.getTopRight(true),
|
||||||
br = rect.getBottomRight();
|
br = rect.getBottomRight(true);
|
||||||
path._add([
|
path._add([
|
||||||
new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
|
new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
|
||||||
new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
|
new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
|
||||||
|
|
@ -5097,13 +5145,13 @@ Path.inject({ statics: new function() {
|
||||||
Oval: function(rect) {
|
Oval: function(rect) {
|
||||||
rect = Rectangle.read(arguments);
|
rect = Rectangle.read(arguments);
|
||||||
var path = new Path(),
|
var path = new Path(),
|
||||||
topLeft = rect.getTopLeft(),
|
point = rect.getPoint(true),
|
||||||
size = new Size(rect.width, rect.height),
|
size = rect.getSize(true),
|
||||||
segments = new Array(4);
|
segments = new Array(4);
|
||||||
for (var i = 0; i < 4; i++) {
|
for (var i = 0; i < 4; i++) {
|
||||||
var segment = ovalSegments[i];
|
var segment = ovalSegments[i];
|
||||||
segments[i] = new Segment(
|
segments[i] = new Segment(
|
||||||
segment._point.multiply(size).add(topLeft),
|
segment._point.multiply(size).add(point),
|
||||||
segment._handleIn.multiply(size),
|
segment._handleIn.multiply(size),
|
||||||
segment._handleOut.multiply(size)
|
segment._handleOut.multiply(size)
|
||||||
);
|
);
|
||||||
|
|
@ -5121,7 +5169,7 @@ Path.inject({ statics: new function() {
|
||||||
center = Point.read(arguments, 0, 1);
|
center = Point.read(arguments, 0, 1);
|
||||||
}
|
}
|
||||||
return Path.Oval(new Rectangle(center.subtract(radius),
|
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) {
|
Arc: function(from, through, to) {
|
||||||
|
|
@ -5583,9 +5631,8 @@ var TextItem = this.TextItem = Item.extend({
|
||||||
var PointText = this.PointText = TextItem.extend({
|
var PointText = this.PointText = TextItem.extend({
|
||||||
initialize: function(point) {
|
initialize: function(point) {
|
||||||
this.base();
|
this.base();
|
||||||
var point = Point.read(arguments);
|
this._point = Point.read(arguments).clone();
|
||||||
this._point = LinkedPoint.create(this, 'setPoint', point.x, point.y);
|
this._matrix = new Matrix().translate(this._point);
|
||||||
this._matrix = new Matrix().translate(point);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
clone: function() {
|
clone: function() {
|
||||||
|
|
@ -5595,16 +5642,16 @@ var PointText = this.PointText = TextItem.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
getPoint: function() {
|
getPoint: function() {
|
||||||
return this._point;
|
return LinkedPoint.create(this, 'setPoint',
|
||||||
|
this._point.x, this._point.y);
|
||||||
},
|
},
|
||||||
|
|
||||||
setPoint: function(point) {
|
setPoint: function(point) {
|
||||||
this._transform(new Matrix().translate(
|
this.translate(Point.read(arguments).subtract(this._point));
|
||||||
Point.read(arguments).subtract(this._point)));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getPosition: function() {
|
getPosition: function() {
|
||||||
return this._point;
|
return this.getPoint();
|
||||||
},
|
},
|
||||||
|
|
||||||
setPosition: function(point) {
|
setPosition: function(point) {
|
||||||
|
|
@ -5613,7 +5660,7 @@ var PointText = this.PointText = TextItem.extend({
|
||||||
|
|
||||||
_transform: function(matrix, flags) {
|
_transform: function(matrix, flags) {
|
||||||
this._matrix.preConcatenate(matrix);
|
this._matrix.preConcatenate(matrix);
|
||||||
matrix._transformPoint(this._point, this._point, true);
|
matrix._transformPoint(this._point, this._point);
|
||||||
},
|
},
|
||||||
|
|
||||||
draw: function(ctx) {
|
draw: function(ctx) {
|
||||||
|
|
@ -5771,7 +5818,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
var colorCache = {},
|
var colorCache = {},
|
||||||
colorContext;
|
colorContext;
|
||||||
|
|
||||||
function nameToRGBColor(name) {
|
function nameToRgbColor(name) {
|
||||||
var color = colorCache[name];
|
var color = colorCache[name];
|
||||||
if (color)
|
if (color)
|
||||||
return color.clone();
|
return color.clone();
|
||||||
|
|
@ -5785,10 +5832,10 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
colorContext.fillRect(0, 0, 1, 1);
|
colorContext.fillRect(0, 0, 1, 1);
|
||||||
var data = colorContext.getImageData(0, 0, 1, 1).data,
|
var data = colorContext.getImageData(0, 0, 1, 1).data,
|
||||||
rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
|
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})$/);
|
var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
|
||||||
if (hex.length >= 4) {
|
if (hex.length >= 4) {
|
||||||
var rgb = new Array(3);
|
var rgb = new Array(3);
|
||||||
|
|
@ -5797,7 +5844,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
rgb[i] = parseInt(channel.length == 1
|
rgb[i] = parseInt(channel.length == 1
|
||||||
? channel + channel : channel, 16) / 255;
|
? 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,
|
: (r - g) / delta + 4) * 60,
|
||||||
s = max == 0 ? 0 : delta / max,
|
s = max == 0 ? 0 : delta / max,
|
||||||
v = max;
|
v = max;
|
||||||
return new HSBColor(h, s, v, color._alpha);
|
return new HsbColor(h, s, v, color._alpha);
|
||||||
},
|
},
|
||||||
|
|
||||||
'hsb-rgb': function(color) {
|
'hsb-rgb': function(color) {
|
||||||
|
|
@ -5840,7 +5887,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
b * (1 - s * f),
|
b * (1 - s * f),
|
||||||
b * (1 - s * (1 - 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) {
|
'rgb-hsl': function(color) {
|
||||||
|
|
@ -5850,15 +5897,16 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
max = Math.max(r, g, b),
|
max = Math.max(r, g, b),
|
||||||
min = Math.min(r, g, b),
|
min = Math.min(r, g, b),
|
||||||
delta = max - min,
|
delta = max - min,
|
||||||
h = delta == 0 ? 0
|
achromatic = delta == 0,
|
||||||
|
h = achromatic ? 0
|
||||||
: ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
|
: ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
|
||||||
: max == g ? (b - r) / delta + 2
|
: max == g ? (b - r) / delta + 2
|
||||||
: (r - g) / delta + 4) * 60,
|
: (r - g) / delta + 4) * 60,
|
||||||
l = (max + min) / 2,
|
l = (max + min) / 2,
|
||||||
s = l < 0.5
|
s = achromatic ? 0 : l < 0.5
|
||||||
? delta / (max + min)
|
? delta / (max + min)
|
||||||
: delta / (2 - max - min);
|
: delta / (2 - max - min);
|
||||||
return new HSLColor(h, s, l, color._alpha);
|
return new HslColor(h, s, l, color._alpha);
|
||||||
},
|
},
|
||||||
|
|
||||||
'hsl-rgb': function(color) {
|
'hsl-rgb': function(color) {
|
||||||
|
|
@ -5867,7 +5915,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
l = color._lightness,
|
l = color._lightness,
|
||||||
t1, t2, c;
|
t1, t2, c;
|
||||||
if (s == 0)
|
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 ],
|
var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
|
||||||
t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
|
t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
|
||||||
t1 = 2 * l - t2,
|
t1 = 2 * l - t2,
|
||||||
|
|
@ -5884,7 +5932,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
|
? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
|
||||||
: t1;
|
: 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) {
|
'rgb-gray': function(color) {
|
||||||
|
|
@ -5894,15 +5942,15 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
|
|
||||||
'gray-rgb': function(color) {
|
'gray-rgb': function(color) {
|
||||||
var comp = 1 - color._gray;
|
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) {
|
'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) {
|
'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 (typeof arg === 'object' && !isArray) {
|
||||||
if (!type) {
|
if (!type) {
|
||||||
return arg.red !== undefined
|
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
|
: arg.gray !== undefined
|
||||||
? new GrayColor(arg.gray, arg.alpha)
|
? new GrayColor(arg.gray, arg.alpha)
|
||||||
: arg.lightness !== undefined
|
: arg.lightness !== undefined
|
||||||
? new HSLColor(arg.hue, arg.saturation, arg.lightness,
|
? new HslColor(arg.hue, arg.saturation, arg.lightness,
|
||||||
arg.alpha)
|
arg.alpha)
|
||||||
: arg.hue !== undefined
|
: arg.hue !== undefined
|
||||||
? new HSBColor(arg.hue, arg.saturation, arg.brightness,
|
? new HsbColor(arg.hue, arg.saturation, arg.brightness,
|
||||||
arg.alpha)
|
arg.alpha)
|
||||||
: new RGBColor();
|
: new RgbColor();
|
||||||
} else {
|
} else {
|
||||||
return Color.read(arguments).convert(type);
|
return Color.read(arguments).convert(type);
|
||||||
}
|
}
|
||||||
} else if (typeof arg === 'string') {
|
} else if (typeof arg === 'string') {
|
||||||
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
|
var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
|
||||||
? hexToRGBColor(arg)
|
? hexToRgbColor(arg)
|
||||||
: nameToRGBColor(arg);
|
: nameToRgbColor(arg);
|
||||||
return type
|
return type
|
||||||
? rgbColor.convert(type)
|
? rgbColor.convert(type)
|
||||||
: rgbColor;
|
: rgbColor;
|
||||||
|
|
@ -5940,7 +5988,7 @@ var Color = this.Color = Base.extend(new function() {
|
||||||
: Array.prototype.slice.call(arguments);
|
: Array.prototype.slice.call(arguments);
|
||||||
if (!type) {
|
if (!type) {
|
||||||
if (components.length >= 3)
|
if (components.length >= 3)
|
||||||
return new RGBColor(components);
|
return new RgbColor(components);
|
||||||
return new GrayColor(components);
|
return new GrayColor(components);
|
||||||
} else {
|
} else {
|
||||||
Base.each(this._components,
|
Base.each(this._components,
|
||||||
|
|
@ -6121,17 +6169,17 @@ var GrayColor = this.GrayColor = Color.extend({
|
||||||
_colorType: 'gray'
|
_colorType: 'gray'
|
||||||
});
|
});
|
||||||
|
|
||||||
var RGBColor = this.RGBColor = Color.extend({
|
var RgbColor = this.RgbColor = this.RGBColor = Color.extend({
|
||||||
|
|
||||||
_colorType: 'rgb'
|
_colorType: 'rgb'
|
||||||
});
|
});
|
||||||
|
|
||||||
var HSBColor = this.HSBColor = Color.extend({
|
var HsbColor = this.HsbColor = this.HSBColor = Color.extend({
|
||||||
|
|
||||||
_colorType: 'hsb'
|
_colorType: 'hsb'
|
||||||
});
|
});
|
||||||
|
|
||||||
var HSLColor = this.HSLColor = Color.extend({
|
var HslColor = this.HslColor = this.HSLColor = Color.extend({
|
||||||
|
|
||||||
_colorType: 'hsl'
|
_colorType: 'hsl'
|
||||||
});
|
});
|
||||||
|
|
@ -6489,6 +6537,7 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
initialize: function(canvas) {
|
initialize: function(canvas) {
|
||||||
this.base();
|
this.base();
|
||||||
var size;
|
var size;
|
||||||
|
|
||||||
if (typeof canvas === 'string')
|
if (typeof canvas === 'string')
|
||||||
canvas = document.getElementById(canvas);
|
canvas = document.getElementById(canvas);
|
||||||
if (canvas instanceof HTMLCanvasElement) {
|
if (canvas instanceof HTMLCanvasElement) {
|
||||||
|
|
@ -6533,16 +6582,19 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
this._id = this._canvas.getAttribute('id');
|
this._id = this._canvas.getAttribute('id');
|
||||||
if (this._id == null)
|
if (this._id == null)
|
||||||
this._canvas.setAttribute('id', this._id = 'canvas-' + View._id++);
|
this._canvas.setAttribute('id', this._id = 'canvas-' + View._id++);
|
||||||
|
|
||||||
View._views[this._id] = this;
|
View._views[this._id] = this;
|
||||||
this._viewSize = LinkedSize.create(this, 'setViewSize',
|
this._viewSize = LinkedSize.create(this, 'setViewSize',
|
||||||
size.width, size.height);
|
size.width, size.height);
|
||||||
this._context = this._canvas.getContext('2d');
|
this._context = this._canvas.getContext('2d');
|
||||||
this._matrix = new Matrix();
|
this._matrix = new Matrix();
|
||||||
this._zoom = 1;
|
this._zoom = 1;
|
||||||
|
|
||||||
this._events = this._createEvents();
|
this._events = this._createEvents();
|
||||||
DomEvent.add(this._canvas, this._events);
|
DomEvent.add(this._canvas, this._events);
|
||||||
if (!View._focused)
|
if (!View._focused)
|
||||||
View._focused = this;
|
View._focused = this;
|
||||||
|
|
||||||
this._scope._redrawNotified = false;
|
this._scope._redrawNotified = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -6557,6 +6609,22 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
return true;
|
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() {
|
getCanvas: function() {
|
||||||
return this._canvas;
|
return this._canvas;
|
||||||
},
|
},
|
||||||
|
|
@ -6581,16 +6649,12 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
delta: delta
|
delta: delta
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (this._onFrameCallback) {
|
this._redraw();
|
||||||
this._onFrameCallback(0, true);
|
|
||||||
} else {
|
|
||||||
this.draw(true);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getBounds: function() {
|
getBounds: function() {
|
||||||
if (!this._bounds)
|
if (!this._bounds)
|
||||||
this._bounds = this._matrix._transformBounds(
|
this._bounds = this._getInverse()._transformBounds(
|
||||||
new Rectangle(new Point(), this._viewSize));
|
new Rectangle(new Point(), this._viewSize));
|
||||||
return this._bounds;
|
return this._bounds;
|
||||||
},
|
},
|
||||||
|
|
@ -6624,12 +6688,6 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
this._transform(new Matrix().translate(Point.read(arguments).negate()));
|
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) {
|
draw: function(checkRedraw) {
|
||||||
if (checkRedraw && !this._redrawNeeded)
|
if (checkRedraw && !this._redrawNeeded)
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -6704,7 +6762,12 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
onResize: null
|
onResize: null
|
||||||
}, new function() {
|
}, {
|
||||||
|
statics: {
|
||||||
|
_views: {},
|
||||||
|
_id: 0
|
||||||
|
}
|
||||||
|
}, new function() {
|
||||||
var tool,
|
var tool,
|
||||||
timer,
|
timer,
|
||||||
curPoint,
|
curPoint,
|
||||||
|
|
@ -6815,8 +6878,6 @@ var View = this.View = PaperScopeItem.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
statics: {
|
statics: {
|
||||||
_views: {},
|
|
||||||
_id: 0,
|
|
||||||
|
|
||||||
updateFocus: updateFocus
|
updateFocus: updateFocus
|
||||||
}
|
}
|
||||||
|
|
@ -6883,7 +6944,9 @@ var Key = this.Key = new function() {
|
||||||
39: 'right',
|
39: 'right',
|
||||||
40: 'down',
|
40: 'down',
|
||||||
46: 'delete',
|
46: 'delete',
|
||||||
91: 'command'
|
91: 'command',
|
||||||
|
93: 'command',
|
||||||
|
224: 'command'
|
||||||
},
|
},
|
||||||
|
|
||||||
modifiers = Base.merge({
|
modifiers = Base.merge({
|
||||||
|
|
@ -6920,12 +6983,10 @@ var Key = this.Key = new function() {
|
||||||
var code = event.which || event.keyCode;
|
var code = event.which || event.keyCode;
|
||||||
var key = keys[code], name;
|
var key = keys[code], name;
|
||||||
if (key) {
|
if (key) {
|
||||||
if (modifiers[name = Base.camelize(key)] !== undefined) {
|
if ((name = Base.camelize(key)) in modifiers)
|
||||||
modifiers[name] = true;
|
modifiers[name] = true;
|
||||||
} else {
|
charCodeMap[code] = 0;
|
||||||
charCodeMap[code] = 0;
|
handleKey(true, code, null, event);
|
||||||
handleKey(true, code, null, event);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
downCode = code;
|
downCode = code;
|
||||||
}
|
}
|
||||||
|
|
@ -6943,9 +7004,9 @@ var Key = this.Key = new function() {
|
||||||
keyup: function(event) {
|
keyup: function(event) {
|
||||||
var code = event.which || event.keyCode,
|
var code = event.which || event.keyCode,
|
||||||
key = keys[code], name;
|
key = keys[code], name;
|
||||||
if (key && modifiers[name = Base.camelize(key)] !== undefined) {
|
if (key && (name = Base.camelize(key)) in modifiers)
|
||||||
modifiers[name] = false;
|
modifiers[name] = false;
|
||||||
} else if (charCodeMap[code] != null) {
|
if (charCodeMap[code] != null) {
|
||||||
handleKey(false, code, charCodeMap[code], event);
|
handleKey(false, code, charCodeMap[code], event);
|
||||||
delete charCodeMap[code];
|
delete charCodeMap[code];
|
||||||
}
|
}
|
||||||
|
|
@ -7778,4 +7839,4 @@ Base.each(this, function(val, key) {
|
||||||
|
|
||||||
this.enumerable = true;
|
this.enumerable = true;
|
||||||
return new (PaperScope.inject(this));
|
return new (PaperScope.inject(this));
|
||||||
};
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue