mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-08 05:42:07 -05:00
7782 lines
No EOL
170 KiB
HTML
7782 lines
No EOL
170 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Raster</title>
|
||
<base target="class-frame">
|
||
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
|
||
<script src="../assets/js/paper.js"></script>
|
||
<script src="../assets/js/jquery.js"></script>
|
||
<script src="../assets/js/codemirror.js"></script>
|
||
<script src="../assets/js/docs.js"></script>
|
||
</head>
|
||
<body>
|
||
<article class="reference">
|
||
<div class="reference-class">
|
||
<h1>Raster</h1>
|
||
|
||
<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
|
||
|
||
<p>The Raster item represents an image in a Paper.js project.</p>
|
||
|
||
</div>
|
||
|
||
<!-- =============================== constructors ========================== -->
|
||
<div class="reference-members">
|
||
<h2>Constructors</h2>
|
||
|
||
|
||
<div id="raster" class="member">
|
||
<div class="member-link">
|
||
<a name="raster" href="#raster"><tt><b>Raster</b>([source[, position]])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Creates a new raster item from the passed argument, and places it in the active layer. <code>source</code> can either be a DOM Image, a Canvas, or a string describing the URL to load the image from, or the ID of a DOM element to get the image from (either a DOM Image or a Canvas).</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>source:</tt>
|
||
<tt>HTMLImageElement</tt>⟋<tt>HTMLCanvasElement</tt>⟋<tt>String</tt>
|
||
— the source of the raster
|
||
— optional
|
||
</li>
|
||
|
||
<li>
|
||
<tt>position:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the center position at which the raster item is placed
|
||
— optional
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Creating a raster using a url</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-0">
|
||
var url = 'http://assets.paperjs.org/images/marilyn.jpg';
|
||
var raster = new Raster(url);
|
||
|
||
// If you create a Raster using a url, you can use the onLoad
|
||
// handler to do something once it is loaded:
|
||
raster.onLoad = function() {
|
||
console.log('The image has loaded.');
|
||
};
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Creating a raster using the id of a DOM Image:</span></h4>
|
||
|
||
|
||
<pre><code>// Create a raster using the id of the image:
|
||
var raster = new Raster('art');</code></pre>
|
||
|
||
<h4>Example:<span class="description">Creating a raster using a DOM Image:</span></h4>
|
||
|
||
|
||
<pre><code>// Find the element using its id:
|
||
var imageElement = document.getElementById('art');
|
||
|
||
// Create the raster:
|
||
var raster = new Raster(imageElement);</code></pre>
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-1">
|
||
var raster = new Raster({
|
||
source: 'http://assets.paperjs.org/images/marilyn.jpg',
|
||
position: view.center
|
||
});
|
||
|
||
raster.scale(0.5);
|
||
raster.rotate(10);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="raster-size" class="member">
|
||
<div class="member-link">
|
||
<a name="raster-size" href="#raster-size"><tt><b>Raster</b>(size[, position])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Creates a new empty raster of the given size, and places it in the active layer.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>size:</tt>
|
||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||
— the size of the raster
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>position:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the center position at which the raster item is placed
|
||
— optional
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Creating an empty raster and fill it with random pixels:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-2">
|
||
var width = 100;
|
||
var height = 100;
|
||
|
||
// Create an empty raster placed at view center.
|
||
var raster = new Raster(new Size(width, height), view.center);
|
||
|
||
// For all of its pixels...
|
||
for (var i = 0; i < width; i++) {
|
||
for (var j = 0; j < height; j++) {
|
||
// ...set a random color.
|
||
raster.setPixel(i, j, Color.random());
|
||
}
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="150" id="canvas-2"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- ================================ properties =========================== -->
|
||
<div class="reference-members">
|
||
<h2>Properties</h2>
|
||
|
||
|
||
<div id="size" class="member">
|
||
<div class="member-link">
|
||
<a name="size" href="#size"><tt><b>size</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The size of the raster in pixels.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="width" class="member">
|
||
<div class="member-link">
|
||
<a name="width" href="#width"><tt><b>width</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The width of the raster in pixels.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="height" class="member">
|
||
<div class="member-link">
|
||
<a name="height" href="#height"><tt><b>height</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The height of the raster in pixels.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="loaded" class="member">
|
||
<div class="member-link">
|
||
<a name="loaded" href="#loaded"><tt><b>loaded</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The loading state of the raster image.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="resolution" class="member">
|
||
<div class="member-link">
|
||
<a name="resolution" href="#resolution"><tt><b>resolution</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The resolution of the raster at its current size, in PPI (pixels per inch).</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="image" class="member">
|
||
<div class="member-link">
|
||
<a name="image" href="#image"><tt><b>image</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The HTMLImageElement or Canvas element of the raster, if one is associated. Note that for consistency, a <a href="../classes/Raster.html#onload"><tt>onLoad</tt></a> event will be triggered on the raster even if the image has already finished loading before, or if we are setting the raster to a canvas.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>HTMLImageElement</tt>⟋<tt>HTMLCanvasElement</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="canvas" class="member">
|
||
<div class="member-link">
|
||
<a name="canvas" href="#canvas"><tt><b>canvas</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The Canvas object of the raster. If the raster was created from an image, accessing its canvas causes the raster to try and create one and draw the image into it. Depending on security policies, this might fail, in which case <code>null</code> is returned instead.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>HTMLCanvasElement</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="context" class="member">
|
||
<div class="member-link">
|
||
<a name="context" href="#context"><tt><b>context</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The Canvas 2D drawing context of the raster.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>CanvasRenderingContext2D</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="source" class="member">
|
||
<div class="member-link">
|
||
<a name="source" href="#source"><tt><b>source</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The source of the raster, which can be set using a DOM Image, a Canvas, a data url, a string describing the URL to load the image from, or the ID of a DOM element to get the image from (either a DOM Image or a Canvas). Reading this property will return the url of the source image or a data-url. Note that for consistency, a <a href="../classes/Raster.html#onload"><tt>onLoad</tt></a> event will be triggered on the raster even if the image has already finished loading before.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>HTMLImageElement</tt>⟋<tt>HTMLCanvasElement</tt>⟋<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-3">
|
||
var raster = new Raster();
|
||
raster.source = 'http://paperjs.org/about/paper-js.gif';
|
||
raster.position = view.center;
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-4">
|
||
var raster = new Raster({
|
||
source: 'http://paperjs.org/about/paper-js.gif',
|
||
position: view.center
|
||
});
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="crossorigin" class="member">
|
||
<div class="member-link">
|
||
<a name="crossorigin" href="#crossorigin"><tt><b>crossOrigin</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The crossOrigin value to be used when loading the image resource, in order to support CORS. Note that this needs to be set before setting the <a href="../classes/Raster.html#source"><tt>source</tt></a> property in order to always work (e.g. when the image is cached in the browser).</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-5">
|
||
var raster = new Raster({
|
||
crossOrigin: 'anonymous',
|
||
source: 'http://assets.paperjs.org/images/marilyn.jpg',
|
||
position: view.center
|
||
});
|
||
|
||
console.log(view.element.toDataURL('image/png').substring(0, 32));
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="smoothing" class="member">
|
||
<div class="member-link">
|
||
<a name="smoothing" href="#smoothing"><tt><b>smoothing</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Specifies if the raster should be smoothed when scaled up or if the pixels should be scaled up by repeating the nearest neighboring pixels.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>false</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-6">
|
||
var raster = new Raster({
|
||
source: 'http://assets.paperjs.org/images/marilyn.jpg',
|
||
smoothing: false
|
||
});
|
||
raster.scale(5);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Event Handlers</h3>
|
||
|
||
<div id="onload" class="member">
|
||
<div class="member-link">
|
||
<a name="onload" href="#onload"><tt><b>onLoad</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The event handler function to be called when the underlying image has finished loading and is ready to be used. This is also triggered when the image is already loaded, or when a canvas is used instead of an image.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
|
||
<pre><code>var url = 'http://assets.paperjs.org/images/marilyn.jpg';
|
||
var raster = new Raster(url);
|
||
|
||
// If you create a Raster using a url, you can use the onLoad
|
||
// handler to do something once it is loaded:
|
||
raster.onLoad = function() {
|
||
console.log('The image has finished loading.');
|
||
};
|
||
|
||
// As with all events in paper.js, you can also use this notation instead
|
||
// to install multiple handlers:
|
||
raster.on('load', function() {
|
||
console.log('Now the image is definitely ready.');
|
||
});</code></pre>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onerror" class="member">
|
||
<div class="member-link">
|
||
<a name="onerror" href="#onerror"><tt><b>onError</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The event handler function to be called when there is an error loading the underlying image.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- ============================== methods ================================ -->
|
||
<div class="reference-members">
|
||
<h2>Methods</h2>
|
||
|
||
|
||
<div id="getsubcanvas-rect" class="member">
|
||
<div class="member-link">
|
||
<a name="getsubcanvas-rect" href="#getsubcanvas-rect"><tt><b>getSubCanvas</b>(rect)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Extracts a part of the Raster’s content as a sub image, and returns it as a Canvas object.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>rect:</tt>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
— the boundaries of the sub image in pixel coordinates
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>HTMLCanvasElement</tt></tt> — the sub image as a Canvas object
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="getsubraster-rect" class="member">
|
||
<div class="member-link">
|
||
<a name="getsubraster-rect" href="#getsubraster-rect"><tt><b>getSubRaster</b>(rect)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Extracts a part of the raster item’s content as a new raster item, placed in exactly the same place as the original content.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>rect:</tt>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
— the boundaries of the sub raster in pixel coordinates
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — the sub raster as a newly created raster item
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="todataurl" class="member">
|
||
<div class="member-link">
|
||
<a name="todataurl" href="#todataurl"><tt><b>toDataURL</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Returns a Base 64 encoded <code>data:</code> URL representation of the raster.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>String</tt></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="drawimage-image-point" class="member">
|
||
<div class="member-link">
|
||
<a name="drawimage-image-point" href="#drawimage-image-point"><tt><b>drawImage</b>(image, point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Draws an image on the raster.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>image:</tt>
|
||
<tt>CanvasImageSource</tt>
|
||
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the offset of the image as a point in pixel coordinates
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="getaveragecolor-object" class="member">
|
||
<div class="member-link">
|
||
<a name="getaveragecolor-object" href="#getaveragecolor-object"><tt><b>getAverageColor</b>(object)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Calculates the average color of the image within the given path, rectangle or point. This can be used for creating raster image effects.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>object:</tt>
|
||
<a href="../classes/Path.html"><tt>Path</tt></a>⟋<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>⟋<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Color.html"><tt>Color</tt></a></tt> — the average color contained in the area covered by the specified path, rectangle or point
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Pixels</h3>
|
||
|
||
<div id="getpixel-x-y" class="member">
|
||
<div class="member-link">
|
||
<a name="getpixel-x-y" href="#getpixel-x-y"><tt><b>getPixel</b>(x, y)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Gets the color of a pixel in the raster.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>x:</tt>
|
||
<tt>Number</tt>
|
||
— the x offset of the pixel in pixel coordinates
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>y:</tt>
|
||
<tt>Number</tt>
|
||
— the y offset of the pixel in pixel coordinates
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Color.html"><tt>Color</tt></a></tt> — the color of the pixel
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="getpixel-point" class="member">
|
||
<div class="member-link">
|
||
<a name="getpixel-point" href="#getpixel-point"><tt><b>getPixel</b>(point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Gets the color of a pixel in the raster.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the offset of the pixel as a point in pixel coordinates
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Color.html"><tt>Color</tt></a></tt> — the color of the pixel
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="setpixel-x-y-color" class="member">
|
||
<div class="member-link">
|
||
<a name="setpixel-x-y-color" href="#setpixel-x-y-color"><tt><b>setPixel</b>(x, y, color)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Sets the color of the specified pixel to the specified color.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>x:</tt>
|
||
<tt>Number</tt>
|
||
— the x offset of the pixel in pixel coordinates
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>y:</tt>
|
||
<tt>Number</tt>
|
||
— the y offset of the pixel in pixel coordinates
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>color:</tt>
|
||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||
— the color that the pixel will be set to
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="setpixel-point-color" class="member">
|
||
<div class="member-link">
|
||
<a name="setpixel-point-color" href="#setpixel-point-color"><tt><b>setPixel</b>(point, color)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Sets the color of the specified pixel to the specified color.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the offset of the pixel as a point in pixel coordinates
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>color:</tt>
|
||
<a href="../classes/Color.html"><tt>Color</tt></a>
|
||
— the color that the pixel will be set to
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="clear" class="member">
|
||
<div class="member-link">
|
||
<a name="clear" href="#clear"><tt><b>clear</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Clears the image, if it is backed by a canvas.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Image Data</h3>
|
||
|
||
<div id="createimagedata-size" class="member">
|
||
<div class="member-link">
|
||
<a name="createimagedata-size" href="#createimagedata-size"><tt><b>createImageData</b>(size)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>size:</tt>
|
||
<a href="../classes/Size.html"><tt>Size</tt></a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>ImageData</tt></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="getimagedata-rect" class="member">
|
||
<div class="member-link">
|
||
<a name="getimagedata-rect" href="#getimagedata-rect"><tt><b>getImageData</b>(rect)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>rect:</tt>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>ImageData</tt></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="setimagedata-data-point" class="member">
|
||
<div class="member-link">
|
||
<a name="setimagedata-data-point" href="#setimagedata-data-point"><tt><b>setImageData</b>(data, point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>data:</tt>
|
||
<tt>ImageData</tt>
|
||
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!-- =========================== inherited properties ====================== -->
|
||
<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
||
|
||
|
||
<div id="id" class="member">
|
||
<div class="member-link">
|
||
<a name="id" href="#id"><tt><b>id</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The unique id of the item.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="classname" class="member">
|
||
<div class="member-link">
|
||
<a name="classname" href="#classname"><tt><b>className</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The class name of the item as a string.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Values:</h4>
|
||
<li><tt>'Group'</tt>, <tt>'Layer'</tt>, <tt>'Path'</tt>, <tt>'CompoundPath'</tt>, <tt>'Shape'</tt>, <tt>'Raster'</tt>, <tt>'SymbolItem'</tt>, <tt>'PointText'</tt></li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="name" class="member">
|
||
<div class="member-link">
|
||
<a name="name" href="#name"><tt><b>name</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The name of the item. If the item has a name, it can be accessed by name through its parent’s children list.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-7">
|
||
var path = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
// Set the name of the path:
|
||
path.name = 'example';
|
||
|
||
// Create a group and add path to it as a child:
|
||
var group = new Group();
|
||
group.addChild(path);
|
||
|
||
// The path can be accessed by name:
|
||
group.children['example'].fillColor = 'red';
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="style" class="member">
|
||
<div class="member-link">
|
||
<a name="style" href="#style"><tt><b>style</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The path style of the item.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Style.html"><tt>Style</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Applying several styles to an item in one go, by passing an object to its style property:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-8">
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 30
|
||
});
|
||
circle.style = {
|
||
fillColor: 'blue',
|
||
strokeColor: 'red',
|
||
strokeWidth: 5
|
||
};
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Copying the style of another item:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-9">
|
||
var path = new Path.Circle({
|
||
center: [50, 50],
|
||
radius: 30,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
var path2 = new Path.Circle({
|
||
center: new Point(180, 50),
|
||
radius: 20
|
||
});
|
||
|
||
// Copy the path style of path:
|
||
path2.style = path.style;
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Applying the same style object to multiple items:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-10">
|
||
var myStyle = {
|
||
fillColor: 'red',
|
||
strokeColor: 'blue',
|
||
strokeWidth: 4
|
||
};
|
||
|
||
var path = new Path.Circle({
|
||
center: [50, 50],
|
||
radius: 30
|
||
});
|
||
path.style = myStyle;
|
||
|
||
var path2 = new Path.Circle({
|
||
center: new Point(150, 50),
|
||
radius: 20
|
||
});
|
||
path2.style = myStyle;
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="locked" class="member">
|
||
<div class="member-link">
|
||
<a name="locked" href="#locked"><tt><b>locked</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Specifies whether the item is locked. When set to <code>true</code>, item interactions with the mouse are disabled.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>false</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-11">
|
||
var unlockedItem = new Path.Circle({
|
||
center: view.center - [35, 0],
|
||
radius: 30,
|
||
fillColor: 'springgreen',
|
||
onMouseDown: function() {
|
||
this.fillColor = Color.random();
|
||
}
|
||
});
|
||
|
||
var lockedItem = new Path.Circle({
|
||
center: view.center + [35, 0],
|
||
radius: 30,
|
||
fillColor: 'crimson',
|
||
locked: true,
|
||
// This event won't be triggered because the item is locked.
|
||
onMouseDown: function() {
|
||
this.fillColor = Color.random();
|
||
}
|
||
});
|
||
|
||
new PointText({
|
||
content: 'Click on both circles to see which one is locked.',
|
||
point: view.center - [0, 35],
|
||
justification: 'center'
|
||
});
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="visible" class="member">
|
||
<div class="member-link">
|
||
<a name="visible" href="#visible"><tt><b>visible</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Specifies whether the item is visible. When set to <code>false</code>, the item won’t be drawn.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>true</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Hiding an item:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-12">
|
||
var path = new Path.Circle({
|
||
center: [50, 50],
|
||
radius: 20,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Hide the path:
|
||
path.visible = false;
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="blendmode" class="member">
|
||
<div class="member-link">
|
||
<a name="blendmode" href="#blendmode"><tt><b>blendMode</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The blend mode with which the item is composited onto the canvas. Both the standard canvas compositing modes, as well as the new CSS blend modes are supported. If blend-modes cannot be rendered natively, they are emulated. Be aware that emulation can have an impact on performance.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Values:</h4>
|
||
<li><tt>'normal'</tt>, <tt>'multiply'</tt>, <tt>'screen'</tt>, <tt>'overlay'</tt>, <tt>'soft-light'</tt>, <tt>'hard-
|
||
light'</tt>, <tt>'color-dodge'</tt>, <tt>'color-burn'</tt>, <tt>'darken'</tt>, <tt>'lighten'</tt>, <tt>'difference'</tt>, <tt>'exclusion'</tt>, <tt>'hue'</tt>, <tt>'saturation'</tt>, <tt>'luminosity'</tt>, <tt>'color'</tt>, <tt>'add'</tt>, <tt>'subtract'</tt>, <tt>'average'</tt>, <tt>'pin-light'</tt>, <tt>'negation'</tt>, <tt>'source-over'</tt>, <tt>'source-in'</tt>, <tt>'source-out'</tt>, <tt>'source-atop'</tt>, <tt>'destination-over'</tt>, <tt>'destination-in'</tt>, <tt>'destination-out'</tt>, <tt>'destination-atop'</tt>, <tt>'lighter'</tt>, <tt>'darker'</tt>, <tt>'copy'</tt>, <tt>'xor'</tt></li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>'normal'</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Setting an item's blend mode:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-13">
|
||
// Create a white rectangle in the background
|
||
// with the same dimensions as the view:
|
||
var background = new Path.Rectangle(view.bounds);
|
||
background.fillColor = 'white';
|
||
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
var circle2 = new Path.Circle({
|
||
center: new Point(120, 50),
|
||
radius: 35,
|
||
fillColor: 'blue'
|
||
});
|
||
|
||
// Set the blend mode of circle2:
|
||
circle2.blendMode = 'multiply';
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="opacity" class="member">
|
||
<div class="member-link">
|
||
<a name="opacity" href="#opacity"><tt><b>opacity</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The opacity of the item as a value between <code>0</code> and <code>1</code>.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>1</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Making an item 50% transparent:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-14">
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
var circle2 = new Path.Circle({
|
||
center: new Point(120, 50),
|
||
radius: 35,
|
||
fillColor: 'blue',
|
||
strokeColor: 'green',
|
||
strokeWidth: 10
|
||
});
|
||
|
||
// Make circle2 50% transparent:
|
||
circle2.opacity = 0.5;
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="selected" class="member">
|
||
<div class="member-link">
|
||
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Specifies whether the item is selected. This will also return <code>true</code> for <a href="../classes/Group.html"><tt>Group</tt></a> items if they are partially selected, e.g. groups containing selected or partially selected paths.</p>
|
||
<p>Paper.js draws the visual outlines of selected items on top of your project. This can be useful for debugging, as it allows you to see the construction of paths, position of path curves, individual segment points and bounding boxes of symbol and raster items.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>false</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt></li>
|
||
|
||
<li><tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt></li>
|
||
|
||
<li><tt><a href="../classes/Curve.html#selected"><tt>curve.selected</tt></a></tt></li>
|
||
|
||
<li><tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Selecting an item:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-15">
|
||
var path = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
path.selected = true; // Select the path
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="clipmask" class="member">
|
||
<div class="member-link">
|
||
<a name="clipmask" href="#clipmask"><tt><b>clipMask</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Specifies whether the item defines a clip mask. This can only be set on paths and compound paths, and only if the item is already contained within a clipping group.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>false</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="data" class="member">
|
||
<div class="member-link">
|
||
<a name="data" href="#data"><tt><b>data</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>A plain javascript object which can be used to store arbitrary data on the item.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Object</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
|
||
<pre><code>var path = new Path();
|
||
path.data.remember = 'milk';</code></pre>
|
||
|
||
<h4>Example:</h4>
|
||
|
||
|
||
<pre><code>var path = new Path();
|
||
path.data.malcolm = new Point(20, 30);
|
||
console.log(path.data.malcolm.x); // 20</code></pre>
|
||
|
||
<h4>Example:</h4>
|
||
|
||
|
||
<pre><code>var path = new Path();
|
||
path.data = {
|
||
home: 'Omicron Theta',
|
||
found: 2338,
|
||
pets: ['Spot']
|
||
};
|
||
console.log(path.data.pets.length); // 1</code></pre>
|
||
|
||
<h4>Example:</h4>
|
||
|
||
|
||
<pre><code>var path = new Path({
|
||
data: {
|
||
home: 'Omicron Theta',
|
||
found: 2338,
|
||
pets: ['Spot']
|
||
}
|
||
});
|
||
console.log(path.data.pets.length); // 1</code></pre>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Position and Bounding Boxes</h3>
|
||
|
||
<div id="position" class="member">
|
||
<div class="member-link">
|
||
<a name="position" href="#position"><tt><b>position</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The item’s position within the parent item’s coordinate system. By default, this is the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item’s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> rectangle.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Changing the position of a path:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-16">
|
||
// Create a circle at position { x: 10, y: 10 }
|
||
var circle = new Path.Circle({
|
||
center: new Point(10, 10),
|
||
radius: 10,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Move the circle to { x: 20, y: 20 }
|
||
circle.position = new Point(20, 20);
|
||
|
||
// Move the circle 100 points to the right and 50 points down
|
||
circle.position += new Point(100, 50);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Changing the x coordinate of an item's position:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-17">
|
||
// Create a circle at position { x: 20, y: 20 }
|
||
var circle = new Path.Circle({
|
||
center: new Point(20, 20),
|
||
radius: 10,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Move the circle 100 points to the right
|
||
circle.position.x += 100;
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="pivot" class="member">
|
||
<div class="member-link">
|
||
<a name="pivot" href="#pivot"><tt><b>pivot</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The item’s pivot point specified in the item coordinate system, defining the point around which all transformations are hinging. This is also the reference point for <a href="../classes/Item.html#position"><tt>position</tt></a>. By default, it is set to <code>null</code>, meaning the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item’s <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> rectangle is used as pivot.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>null</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="bounds" class="member">
|
||
<div class="member-link">
|
||
<a name="bounds" href="#bounds"><tt><b>bounds</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The bounding rectangle of the item excluding stroke width.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="strokebounds" class="member">
|
||
<div class="member-link">
|
||
<a name="strokebounds" href="#strokebounds"><tt><b>strokeBounds</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The bounding rectangle of the item including stroke width.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="handlebounds" class="member">
|
||
<div class="member-link">
|
||
<a name="handlebounds" href="#handlebounds"><tt><b>handleBounds</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The bounding rectangle of the item including handles.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="internalbounds" class="member">
|
||
<div class="member-link">
|
||
<a name="internalbounds" href="#internalbounds"><tt><b>internalBounds</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The bounding rectangle of the item without any matrix transformations.</p>
|
||
<p>Typical use case would be drawing a frame around the object where you want to draw something of the same size, position, rotation, and scaling, like a selection frame.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="rotation" class="member">
|
||
<div class="member-link">
|
||
<a name="rotation" href="#rotation"><tt><b>rotation</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The current rotation angle of the item, as described by its <a href="../classes/Item.html#matrix"><tt>matrix</tt></a>. Please note that this only returns meaningful values for items with <a href="../classes/Item.html#applymatrix"><tt>applyMatrix</tt></a> set to <code>false</code>, meaning they do not directly bake transformations into their content.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="scaling" class="member">
|
||
<div class="member-link">
|
||
<a name="scaling" href="#scaling"><tt><b>scaling</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The current scale factor of the item, as described by its <a href="../classes/Item.html#matrix"><tt>matrix</tt></a>. Please note that this only returns meaningful values for items with <a href="../classes/Item.html#applymatrix"><tt>applyMatrix</tt></a> set to <code>false</code>, meaning they do not directly bake transformations into their content.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="matrix" class="member">
|
||
<div class="member-link">
|
||
<a name="matrix" href="#matrix"><tt><b>matrix</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The item’s transformation matrix, defining position and dimensions in relation to its parent item in which it is contained.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="globalmatrix" class="member">
|
||
<div class="member-link">
|
||
<a name="globalmatrix" href="#globalmatrix"><tt><b>globalMatrix</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The item’s global transformation matrix in relation to the global project coordinate space. Note that the view’s transformations resulting from zooming and panning are not factored in.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="viewmatrix" class="member">
|
||
<div class="member-link">
|
||
<a name="viewmatrix" href="#viewmatrix"><tt><b>viewMatrix</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The item’s global matrix in relation to the view coordinate space. This means that the view’s transformations resulting from zooming and panning are factored in.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="applymatrix" class="member">
|
||
<div class="member-link">
|
||
<a name="applymatrix" href="#applymatrix"><tt><b>applyMatrix</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Controls whether the transformations applied to the item (e.g. through <a href="../classes/Item.html#transform-matrix"><tt>transform(matrix)</tt></a>, <a href="../classes/Item.html#rotate-angle"><tt>rotate(angle)</tt></a>, <a href="../classes/Item.html#scale-scale"><tt>scale(scale)</tt></a>, etc.) are stored in its <a href="../classes/Item.html#matrix"><tt>matrix</tt></a> property, or whether they are directly applied to its contents or children (passed on to the segments in <a href="../classes/Path.html"><tt>Path</tt></a> items, the children of <a href="../classes/Group.html"><tt>Group</tt></a> items, etc.).</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>true</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Project Hierarchy</h3>
|
||
|
||
<div id="project" class="member">
|
||
<div class="member-link">
|
||
<a name="project" href="#project"><tt><b>project</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The project that this item belongs to.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Project.html"><tt>Project</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="view" class="member">
|
||
<div class="member-link">
|
||
<a name="view" href="#view"><tt><b>view</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The view that this item belongs to.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/View.html"><tt>View</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="layer" class="member">
|
||
<div class="member-link">
|
||
<a name="layer" href="#layer"><tt><b>layer</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The layer that this item is contained within.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Layer.html"><tt>Layer</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="parent" class="member">
|
||
<div class="member-link">
|
||
<a name="parent" href="#parent"><tt><b>parent</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The item that this item is contained within.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
|
||
<pre><code>var path = new Path();
|
||
|
||
// New items are placed in the active layer:
|
||
console.log(path.parent == project.activeLayer); // true
|
||
|
||
var group = new Group();
|
||
group.addChild(path);
|
||
|
||
// Now the parent of the path has become the group:
|
||
console.log(path.parent == group); // true</code></pre>
|
||
|
||
<h4>Example:<span class="description">Setting the parent of the item to another item</span></h4>
|
||
|
||
|
||
<pre><code>var path = new Path();
|
||
|
||
// New items are placed in the active layer:
|
||
console.log(path.parent == project.activeLayer); // true
|
||
|
||
var group = new Group();
|
||
path.parent = group;
|
||
|
||
// Now the parent of the path has become the group:
|
||
console.log(path.parent == group); // true
|
||
|
||
// The path is now contained in the children list of group:
|
||
console.log(group.children[0] == path); // true</code></pre>
|
||
|
||
<h4>Example:<span class="description">Setting the parent of an item in the constructor</span></h4>
|
||
|
||
|
||
<pre><code>var group = new Group();
|
||
|
||
var path = new Path({
|
||
parent: group
|
||
});
|
||
|
||
// The parent of the path is the group:
|
||
console.log(path.parent == group); // true
|
||
|
||
// The path is contained in the children list of group:
|
||
console.log(group.children[0] == path); // true</code></pre>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="children" class="member">
|
||
<div class="member-link">
|
||
<a name="children" href="#children"><tt><b>children</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The children items contained within this item. Items that define a <a href="../classes/Item.html#name"><tt>name</tt></a> can also be accessed by name.</p>
|
||
<p><b>Please note:</b> The children array should not be modified directly using array functions. To remove single items from the children list, use <a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use <a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Accessing items in the children array:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-18">
|
||
var path = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
|
||
// Create a group and move the path into it:
|
||
var group = new Group();
|
||
group.addChild(path);
|
||
|
||
// Access the path through the group's children array:
|
||
group.children[0].fillColor = 'red';
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Accessing children by name:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-19">
|
||
var path = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
// Set the name of the path:
|
||
path.name = 'example';
|
||
|
||
// Create a group and move the path into it:
|
||
var group = new Group();
|
||
group.addChild(path);
|
||
|
||
// The path can be accessed by name:
|
||
group.children['example'].fillColor = 'orange';
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Passing an array of items to item.children:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-20">
|
||
var path = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
|
||
var group = new Group();
|
||
group.children = [path];
|
||
|
||
// The path is the first child of the group:
|
||
group.firstChild.fillColor = 'green';
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="firstchild" class="member">
|
||
<div class="member-link">
|
||
<a name="firstchild" href="#firstchild"><tt><b>firstChild</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The first item contained within this item. This is a shortcut for accessing <code>item.children[0]</code>.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="lastchild" class="member">
|
||
<div class="member-link">
|
||
<a name="lastchild" href="#lastchild"><tt><b>lastChild</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The last item contained within this item.This is a shortcut for accessing <code>item.children[item.children.length - 1]</code>.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="nextsibling" class="member">
|
||
<div class="member-link">
|
||
<a name="nextsibling" href="#nextsibling"><tt><b>nextSibling</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The next item on the same level as this item.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="previoussibling" class="member">
|
||
<div class="member-link">
|
||
<a name="previoussibling" href="#previoussibling"><tt><b>previousSibling</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The previous item on the same level as this item.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="index" class="member">
|
||
<div class="member-link">
|
||
<a name="index" href="#index"><tt><b>index</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The index of this item within the list of its parent’s children.</p>
|
||
|
||
<p>Read only.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Stroke Style</h3>
|
||
|
||
<div id="strokecolor" class="member">
|
||
<div class="member-link">
|
||
<a name="strokecolor" href="#strokecolor"><tt><b>strokeColor</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The color of the stroke.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Setting the stroke color of a path:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-21">
|
||
// Create a circle shaped path at { x: 80, y: 50 }
|
||
// with a radius of 35:
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
|
||
// Set its stroke color to RGB red:
|
||
circle.strokeColor = new Color(1, 0, 0);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="strokewidth" class="member">
|
||
<div class="member-link">
|
||
<a name="strokewidth" href="#strokewidth"><tt><b>strokeWidth</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The width of the stroke.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Setting an item's stroke width:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-22">
|
||
// Create a circle shaped path at { x: 80, y: 50 }
|
||
// with a radius of 35:
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35,
|
||
strokeColor: 'red'
|
||
});
|
||
|
||
// Set its stroke width to 10:
|
||
circle.strokeWidth = 10;
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="strokecap" class="member">
|
||
<div class="member-link">
|
||
<a name="strokecap" href="#strokecap"><tt><b>strokeCap</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The shape to be used at the beginning and end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they have a stroke.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Values:</h4>
|
||
<li><tt>'round'</tt>, <tt>'square'</tt>, <tt>'butt'</tt></li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>'butt'</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">A look at the different stroke caps:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-23">
|
||
var line = new Path({
|
||
segments: [[80, 50], [420, 50]],
|
||
strokeColor: 'black',
|
||
strokeWidth: 20,
|
||
selected: true
|
||
});
|
||
|
||
// Set the stroke cap of the line to be round:
|
||
line.strokeCap = 'round';
|
||
|
||
// Copy the path and set its stroke cap to be square:
|
||
var line2 = line.clone();
|
||
line2.position.y += 50;
|
||
line2.strokeCap = 'square';
|
||
|
||
// Make another copy and set its stroke cap to be butt:
|
||
var line2 = line.clone();
|
||
line2.position.y += 100;
|
||
line2.strokeCap = 'butt';
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-23"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="strokejoin" class="member">
|
||
<div class="member-link">
|
||
<a name="strokejoin" href="#strokejoin"><tt><b>strokeJoin</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The shape to be used at the segments and corners of <a href="../classes/Path.html"><tt>Path</tt></a> items when they have a stroke.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Values:</h4>
|
||
<li><tt>'miter'</tt>, <tt>'round'</tt>, <tt>'bevel'</tt></li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>'miter'</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">A look at the different stroke joins:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-24">
|
||
var path = new Path({
|
||
segments: [[80, 100], [120, 40], [160, 100]],
|
||
strokeColor: 'black',
|
||
strokeWidth: 20,
|
||
// Select the path, in order to see where the stroke is formed:
|
||
selected: true
|
||
});
|
||
|
||
var path2 = path.clone();
|
||
path2.position.x += path2.bounds.width * 1.5;
|
||
path2.strokeJoin = 'round';
|
||
|
||
var path3 = path2.clone();
|
||
path3.position.x += path3.bounds.width * 1.5;
|
||
path3.strokeJoin = 'bevel';
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="120" id="canvas-24"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="dashoffset" class="member">
|
||
<div class="member-link">
|
||
<a name="dashoffset" href="#dashoffset"><tt><b>dashOffset</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The dash offset of the stroke.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>0</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="strokescaling" class="member">
|
||
<div class="member-link">
|
||
<a name="strokescaling" href="#strokescaling"><tt><b>strokeScaling</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Specifies whether the stroke is to be drawn taking the current affine transformation into account (the default behavior), or whether it should appear as a non-scaling stroke.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>true</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Boolean</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="dasharray" class="member">
|
||
<div class="member-link">
|
||
<a name="dasharray" href="#dasharray"><tt><b>dashArray</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>[]</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
Array of <tt>Numbers</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:</h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-25">
|
||
var path = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 40,
|
||
strokeWidth: 2,
|
||
strokeColor: 'black'
|
||
});
|
||
|
||
// Set the dashed stroke to [10pt dash, 4pt gap]:
|
||
path.dashArray = [10, 4];
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="miterlimit" class="member">
|
||
<div class="member-link">
|
||
<a name="miterlimit" href="#miterlimit"><tt><b>miterLimit</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The miter limit of the stroke. When two line segments meet at a sharp angle and miter joins have been specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The miterLimit imposes a limit on the ratio of the miter length to the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>10</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Fill Style</h3>
|
||
|
||
<div id="fillcolor" class="member">
|
||
<div class="member-link">
|
||
<a name="fillcolor" href="#fillcolor"><tt><b>fillColor</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The fill color of the item.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Setting the fill color of a path to red:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-26">
|
||
// Create a circle shaped path at { x: 80, y: 50 }
|
||
// with a radius of 35:
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
|
||
// Set the fill color of the circle to RGB red:
|
||
circle.fillColor = new Color(1, 0, 0);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="fillrule" class="member">
|
||
<div class="member-link">
|
||
<a name="fillrule" href="#fillrule"><tt><b>fillRule</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The fill-rule with which the shape gets filled. Please note that only modern browsers support fill-rules other than <code>'nonzero'</code>.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Values:</h4>
|
||
<li><tt>'nonzero'</tt>, <tt>'evenodd'</tt></li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>'nonzero'</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>String</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Shadow Style</h3>
|
||
|
||
<div id="shadowcolor" class="member">
|
||
<div class="member-link">
|
||
<a name="shadowcolor" href="#shadowcolor"><tt><b>shadowColor</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The shadow color.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<h4>Example:<span class="description">Creating a circle with a black shadow:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-27">
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35,
|
||
fillColor: 'white',
|
||
// Set the shadow color of the circle to RGB black:
|
||
shadowColor: new Color(0, 0, 0),
|
||
// Set the shadow blur radius to 12:
|
||
shadowBlur: 12,
|
||
// Offset the shadow by { x: 5, y: 5 }
|
||
shadowOffset: new Point(5, 5)
|
||
});
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="shadowblur" class="member">
|
||
<div class="member-link">
|
||
<a name="shadowblur" href="#shadowblur"><tt><b>shadowBlur</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The shadow’s blur radius.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>0</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Number</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="shadowoffset" class="member">
|
||
<div class="member-link">
|
||
<a name="shadowoffset" href="#shadowoffset"><tt><b>shadowOffset</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The shadow’s offset.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Default:</h4>
|
||
<li><tt>0</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Selection Style</h3>
|
||
|
||
<div id="selectedcolor" class="member">
|
||
<div class="member-link">
|
||
<a name="selectedcolor" href="#selectedcolor"><tt><b>selectedColor</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The color the item is highlighted with when selected. If the item does not specify its own color, the color defined by its layer is used instead.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<a href="../classes/Color.html"><tt>Color</tt></a>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Event Handlers</h3>
|
||
|
||
<div id="onframe" class="member">
|
||
<div class="member-link">
|
||
<a name="onframe" href="#onframe"><tt><b>onFrame</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>Item level handler function to be called on each frame of an animation. The function receives an event object which contains information about the frame event:</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>event.count: <tt>Number</tt></tt> — the number of times the frame event was fired</li>
|
||
<li><tt>event.time: <tt>Number</tt></tt> — the total amount of time passed since the first frame event in seconds</li>
|
||
<li><tt>event.delta: <tt>Number</tt></tt> — the time passed in seconds since the last frame event</li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Creating an animation:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-28">
|
||
// Create a rectangle shaped path with its top left point at:
|
||
// {x: 50, y: 25} and a size of {width: 50, height: 50}
|
||
var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
|
||
path.fillColor = 'black';
|
||
|
||
path.onFrame = function(event) {
|
||
// Every frame, rotate the path by 3 degrees:
|
||
this.rotate(3);
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onmousedown" class="member">
|
||
<div class="member-link">
|
||
<a name="onmousedown" href="#onmousedown"><tt><b>onMouseDown</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called when the mouse button is pushed down on the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onmousedown"><tt>view.onMouseDown</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Press the mouse button down on the circle shaped path, to make it red:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-29">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse is pressed on the item,
|
||
// set its fill color to red:
|
||
path.onMouseDown = function(event) {
|
||
this.fillColor = 'red';
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Press the mouse on the circle shaped paths to remove them:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-30">
|
||
// Loop 30 times:
|
||
for (var i = 0; i < 30; i++) {
|
||
// Create a circle shaped path at a random position
|
||
// in the view:
|
||
var path = new Path.Circle({
|
||
center: Point.random() * view.size,
|
||
radius: 25,
|
||
fillColor: 'black',
|
||
strokeColor: 'white'
|
||
});
|
||
|
||
// When the mouse is pressed on the item, remove it:
|
||
path.onMouseDown = function(event) {
|
||
this.remove();
|
||
}
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onmousedrag" class="member">
|
||
<div class="member-link">
|
||
<a name="onmousedrag" href="#onmousedrag"><tt><b>onMouseDrag</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called when the mouse position changes while the mouse is being dragged over the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onmousedrag"><tt>view.onMouseDrag</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Press and drag the mouse on the blue circle to move it:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-31">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 50,
|
||
fillColor: 'blue'
|
||
});
|
||
|
||
// Install a drag event handler that moves the path along.
|
||
path.onMouseDrag = function(event) {
|
||
path.position += event.delta;
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="240" id="canvas-31"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onmouseup" class="member">
|
||
<div class="member-link">
|
||
<a name="onmouseup" href="#onmouseup"><tt><b>onMouseUp</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called when the mouse button is released over the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onmouseup"><tt>view.onMouseUp</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Release the mouse button over the circle shaped path, to make it red:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-32">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse is released over the item,
|
||
// set its fill color to red:
|
||
path.onMouseUp = function(event) {
|
||
this.fillColor = 'red';
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onclick" class="member">
|
||
<div class="member-link">
|
||
<a name="onclick" href="#onclick"><tt><b>onClick</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called when the mouse clicks on the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onclick"><tt>view.onClick</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Click on the circle shaped path, to make it red:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-33">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse is clicked on the item,
|
||
// set its fill color to red:
|
||
path.onClick = function(event) {
|
||
this.fillColor = 'red';
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Click on the circle shaped paths to remove them:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-34">
|
||
// Loop 30 times:
|
||
for (var i = 0; i < 30; i++) {
|
||
// Create a circle shaped path at a random position
|
||
// in the view:
|
||
var path = new Path.Circle({
|
||
center: Point.random() * view.size,
|
||
radius: 25,
|
||
fillColor: 'black',
|
||
strokeColor: 'white'
|
||
});
|
||
|
||
// When the mouse clicks on the item, remove it:
|
||
path.onClick = function(event) {
|
||
this.remove();
|
||
}
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="ondoubleclick" class="member">
|
||
<div class="member-link">
|
||
<a name="ondoubleclick" href="#ondoubleclick"><tt><b>onDoubleClick</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called when the mouse double clicks on the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#ondoubleclick"><tt>view.onDoubleClick</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Double click on the circle shaped path, to make it red:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-35">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse is double clicked on the item,
|
||
// set its fill color to red:
|
||
path.onDoubleClick = function(event) {
|
||
this.fillColor = 'red';
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Double click on the circle shaped paths to remove them:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-36">
|
||
// Loop 30 times:
|
||
for (var i = 0; i < 30; i++) {
|
||
// Create a circle shaped path at a random position
|
||
// in the view:
|
||
var path = new Path.Circle({
|
||
center: Point.random() * view.size,
|
||
radius: 25,
|
||
fillColor: 'black',
|
||
strokeColor: 'white'
|
||
});
|
||
|
||
// When the mouse is double clicked on the item, remove it:
|
||
path.onDoubleClick = function(event) {
|
||
this.remove();
|
||
}
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onmousemove" class="member">
|
||
<div class="member-link">
|
||
<a name="onmousemove" href="#onmousemove"><tt><b>onMouseMove</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called repeatedly while the mouse moves over the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onmousemove"><tt>view.onMouseMove</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Move over the circle shaped path, to change its opacity:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-37">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse moves on top of the item, set its opacity
|
||
// to a random value between 0 and 1:
|
||
path.onMouseMove = function(event) {
|
||
this.opacity = Math.random();
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onmouseenter" class="member">
|
||
<div class="member-link">
|
||
<a name="onmouseenter" href="#onmouseenter"><tt><b>onMouseEnter</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called when the mouse moves over the item. This function will only be called again, once the mouse moved outside of the item first. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onmouseenter"><tt>view.onMouseEnter</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-38">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse enters the item, set its fill color to red:
|
||
path.onMouseEnter = function(event) {
|
||
this.fillColor = 'red';
|
||
}
|
||
|
||
// When the mouse leaves the item, set its fill color to black:
|
||
path.onMouseLeave = function(event) {
|
||
this.fillColor = 'black';
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-39">
|
||
function enter(event) {
|
||
this.fillColor = 'red';
|
||
}
|
||
|
||
function leave(event) {
|
||
this.fillColor = 'black';
|
||
}
|
||
|
||
// When the mouse is pressed:
|
||
function onMouseDown(event) {
|
||
// Create a circle shaped path at the position of the mouse:
|
||
var path = new Path.Circle(event.point, 25);
|
||
path.fillColor = 'black';
|
||
|
||
// When the mouse enters the item, set its fill color to red:
|
||
path.onMouseEnter = enter;
|
||
|
||
// When the mouse leaves the item, set its fill color to black:
|
||
path.onMouseLeave = leave;
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="onmouseleave" class="member">
|
||
<div class="member-link">
|
||
<a name="onmouseleave" href="#onmouseleave"><tt><b>onMouseLeave</b></tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
|
||
<div class="member-text">
|
||
<p>The function to be called when the mouse moves out of the item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy and will reach the view, unless they are stopped with <a href="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from the handler.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Type:</h4>
|
||
<li>
|
||
<tt>Function</tt>⟋<tt>null</tt>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/View.html#onmouseleave"><tt>view.onMouseLeave</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Move the mouse over the circle shaped path and then move it out of it again to set its fill color to red:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-40">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse leaves the item, set its fill color to red:
|
||
path.onMouseLeave = function(event) {
|
||
this.fillColor = 'red';
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- =========================== inherited methods ========================= -->
|
||
<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
|
||
|
||
|
||
<div id="set-props" class="member">
|
||
<div class="member-link">
|
||
<a name="set-props" href="#set-props"><tt><b>set</b>(props)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Sets the properties of the passed object literal on this item to the values defined in the object literal, if the item has property of the given name (or a setter defined for it).</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>props:</tt>
|
||
<tt>Object</tt>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the item itself
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Setting properties through an object literal</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-41">
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 35
|
||
});
|
||
|
||
circle.set({
|
||
strokeColor: 'red',
|
||
strokeWidth: 10,
|
||
fillColor: 'black',
|
||
selected: true
|
||
});
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="clone" class="member">
|
||
<div class="member-link">
|
||
<a name="clone" href="#clone"><tt><b>clone</b>([options])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Clones the item within the same project and places the copy above the item.</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>insert: undefined</tt> — specifies whether the copy should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the original — default: <tt>true</tt></li>
|
||
<li><tt>deep: undefined</tt> — specifies whether the item’s children should also be cloned — default: <tt>true</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>
|
||
|
||
— optional, default: <tt>{ insert: true, deep: true }</tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the newly cloned item
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Cloning items:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-42">
|
||
var circle = new Path.Circle({
|
||
center: [50, 50],
|
||
radius: 10,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Make 20 copies of the circle:
|
||
for (var i = 0; i < 20; i++) {
|
||
var copy = circle.clone();
|
||
|
||
// Distribute the copies horizontally, so we can see them:
|
||
copy.position.x += i * copy.bounds.width;
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="copycontent-source" class="member">
|
||
<div class="member-link">
|
||
<a name="copycontent-source" href="#copycontent-source"><tt><b>copyContent</b>(source)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Copies the content of the specified item over to this item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>source:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to copy the content from
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="copyattributes-source-excludeMatrix" class="member">
|
||
<div class="member-link">
|
||
<a name="copyattributes-source-excludeMatrix" href="#copyattributes-source-excludeMatrix"><tt><b>copyAttributes</b>(source, excludeMatrix)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Copies all attributes of the specified item over to this item. This includes its style, visibility, matrix, pivot, blend-mode, opacity, selection state, data, name, etc.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>source:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to copy the attributes from
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>excludeMatrix:</tt>
|
||
<tt>Boolean</tt>
|
||
— whether to exclude the transformation matrix when copying all attributes
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="rasterize" class="member">
|
||
<div class="member-link">
|
||
<a name="rasterize" href="#rasterize"><tt><b>rasterize</b>([resolution[, insert[, boundRect]]])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Rasterizes the item into a newly created Raster object. The item itself is not removed after rasterization.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>resolution:</tt>
|
||
<tt>Number</tt>
|
||
— the resolution of the raster in pixels per inch (DPI). If not specified, the value of <code>view.resolution</code> is used.
|
||
— optional, default: <tt>view.resolution</tt>
|
||
</li>
|
||
|
||
<li>
|
||
<tt>insert:</tt>
|
||
<tt>Boolean</tt>
|
||
— specifies whether the raster should be inserted into the scene graph. When set to <code>true</code>, it is inserted above the original
|
||
— optional, default: <tt>true</tt>
|
||
</li>
|
||
|
||
<li>
|
||
<tt>boundRect:</tt>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
— bounds within which to rasterize. Defaults to stroke bounds.
|
||
— optional
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt> — the newly created raster item
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Rasterizing an item:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-43">
|
||
var circle = new Path.Circle({
|
||
center: [50, 50],
|
||
radius: 5,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Create a rasterized version of the path:
|
||
var raster = circle.rasterize();
|
||
|
||
// Move it 100pt to the right:
|
||
raster.position.x += 100;
|
||
|
||
// Scale the path and the raster by 300%, so we can compare them:
|
||
circle.scale(5);
|
||
raster.scale(5);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Geometric Tests</h3>
|
||
|
||
<div id="contains-point" class="member">
|
||
<div class="member-link">
|
||
<a name="contains-point" href="#contains-point"><tt><b>contains</b>(point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item’s geometry contains the given point.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the point to check for
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Click within and outside the star below Create a star shaped path:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-44">
|
||
var path = new Path.Star({
|
||
center: [50, 50],
|
||
points: 12,
|
||
radius1: 20,
|
||
radius2: 40,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// Whenever the user presses the mouse:
|
||
function onMouseDown(event) {
|
||
// If the position of the mouse is within the path,
|
||
// set its fill color to red, otherwise set it to
|
||
// black:
|
||
if (path.contains(event.point)) {
|
||
path.fillColor = 'red';
|
||
} else {
|
||
path.fillColor = 'black';
|
||
}
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isinside-rect" class="member">
|
||
<div class="member-link">
|
||
<a name="isinside-rect" href="#isinside-rect"><tt><b>isInside</b>(rect)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>rect:</tt>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
— the rectangle to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="intersects-item" class="member">
|
||
<div class="member-link">
|
||
<a name="intersects-item" href="#intersects-item"><tt><b>intersects</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Hit-testing, Fetching and Matching Items</h3>
|
||
|
||
<div id="hittest-point" class="member">
|
||
<div class="member-link">
|
||
<a name="hittest-point" href="#hittest-point"><tt><b>hitTest</b>(point[, options])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Performs a hit-test on the item and its children (if it is a <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point, returning the first found hit.</p>
|
||
<p>The options object allows you to control the specifics of the hit- test and may contain a combination of the following values:</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>options.tolerance: <tt>Number</tt></tt> — the tolerance of the hit-test — default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.hitTolerance</tt></li>
|
||
<li><tt>options.class: <tt>Function</tt></tt> — only hit-test against a specific item class, or any of its sub-classes, by providing the constructor function against which an <code>instanceof</code> check is performed: <tt>Group</tt>, <tt>Layer</tt>, <tt>Path</tt>, <tt>CompoundPath</tt>, <tt>Shape</tt>, <tt>Raster</tt>, <tt>SymbolItem</tt>, <tt>PointText</tt>, …</li>
|
||
<li><tt>options.match: <tt>Function</tt></tt> — a match function to be called for each found hit result: Return <code>true</code> to return the result, <code>false</code> to keep searching</li>
|
||
<li><tt>options.fill: <tt>Boolean</tt></tt> — hit-test the fill of items — default: <tt>true</tt></li>
|
||
<li><tt>options.stroke: <tt>Boolean</tt></tt> — hit-test the stroke of path items, taking into account the setting of stroke color and width — default: <tt>true</tt></li>
|
||
<li><tt>options.segments: <tt>Boolean</tt></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 — default: <tt>true</tt></li>
|
||
<li><tt>options.curves: <tt>Boolean</tt></tt> — hit-test the curves of path items, without taking the stroke color or width into account</li>
|
||
<li><tt>options.handles: <tt>Boolean</tt></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.</li>
|
||
<li><tt>options.ends: <tt>Boolean</tt></tt> — only hit-test for the first or last segment points of open path items</li>
|
||
<li><tt>options.position: <tt>Boolean</tt></tt> — hit-test the <a href="../classes/Item.html#position"><tt>item.position</tt></a> of of items, which depends on the setting of <a href="../classes/Item.html#pivot"><tt>item.pivot</tt></a></li>
|
||
<li><tt>options.center: <tt>Boolean</tt></tt> — hit-test the <a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
|
||
<li><tt>options.bounds: <tt>Boolean</tt></tt> — hit-test the corners and side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>)</li>
|
||
<li><tt>options.guides: <tt>Boolean</tt></tt> — hit-test items that have <tt>Item#guide</tt> set to <code>true</code></li>
|
||
<li><tt>options.selected: <tt>Boolean</tt></tt> — only hit selected items</li>
|
||
<li><tt>options.hitUnfilledPaths: <tt>Boolean</tt></tt> — Allow hitting null or alpha 0 fills for paths</li>
|
||
<li><tt>options.hitUnstrokedPaths: <tt>Boolean</tt></tt> — Allow hitting null or alpha 0 strokes for paths</li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the point where the hit-test should be performed (in global coordinates system).
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>
|
||
|
||
— optional, default: <tt>{ fill: true, stroke: true, segments: true, tolerance: settings.hitTolerance }</tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt> — a hit result object describing what exactly was hit or <code>null</code> if nothing was hit
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="hittestall-point" class="member">
|
||
<div class="member-link">
|
||
<a name="hittestall-point" href="#hittestall-point"><tt><b>hitTestAll</b>(point[, options])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Performs a hit-test on the item and its children (if it is a <a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point, returning all found hits.</p>
|
||
<p>The options object allows you to control the specifics of the hit- test. See <a href="../classes/Item.html#hittest-point"><tt>hitTest(point[, options])</tt></a> for a list of all options.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the point where the hit-test should be performed (in global coordinates system).
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>
|
||
|
||
— optional, default: <tt>{ fill: true, stroke: true, segments: true, tolerance: settings.hitTolerance }</tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt>Array of <a href="../classes/HitResult.html"><tt>HitResult</tt></a> objects</tt> — hit result objects for all hits, describing what exactly was hit or <code>null</code> if nothing was hit
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#hittest-point"><tt>hitTest(point[, options])</tt></a>;</tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="matches-options" class="member">
|
||
<div class="member-link">
|
||
<a name="matches-options" href="#matches-options"><tt><b>matches</b>(options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item matches the criteria described by the given object, by iterating over all of its properties and matching against their values through <a href="../classes/Item.html#matches-name-compare"><tt>matches(name, compare)</tt></a>.</p>
|
||
<p>See <a href="../classes/Project.html#getitems-options"><tt>project.getItems(options)</tt></a> for a selection of illustrated examples.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>⟋<tt>Function</tt>
|
||
— the criteria to match against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item matches all the criteria, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#getitems-options"><tt>getItems(options)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="matches-name-compare" class="member">
|
||
<div class="member-link">
|
||
<a name="matches-name-compare" href="#matches-name-compare"><tt><b>matches</b>(name, compare)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item matches the given criteria. Extended matching is possible by providing a compare function or a regular expression. Matching points, colors only work as a comparison of the full object, not partial matching (e.g. only providing the x-coordinate to match all points with that x-value). Partial matching does work for <a href="../classes/Item.html#data"><tt>item.data</tt></a>.</p>
|
||
<p>See <a href="../classes/Project.html#getitems-options"><tt>project.getItems(options)</tt></a> for a selection of illustrated examples.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>name:</tt>
|
||
<tt>String</tt>
|
||
— the name of the state to match against
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>compare:</tt>
|
||
<tt>Object</tt>
|
||
— the value, function or regular expression to compare against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item matches the state, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#getitems-options"><tt>getItems(options)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="getitems-options" class="member">
|
||
<div class="member-link">
|
||
<a name="getitems-options" href="#getitems-options"><tt><b>getItems</b>(options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Fetch the descendants (children or children of children) of this item that match the properties in the specified object. Extended matching is possible by providing a compare function or regular expression. Matching points, colors only work as a comparison of the full object, not partial matching (e.g. only providing the x- coordinate to match all points with that x-value). Partial matching does work for <a href="../classes/Item.html#data"><tt>item.data</tt></a>.</p>
|
||
<p>Matching items against a rectangular area is also possible, by setting either <code>options.inside</code> or <code>options.overlapping</code> to a rectangle describing the area in which the items either have to be fully or partly contained.</p>
|
||
<p>See <a href="../classes/Project.html#getitems-options"><tt>project.getItems(options)</tt></a> for a selection of illustrated examples.</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>options.recursive: <tt>Boolean</tt></tt> — whether to loop recursively through all children, or stop at the current level — default: <tt>true</tt></li>
|
||
<li><tt>options.match: <tt>Function</tt></tt> — a match function to be called for each item, allowing the definition of more flexible item checks that are not bound to properties. If no other match properties are defined, this function can also be passed instead of the <code>options</code> object</li>
|
||
<li><tt>options.class: <tt>Function</tt></tt> — the constructor function of the item type to match against</li>
|
||
<li><tt>options.inside: <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt> — the rectangle in which the items need to be fully contained</li>
|
||
<li><tt>options.overlapping: <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt> — the rectangle with which the items need to at least partly overlap</li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>⟋<tt>Function</tt>
|
||
— the criteria to match against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the list of matching descendant items
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#matches-options"><tt>matches(options)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="getitem-match" class="member">
|
||
<div class="member-link">
|
||
<a name="getitem-match" href="#getitem-match"><tt><b>getItem</b>(match)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Fetch the first descendant (child or child of child) of this item that matches the properties in the specified object. Extended matching is possible by providing a compare function or regular expression. Matching points, colors only work as a comparison of the full object, not partial matching (e.g. only providing the x- coordinate to match all points with that x-value). Partial matching does work for <a href="../classes/Item.html#data"><tt>item.data</tt></a>. See <a href="../classes/Project.html#getitems-match"><tt>project.getItems(match)</tt></a> for a selection of illustrated examples.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>match:</tt>
|
||
<tt>Object</tt>⟋<tt>Function</tt>
|
||
— the criteria to match against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the first descendant item matching the given criteria
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#getitems-match"><tt>getItems(match)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Importing / Exporting JSON and SVG</h3>
|
||
|
||
<div id="exportjson" class="member">
|
||
<div class="member-link">
|
||
<a name="exportjson" href="#exportjson"><tt><b>exportJSON</b>([options])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Exports (serializes) the item with its content and child items to a JSON data string.</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>options.asString: <tt>Boolean</tt></tt> — whether the JSON is returned as a <code>Object</code> or a <code>String</code> — default: <tt>true</tt></li>
|
||
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in JSON data — default: <tt>5</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>
|
||
— the serialization options
|
||
— optional
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>String</tt></tt> — the exported JSON data
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="importjson-json" class="member">
|
||
<div class="member-link">
|
||
<a name="importjson-json" href="#importjson-json"><tt><b>importJSON</b>(json)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Imports (deserializes) the stored JSON data into this item. If the data describes an item of the same class or a parent class of the item, the data is imported into the item itself. If not, the imported item is added to this item’s <a href="../classes/Item.html#children"><tt>item.children</tt></a> list. Note that not all type of items can have children.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>json:</tt>
|
||
<tt>String</tt>
|
||
— the JSON data to import from
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="exportsvg" class="member">
|
||
<div class="member-link">
|
||
<a name="exportsvg" href="#exportsvg"><tt><b>exportSVG</b>([options])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Exports the item with its content and child items as an SVG DOM.</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>options.bounds: <tt>String</tt>⟋<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt> — the bounds of the area to export, either as a string (<tt>‘view’</tt>, <tt>content’</tt>), or a <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a> object: <code>'view'</code> uses the view bounds, <code>'content'</code> uses the stroke bounds of all content — default: <tt>‘view’</tt></li>
|
||
<li><tt>options.matrix: <a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt> — the matrix with which to transform the exported content: If <code>options.bounds</code> is set to <code>'view'</code>, <code>paper.view.matrix</code> is used, for all other settings of <code>options.bounds</code> the identity matrix is used. — default: <tt>paper.view.matrix</tt></li>
|
||
<li><tt>options.asString: <tt>Boolean</tt></tt> — whether a SVG node or a <code>String</code> is to be returned — default: <tt>false</tt></li>
|
||
<li><tt>options.precision: <tt>Number</tt></tt> — the amount of fractional digits in numbers used in SVG data — default: <tt>5</tt></li>
|
||
<li><tt>options.matchShapes: <tt>Boolean</tt></tt> — whether path items should tried to be converted to SVG shape items (rect, circle, ellipse, line, polyline, polygon), if their geometries match — default: <tt>false</tt></li>
|
||
<li><tt>options.embedImages: <tt>Boolean</tt></tt> — whether raster images should be embedded as base64 data inlined in the xlink:href attribute, or kept as a link to their external URL. — default: <tt>true</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>
|
||
— the export options
|
||
— optional
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>SVGElement</tt>⟋<tt>String</tt></tt> — the item converted to an SVG node or a <code>String</code> depending on <code>option.asString</code> value
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="importsvg-svg" class="member">
|
||
<div class="member-link">
|
||
<a name="importsvg-svg" href="#importsvg-svg"><tt><b>importSVG</b>(svg[, options])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Converts the provided SVG content into Paper.js items and adds them to the this item’s children list. Note that the item is not cleared first. You can call <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>options.expandShapes: <tt>Boolean</tt></tt> — whether imported shape items should be expanded to path items — default: <tt>false</tt></li>
|
||
<li><tt>options.onLoad: <tt>Function</tt></tt> — the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted <code>item</code> and the original <code>svg</code> data as a string. Only required when loading from external resources.</li>
|
||
<li><tt>options.onError: <tt>Function</tt></tt> — the callback function to call if an error occurs during loading. Only required when loading from external resources.</li>
|
||
<li><tt>options.insert: <tt>Boolean</tt></tt> — whether the imported items should be added to the item that <code>importSVG()</code> is called on — default: <tt>true</tt></li>
|
||
<li><tt>options.applyMatrix: <tt>Boolean</tt></tt> — whether the imported items should have their transformation matrices applied to their contents or not — default: <tt><a href="../classes/PaperScope.html#settings"><tt>paperScope.settings</tt></a>.applyMatrix</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>svg:</tt>
|
||
<tt>SVGElement</tt>⟋<tt>String</tt>
|
||
— the SVG content to import, either as a SVG DOM node, a string containing SVG content, or a string describing the URL of the SVG file to fetch.
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>
|
||
— the import options
|
||
— optional
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the newly created Paper.js item containing the converted SVG content
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="importsvg-svg-onLoad" class="member">
|
||
<div class="member-link">
|
||
<a name="importsvg-svg-onLoad" href="#importsvg-svg-onLoad"><tt><b>importSVG</b>(svg, onLoad)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Imports the provided external SVG file, converts it into Paper.js items and adds them to the this item’s children list. Note that the item is not cleared first. You can call <a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>() to do so.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>svg:</tt>
|
||
<tt>SVGElement</tt>⟋<tt>String</tt>
|
||
— the URL of the SVG file to fetch.
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>onLoad:</tt>
|
||
<tt>Function</tt>
|
||
— the callback function to call once the SVG content is loaded from the given URL receiving two arguments: the converted <code>item</code> and the original <code>svg</code> data as a string. Only required when loading from external files.
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the newly created Paper.js item containing the converted SVG content
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Hierarchy Operations</h3>
|
||
|
||
<div id="addchild-item" class="member">
|
||
<div class="member-link">
|
||
<a name="addchild-item" href="#addchild-item"><tt><b>addChild</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Adds the specified item as a child of this item at the end of the its <a href="../classes/Item.html#children"><tt>children</tt></a> list. You can use this function for groups, compound paths and layers.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to be added as a child
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the added item, or <code>null</code> if adding was not possible
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="insertchild-index-item" class="member">
|
||
<div class="member-link">
|
||
<a name="insertchild-index-item" href="#insertchild-index-item"><tt><b>insertChild</b>(index, item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Inserts the specified item as a child of this item at the specified index in its <a href="../classes/Item.html#children"><tt>children</tt></a> list. You can use this function for groups, compound paths and layers.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>index:</tt>
|
||
<tt>Number</tt>
|
||
— the index at which to insert the item
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to be inserted as a child
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the inserted item, or <code>null</code> if inserting was not possible
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="addchildren-items" class="member">
|
||
<div class="member-link">
|
||
<a name="addchildren-items" href="#addchildren-items"><tt><b>addChildren</b>(items)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Adds the specified items as children of this item at the end of the its children list. You can use this function for groups, compound paths and layers.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>items:</tt>
|
||
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
||
— the items to be added as children
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the added items, or <code>null</code> if adding was not possible
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="insertchildren-index-items" class="member">
|
||
<div class="member-link">
|
||
<a name="insertchildren-index-items" href="#insertchildren-index-items"><tt><b>insertChildren</b>(index, items)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Inserts the specified items as children of this item at the specified index in its <a href="../classes/Item.html#children"><tt>children</tt></a> list. You can use this function for groups, compound paths and layers.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>index:</tt>
|
||
<tt>Number</tt>
|
||
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>items:</tt>
|
||
Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
|
||
— the items to be appended as children
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — the inserted items, or <code>null</code> if inserted was not possible
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="insertabove-item" class="member">
|
||
<div class="member-link">
|
||
<a name="insertabove-item" href="#insertabove-item"><tt><b>insertAbove</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Inserts this item above the specified item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item above which it should be inserted
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the inserted item, or <code>null</code> if inserting was not possible
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="insertbelow-item" class="member">
|
||
<div class="member-link">
|
||
<a name="insertbelow-item" href="#insertbelow-item"><tt><b>insertBelow</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Inserts this item below the specified item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item below which it should be inserted
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the inserted item, or <code>null</code> if inserting was not possible
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="sendtoback" class="member">
|
||
<div class="member-link">
|
||
<a name="sendtoback" href="#sendtoback"><tt><b>sendToBack</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Sends this item to the back of all other items within the same parent.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="bringtofront" class="member">
|
||
<div class="member-link">
|
||
<a name="bringtofront" href="#bringtofront"><tt><b>bringToFront</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Brings this item to the front of all other items within the same parent.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="addto-owner" class="member">
|
||
<div class="member-link">
|
||
<a name="addto-owner" href="#addto-owner"><tt><b>addTo</b>(owner)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Adds it to the specified owner, which can be either a <a href="../classes/Item.html"><tt>Item</tt></a> or a <a href="../classes/Project.html"><tt>Project</tt></a>.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>owner:</tt>
|
||
<a href="../classes/Project.html"><tt>Project</tt></a>⟋<a href="../classes/Layer.html"><tt>Layer</tt></a>⟋<a href="../classes/Group.html"><tt>Group</tt></a>⟋<a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
|
||
— the item or project to add the item to
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the item itself, if it was successfully added
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="copyto-owner" class="member">
|
||
<div class="member-link">
|
||
<a name="copyto-owner" href="#copyto-owner"><tt><b>copyTo</b>(owner)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Clones the item and adds it to the specified owner, which can be either a <a href="../classes/Item.html"><tt>Item</tt></a> or a <a href="../classes/Project.html"><tt>Project</tt></a>.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>owner:</tt>
|
||
<a href="../classes/Project.html"><tt>Project</tt></a>⟋<a href="../classes/Layer.html"><tt>Layer</tt></a>⟋<a href="../classes/Group.html"><tt>Group</tt></a>⟋<a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
|
||
— the item or project to copy the item to
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the new copy of the item, if it was successfully added
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="reduce-options" class="member">
|
||
<div class="member-link">
|
||
<a name="reduce-options" href="#reduce-options"><tt><b>reduce</b>(options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>If this is a group, layer or compound-path with only one child-item, the child-item is moved outside and the parent is erased. Otherwise, the item itself is returned unmodified.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — the reduced item
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="remove" class="member">
|
||
<div class="member-link">
|
||
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes the item and all its children from the project. The item is not destroyed and can be inserted again after removal.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item was removed, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="replacewith-item" class="member">
|
||
<div class="member-link">
|
||
<a name="replacewith-item" href="#replacewith-item"><tt><b>replaceWith</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Replaces this item with the provided new item which will takes its place in the project hierarchy instead.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item that will replace this item
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item was replaced, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="removechildren" class="member">
|
||
<div class="member-link">
|
||
<a name="removechildren" href="#removechildren"><tt><b>removeChildren</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes all of the item’s <a href="../classes/Item.html#children"><tt>children</tt></a> (if any).</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — an array containing the removed items
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="removechildren-start" class="member">
|
||
<div class="member-link">
|
||
<a name="removechildren-start" href="#removechildren-start"><tt><b>removeChildren</b>(start[, end])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes the children from the specified <code>start</code> index to and excluding the <code>end</code> index from the parent’s <a href="../classes/Item.html#children"><tt>children</tt></a> array.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>start:</tt>
|
||
<tt>Number</tt>
|
||
— the beginning index, inclusive
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>end:</tt>
|
||
<tt>Number</tt>
|
||
— the ending index, exclusive
|
||
— optional, default: <tt>children.length</tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt> — an array containing the removed items
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="reversechildren" class="member">
|
||
<div class="member-link">
|
||
<a name="reversechildren" href="#reversechildren"><tt><b>reverseChildren</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Reverses the order of the item’s children</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Tests</h3>
|
||
|
||
<div id="isempty" class="member">
|
||
<div class="member-link">
|
||
<a name="isempty" href="#isempty"><tt><b>isEmpty</b>([recursively])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Specifies whether the item has any content or not. The meaning of what content is differs from type to type. For example, a <a href="../classes/Group.html"><tt>Group</tt></a> with no children, a <a href="../classes/TextItem.html"><tt>TextItem</tt></a> with no text content and a <a href="../classes/Path.html"><tt>Path</tt></a> with no segments all are considered empty.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>recursively:</tt>
|
||
<tt>Boolean</tt>
|
||
— whether an item with children should be considered empty if all its descendants are empty
|
||
— optional, default: <tt>false</tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Style Tests</h3>
|
||
|
||
<div id="hasfill" class="member">
|
||
<div class="member-link">
|
||
<a name="hasfill" href="#hasfill"><tt><b>hasFill</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item has a fill.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a fill, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="hasstroke" class="member">
|
||
<div class="member-link">
|
||
<a name="hasstroke" href="#hasstroke"><tt><b>hasStroke</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item has a stroke.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a stroke, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="hasshadow" class="member">
|
||
<div class="member-link">
|
||
<a name="hasshadow" href="#hasshadow"><tt><b>hasShadow</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item has a shadow.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has a shadow, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Hierarchy Tests</h3>
|
||
|
||
<div id="haschildren" class="member">
|
||
<div class="member-link">
|
||
<a name="haschildren" href="#haschildren"><tt><b>hasChildren</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks if the item contains any children items.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> it has one or more children, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isinserted" class="member">
|
||
<div class="member-link">
|
||
<a name="isinserted" href="#isinserted"><tt><b>isInserted</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item and all its parents are inserted into scene graph or not.</p>
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item is inserted into the scene graph, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isabove-item" class="member">
|
||
<div class="member-link">
|
||
<a name="isabove-item" href="#isabove-item"><tt><b>isAbove</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks if this item is above the specified item in the stacking order of the project.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isbelow-item" class="member">
|
||
<div class="member-link">
|
||
<a name="isbelow-item" href="#isbelow-item"><tt><b>isBelow</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks if the item is below the specified item in the stacking order of the project.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isparent-item" class="member">
|
||
<div class="member-link">
|
||
<a name="isparent-item" href="#isparent-item"><tt><b>isParent</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the specified item is the parent of the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="ischild-item" class="member">
|
||
<div class="member-link">
|
||
<a name="ischild-item" href="#ischild-item"><tt><b>isChild</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the specified item is a child of the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isdescendant-item" class="member">
|
||
<div class="member-link">
|
||
<a name="isdescendant-item" href="#isdescendant-item"><tt><b>isDescendant</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks if the item is contained within the specified item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isancestor-item" class="member">
|
||
<div class="member-link">
|
||
<a name="isancestor-item" href="#isancestor-item"><tt><b>isAncestor</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks if the item is an ancestor of the specified item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item is an ancestor of the specified item, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="issibling-item" class="member">
|
||
<div class="member-link">
|
||
<a name="issibling-item" href="#issibling-item"><tt><b>isSibling</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks if the item is an a sibling of the specified item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
— the item to check against
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item is aa sibling of the specified item, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="isgroupedwith-item" class="member">
|
||
<div class="member-link">
|
||
<a name="isgroupedwith-item" href="#isgroupedwith-item"><tt><b>isGroupedWith</b>(item)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Checks whether the item is grouped with the specified item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>item:</tt>
|
||
<a href="../classes/Item.html"><tt>Item</tt></a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Transform Functions</h3>
|
||
|
||
<div id="translate-delta" class="member">
|
||
<div class="member-link">
|
||
<a name="translate-delta" href="#translate-delta"><tt><b>translate</b>(delta)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Translates (moves) the item by the given offset views.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>delta:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the offset to translate the item by
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="rotate-angle" class="member">
|
||
<div class="member-link">
|
||
<a name="rotate-angle" href="#rotate-angle"><tt><b>rotate</b>(angle[, center])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Rotates the item by a given angle around the given center point.</p>
|
||
<p>Angles are oriented clockwise and measured in degrees.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>angle:</tt>
|
||
<tt>Number</tt>
|
||
— the rotation angle
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>center:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
— optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Matrix.html#rotate-angle"><tt>matrix.rotate(angle[, center])</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Rotating an item:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-45">
|
||
// Create a rectangle shaped path with its top left
|
||
// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
|
||
var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
|
||
path.fillColor = 'black';
|
||
|
||
// Rotate the path by 30 degrees:
|
||
path.rotate(30);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Rotating an item around a specific point:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-46">
|
||
// Create a rectangle shaped path with its top left
|
||
// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
|
||
var topLeft = new Point(175, 50);
|
||
var size = new Size(100, 100);
|
||
var path = new Path.Rectangle(topLeft, size);
|
||
path.fillColor = 'black';
|
||
|
||
// Draw a circle shaped path in the center of the view,
|
||
// to show the rotation point:
|
||
var circle = new Path.Circle({
|
||
center: view.center,
|
||
radius: 5,
|
||
fillColor: 'white'
|
||
});
|
||
|
||
// Each frame rotate the path 3 degrees around the center point
|
||
// of the view:
|
||
function onFrame(event) {
|
||
path.rotate(3, view.center);
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-46"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="scale-scale" class="member">
|
||
<div class="member-link">
|
||
<a name="scale-scale" href="#scale-scale"><tt><b>scale</b>(scale[, center])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Scales the item by the given value from its center point, or optionally from a supplied point.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>scale:</tt>
|
||
<tt>Number</tt>
|
||
— the scale factor
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>center:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
— optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Scaling an item from its center point:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-47">
|
||
// Create a circle shaped path at { x: 80, y: 50 }
|
||
// with a radius of 20:
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 20,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Scale the path by 150% from its center point
|
||
circle.scale(1.5);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Scaling an item from a specific point:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-48">
|
||
// Create a circle shaped path at { x: 80, y: 50 }
|
||
// with a radius of 20:
|
||
var circle = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 20,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Scale the path 150% from its bottom left corner
|
||
circle.scale(1.5, circle.bounds.bottomLeft);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="scale-hor-ver" class="member">
|
||
<div class="member-link">
|
||
<a name="scale-hor-ver" href="#scale-hor-ver"><tt><b>scale</b>(hor, ver[, center])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Scales the item by the given values from its center point, or optionally from a supplied point.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>hor:</tt>
|
||
<tt>Number</tt>
|
||
— the horizontal scale factor
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>ver:</tt>
|
||
<tt>Number</tt>
|
||
— the vertical scale factor
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>center:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
— optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Scaling an item horizontally by 300%:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-49">
|
||
// Create a circle shaped path at { x: 100, y: 50 }
|
||
// with a radius of 20:
|
||
var circle = new Path.Circle({
|
||
center: [100, 50],
|
||
radius: 20,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Scale the path horizontally by 300%
|
||
circle.scale(3, 1);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-49"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="shear-shear" class="member">
|
||
<div class="member-link">
|
||
<a name="shear-shear" href="#shear-shear"><tt><b>shear</b>(shear[, center])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Shears the item by the given value from its center point, or optionally by a supplied point.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>shear:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the horizontal and vertical shear factors as a point
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>center:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
— optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Matrix.html#shear-shear"><tt>matrix.shear(shear[, center])</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="shear-hor-ver" class="member">
|
||
<div class="member-link">
|
||
<a name="shear-hor-ver" href="#shear-hor-ver"><tt><b>shear</b>(hor, ver[, center])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Shears the item by the given values from its center point, or optionally by a supplied point.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>hor:</tt>
|
||
<tt>Number</tt>
|
||
— the horizontal shear factor
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>ver:</tt>
|
||
<tt>Number</tt>
|
||
— the vertical shear factor
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>center:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
— optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Matrix.html#shear-hor-ver"><tt>matrix.shear(hor, ver[, center])</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="skew-skew" class="member">
|
||
<div class="member-link">
|
||
<a name="skew-skew" href="#skew-skew"><tt><b>skew</b>(skew[, center])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Skews the item by the given angles from its center point, or optionally by a supplied point.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>skew:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the horizontal and vertical skew angles in degrees
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>center:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
— optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Matrix.html#shear-skew"><tt>matrix.shear(skew[, center])</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="skew-hor-ver" class="member">
|
||
<div class="member-link">
|
||
<a name="skew-hor-ver" href="#skew-hor-ver"><tt><b>skew</b>(hor, ver[, center])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Skews the item by the given angles from its center point, or optionally by a supplied point.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>hor:</tt>
|
||
<tt>Number</tt>
|
||
— the horizontal skew angle in degrees
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>ver:</tt>
|
||
<tt>Number</tt>
|
||
— the vertical sskew angle in degrees
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>center:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
|
||
— optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Matrix.html#shear-hor-ver"><tt>matrix.shear(hor, ver[, center])</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="transform-matrix" class="member">
|
||
<div class="member-link">
|
||
<a name="transform-matrix" href="#transform-matrix"><tt><b>transform</b>(matrix)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Transform the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>matrix:</tt>
|
||
<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
|
||
— the matrix by which the item shall be transformed
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="globaltolocal-point" class="member">
|
||
<div class="member-link">
|
||
<a name="globaltolocal-point" href="#globaltolocal-point"><tt><b>globalToLocal</b>(point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Converts the specified point from global project coordinate space to the item’s own local coordinate space.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the point to be transformed
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the transformed point as a new instance
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="localtoglobal-point" class="member">
|
||
<div class="member-link">
|
||
<a name="localtoglobal-point" href="#localtoglobal-point"><tt><b>localToGlobal</b>(point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Converts the specified point from the item’s own local coordinate space to the global project coordinate space.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the point to be transformed
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the transformed point as a new instance
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="parenttolocal-point" class="member">
|
||
<div class="member-link">
|
||
<a name="parenttolocal-point" href="#parenttolocal-point"><tt><b>parentToLocal</b>(point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Converts the specified point from the parent’s coordinate space to item’s own local coordinate space.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the point to be transformed
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the transformed point as a new instance
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="localtoparent-point" class="member">
|
||
<div class="member-link">
|
||
<a name="localtoparent-point" href="#localtoparent-point"><tt><b>localToParent</b>(point)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Converts the specified point from the item’s own local coordinate space to the parent’s coordinate space.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>point:</tt>
|
||
<a href="../classes/Point.html"><tt>Point</tt></a>
|
||
— the point to be transformed
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt> — the transformed point as a new instance
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="fitbounds-rectangle" class="member">
|
||
<div class="member-link">
|
||
<a name="fitbounds-rectangle" href="#fitbounds-rectangle"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Transform the item so that its <a href="../classes/Item.html#bounds"><tt>bounds</tt></a> fit within the specified rectangle, without changing its aspect ratio.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>rectangle:</tt>
|
||
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
||
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>fill:</tt>
|
||
<tt>Boolean</tt>
|
||
|
||
— optional, default: <tt>false</tt>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-50">
|
||
// Create a rectangle shaped path with its top left corner
|
||
// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
|
||
var path = new Path.Rectangle({
|
||
point: [80, 25],
|
||
size: [75, 50],
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// Create a circle shaped path with its center at {x: 80, y: 50}
|
||
// and a radius of 30.
|
||
var circlePath = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 30,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Fit the circlePath to the bounding rectangle of
|
||
// the rectangular path:
|
||
circlePath.fitBounds(path.bounds);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-51">
|
||
// Create a rectangle shaped path with its top left corner
|
||
// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
|
||
var path = new Path.Rectangle({
|
||
point: [80, 25],
|
||
size: [75, 50],
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// Create a circle shaped path with its center at {x: 80, y: 50}
|
||
// and a radius of 30.
|
||
var circlePath = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 30,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Fit the circlePath to the bounding rectangle of
|
||
// the rectangular path:
|
||
circlePath.fitBounds(path.bounds, true);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Fitting an item to the bounding rectangle of the view</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-52">
|
||
var path = new Path.Circle({
|
||
center: [80, 50],
|
||
radius: 30,
|
||
fillColor: 'red'
|
||
});
|
||
|
||
// Fit the path to the bounding rectangle of the view:
|
||
path.fitBounds(view.bounds);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-52"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Event Handling</h3>
|
||
|
||
<div id="on-type-function" class="member">
|
||
<div class="member-link">
|
||
<a name="on-type-function" href="#on-type-function"><tt><b>on</b>(type, function)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Attaches an event handler to the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>type:</tt>
|
||
<tt>String</tt>
|
||
— the type of event: <tt>‘frame’</tt>, <tt>mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘click’</tt>, <tt>‘doubleclick’</tt>, <tt>‘mousemove’</tt>, <tt>‘mouseenter’</tt>, <tt>‘mouseleave’</tt>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>function:</tt>
|
||
<tt>Function</tt>
|
||
— the function to be called when the event occurs, receiving a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> or <a href="../classes/Event.html"><tt>Event</tt></a> object as its sole argument
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — this item itself, so calls can be chained
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-53">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// When the mouse enters the item, set its fill color to red:
|
||
path.on('mouseenter', function() {
|
||
this.fillColor = 'red';
|
||
});
|
||
|
||
// When the mouse leaves the item, set its fill color to black:
|
||
path.on('mouseleave', function() {
|
||
this.fillColor = 'black';
|
||
});
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="on-object" class="member">
|
||
<div class="member-link">
|
||
<a name="on-object" href="#on-object"><tt><b>on</b>(object)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Attaches one or more event handlers to the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>object:</tt>
|
||
<tt>Object</tt>
|
||
— an object containing one or more of the following properties: <tt>frame</tt>, <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>click</tt>, <tt>doubleclick</tt>, <tt>mousemove</tt>, <tt>mouseenter</tt>, <tt>mouseleave</tt>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — this item itself, so calls can be chained
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-54">
|
||
// Create a circle shaped path at the center of the view:
|
||
var path = new Path.Circle({
|
||
center: view.center,
|
||
radius: 25
|
||
});
|
||
path.fillColor = 'black';
|
||
|
||
// When the mouse enters the item, set its fill color to red:
|
||
path.on({
|
||
mouseenter: function(event) {
|
||
this.fillColor = 'red';
|
||
},
|
||
mouseleave: function(event) {
|
||
this.fillColor = 'black';
|
||
}
|
||
});
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set black.</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-55">
|
||
var pathHandlers = {
|
||
mouseenter: function(event) {
|
||
this.fillColor = 'red';
|
||
},
|
||
mouseleave: function(event) {
|
||
this.fillColor = 'black';
|
||
}
|
||
}
|
||
|
||
// When the mouse is pressed:
|
||
function onMouseDown(event) {
|
||
// Create a circle shaped path at the position of the mouse:
|
||
var path = new Path.Circle({
|
||
center: event.point,
|
||
radius: 25,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// Attach the handers inside the object literal to the path:
|
||
path.on(pathHandlers);
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="off-type-function" class="member">
|
||
<div class="member-link">
|
||
<a name="off-type-function" href="#off-type-function"><tt><b>off</b>(type, function)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Detach an event handler from the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>type:</tt>
|
||
<tt>String</tt>
|
||
— the type of event: <tt>‘frame’</tt>, <tt>mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘click’</tt>, <tt>‘doubleclick’</tt>, <tt>‘mousemove’</tt>, <tt>‘mouseenter’</tt>, <tt>‘mouseleave’</tt>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>function:</tt>
|
||
<tt>Function</tt>
|
||
— the function to be detached
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — this item itself, so calls can be chained
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="off-object" class="member">
|
||
<div class="member-link">
|
||
<a name="off-object" href="#off-object"><tt><b>off</b>(object)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Detach one or more event handlers to the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>object:</tt>
|
||
<tt>Object</tt>
|
||
— an object containing one or more of the following properties: <tt>frame</tt>, <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>click</tt>, <tt>doubleclick</tt>, <tt>mousemove</tt>, <tt>mouseenter</tt>, <tt>mouseleave</tt>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt> — this item itself, so calls can be chained
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="emit-type-event" class="member">
|
||
<div class="member-link">
|
||
<a name="emit-type-event" href="#emit-type-event"><tt><b>emit</b>(type, event)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Emit an event on the item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>type:</tt>
|
||
<tt>String</tt>
|
||
— the type of event: <tt>‘frame’</tt>, <tt>mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘click’</tt>, <tt>‘doubleclick’</tt>, <tt>‘mousemove’</tt>, <tt>‘mouseenter’</tt>, <tt>‘mouseleave’</tt>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>event:</tt>
|
||
<tt>Object</tt>
|
||
— an object literal containing properties describing the event
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the event had listeners, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="responds-type" class="member">
|
||
<div class="member-link">
|
||
<a name="responds-type" href="#responds-type"><tt><b>responds</b>(type)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Check if the item has one or more event handlers of the specified type.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>type:</tt>
|
||
<tt>String</tt>
|
||
— the type of event: <tt>‘frame’</tt>, <tt>mousedown’</tt>, <tt>‘mouseup’</tt>, <tt>‘mousedrag’</tt>, <tt>‘click’</tt>, <tt>‘doubleclick’</tt>, <tt>‘mousemove’</tt>, <tt>‘mouseenter’</tt>, <tt>‘mouseleave’</tt>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the item has one or more event handlers of the specified type, <tt>false</tt> otherwise
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Remove On Event</h3>
|
||
|
||
<div id="removeon-options" class="member">
|
||
<div class="member-link">
|
||
<a name="removeon-options" href="#removeon-options"><tt><b>removeOn</b>(options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes the item when the events specified in the passed options object occur.</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>options.move: undefined</tt> — {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</li>
|
||
<li><tt>options.drag: undefined</tt> — {Boolena) remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</li>
|
||
<li><tt>options.down: undefined</tt> — {Boolean) remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</li>
|
||
<li><tt>options.up: undefined</tt> — {Boolean) remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Click and drag below:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-56">
|
||
function onMouseDrag(event) {
|
||
// Create a circle shaped path at the mouse position,
|
||
// with a radius of 10:
|
||
var path = new Path.Circle({
|
||
center: event.point,
|
||
radius: 10,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// Remove the path on the next onMouseDrag or onMouseDown event:
|
||
path.removeOn({
|
||
drag: true,
|
||
down: true
|
||
});
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-56"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="removeonmove" class="member">
|
||
<div class="member-link">
|
||
<a name="removeonmove" href="#removeonmove"><tt><b>removeOnMove</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Move your mouse below:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-57">
|
||
function onMouseMove(event) {
|
||
// Create a circle shaped path at the mouse position,
|
||
// with a radius of 10:
|
||
var path = new Path.Circle({
|
||
center: event.point,
|
||
radius: 10,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// On the next move event, automatically remove the path:
|
||
path.removeOnMove();
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-57"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="removeondown" class="member">
|
||
<div class="member-link">
|
||
<a name="removeondown" href="#removeondown"><tt><b>removeOnDown</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Click a few times below:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-58">
|
||
function onMouseDown(event) {
|
||
// Create a circle shaped path at the mouse position,
|
||
// with a radius of 10:
|
||
var path = new Path.Circle({
|
||
center: event.point,
|
||
radius: 10,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// Remove the path, next time the mouse is pressed:
|
||
path.removeOnDown();
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-58"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="removeondrag" class="member">
|
||
<div class="member-link">
|
||
<a name="removeondrag" href="#removeondrag"><tt><b>removeOnDrag</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Click and drag below:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-59">
|
||
function onMouseDrag(event) {
|
||
// Create a circle shaped path at the mouse position,
|
||
// with a radius of 10:
|
||
var path = new Path.Circle({
|
||
center: event.point,
|
||
radius: 10,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// On the next drag event, automatically remove the path:
|
||
path.removeOnDrag();
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-59"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="removeonup" class="member">
|
||
<div class="member-link">
|
||
<a name="removeonup" href="#removeonup"><tt><b>removeOnUp</b>()</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Click a few times below:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-60">
|
||
function onMouseDown(event) {
|
||
// Create a circle shaped path at the mouse position,
|
||
// with a radius of 10:
|
||
var path = new Path.Circle({
|
||
center: event.point,
|
||
radius: 10,
|
||
fillColor: 'black'
|
||
});
|
||
|
||
// Remove the path, when the mouse is released:
|
||
path.removeOnUp();
|
||
}
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-60"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h3>Tweening Functions</h3>
|
||
|
||
<div id="tween-from-to-options" class="member">
|
||
<div class="member-link">
|
||
<a name="tween-from-to-options" href="#tween-from-to-options"><tt><b>tween</b>(from, to, options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Tween item between two states.</p>
|
||
<ul class="member-list">
|
||
<h4>Options:</h4>
|
||
<li><tt>options.duration: <tt>Number</tt></tt> — the duration of the tweening</li>
|
||
<li><tt>options.easing: <tt>Function</tt>⟋<tt>String</tt></tt> — an easing function or the type of the easing: <tt>‘linear’ ‘easeInQuad’ ‘easeOutQuad’ ‘easeInOutQuad’ ‘easeInCubic’ ‘easeOutCubic’ ‘easeInOutCubic’ ‘easeInQuart’ ‘easeOutQuart’ ‘easeInOutQuart’ ‘easeInQuint’ ‘easeOutQuint’ ‘easeInOutQuint’</tt> — default: <tt>‘linear’</tt></li>
|
||
<li><tt>options.start: <tt>Boolean</tt></tt> — whether to start tweening automatically — default: <tt>true</tt></li>
|
||
</ul>
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>from:</tt>
|
||
<tt>Object</tt>
|
||
— the state at the start of the tweening
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>to:</tt>
|
||
<tt>Object</tt>
|
||
— the state at the end of the tweening
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>⟋<tt>Number</tt>
|
||
— the options or the duration
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<h4>Example:<span class="description">Tween fillColor:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-61">
|
||
var path = new Path.Circle({
|
||
radius: view.bounds.height * 0.4,
|
||
center: view.center
|
||
});
|
||
path.tween(
|
||
{ fillColor: 'blue' },
|
||
{ fillColor: 'red' },
|
||
3000
|
||
);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-61"></canvas></div>
|
||
</div>
|
||
|
||
|
||
<h4>Example:<span class="description">Tween rotation:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-62">
|
||
var path = new Shape.Rectangle({
|
||
fillColor: 'red',
|
||
center: [50, view.center.y],
|
||
size: [60, 60]
|
||
});
|
||
path.tween({
|
||
rotation: 180,
|
||
'position.x': view.bounds.width - 50,
|
||
'fillColor.hue': '+= 90'
|
||
}, {
|
||
easing: 'easeInOutCubic',
|
||
duration: 2000
|
||
});
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-62"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="tween-to-options" class="member">
|
||
<div class="member-link">
|
||
<a name="tween-to-options" href="#tween-to-options"><tt><b>tween</b>(to, options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Tween item to a state.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>to:</tt>
|
||
<tt>Object</tt>
|
||
— the state at the end of the tweening
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>⟋<tt>Number</tt>
|
||
— the options or the duration
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#tween-from-to-options"><tt>item.tween(from, to, options)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Tween a nested property with relative values</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-63">
|
||
var path = new Path.Rectangle({
|
||
size: [100, 100],
|
||
position: view.center,
|
||
fillColor: 'red',
|
||
});
|
||
|
||
var delta = { x: path.bounds.width / 2, y: 0 };
|
||
|
||
path.tween({
|
||
'segments[1].point': ['+=', delta],
|
||
'segments[2].point.x': '-= 50'
|
||
}, 3000);
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="200" id="canvas-63"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="tween-options" class="member">
|
||
<div class="member-link">
|
||
<a name="tween-options" href="#tween-options"><tt><b>tween</b>(options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Tween item.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>⟋<tt>Number</tt>
|
||
— the options or the duration
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#tween-from-to-options"><tt>item.tween(from, to, options)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Start an empty tween and just use the update callback:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-64">
|
||
var path = new Path.Circle({
|
||
fillColor: 'blue',
|
||
radius: view.bounds.height * 0.4,
|
||
center: view.center,
|
||
});
|
||
var pathFrom = path.clone({ insert: false })
|
||
var pathTo = new Path.Rectangle({
|
||
position: view.center,
|
||
rectangle: path.bounds,
|
||
insert: false
|
||
});
|
||
path.tween(2000).onUpdate = function(event) {
|
||
path.interpolate(pathFrom, pathTo, event.factor)
|
||
};
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-64"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="tweento-to-options" class="member">
|
||
<div class="member-link">
|
||
<a name="tweento-to-options" href="#tweento-to-options"><tt><b>tweenTo</b>(to, options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Tween item to a state.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>to:</tt>
|
||
<tt>Object</tt>
|
||
— the state at the end of the tweening
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>⟋<tt>Number</tt>
|
||
— the options or the duration
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#tween-to-options"><tt>item.tween(to, options)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="tweenfrom-from-options" class="member">
|
||
<div class="member-link">
|
||
<a name="tweenfrom-from-options" href="#tweenfrom-from-options"><tt><b>tweenFrom</b>(from, options)</tt></a>
|
||
</div>
|
||
<div class="member-description hidden">
|
||
<div class="member-text">
|
||
<p>Tween item from a state to its state before the tweening.</p>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Parameters:</h4>
|
||
|
||
<li>
|
||
<tt>from:</tt>
|
||
<tt>Object</tt>
|
||
— the state at the start of the tweening
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<tt>options:</tt>
|
||
<tt>Object</tt>⟋<tt>Number</tt>
|
||
— the options or the duration
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>Returns:</h4>
|
||
|
||
<li>
|
||
<tt><a href="../classes/Tween.html"><tt>Tween</tt></a></tt>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
<ul class="member-list">
|
||
<h4>See also:</h4>
|
||
|
||
<li><tt><a href="../classes/Item.html#tween-from-to-options"><tt>item.tween(from, to, options)</tt></a></tt></li>
|
||
|
||
</ul>
|
||
|
||
<h4>Example:<span class="description">Tween fillColor from red to the path's initial fillColor:</span></h4>
|
||
|
||
<div class="paperscript split">
|
||
|
||
<div class="buttons">
|
||
<div class="button run">Run</div>
|
||
</div>
|
||
|
||
<script type="text/paperscript" canvas="canvas-65">
|
||
var path = new Path.Circle({
|
||
fillColor: 'blue',
|
||
radius: view.bounds.height * 0.4,
|
||
center: view.center
|
||
});
|
||
path.tweenFrom({ fillColor: 'red' }, { duration: 1000 });
|
||
</script>
|
||
<div class="canvas"><canvas width="516" height="100" id="canvas-65"></canvas></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<!-- =========================== copyright notice ========================== -->
|
||
<p class="footer">
|
||
Paper.js v0.12.7<br>
|
||
Copyright © 2011—2024 <a href="http://www.lehni.org" target="_blank">Jürg Lehni</a> & <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
|
||
<div class="content-end"></div>
|
||
|
||
|
||
</article>
|
||
</body> |