paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
2,417 lines (1,542 loc) • 176 kB
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>
</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-1">
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-1"></canvas></div>
</div>
</div>
</div>
</div>
<div id="raster-object" class="member">
<div class="member-link">
<a name="raster-object" href="#raster-object"><tt><b>Raster</b>(object)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new raster from an object description, and places it in the active layer.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>object:</tt>
<tt>Object</tt>
— an object containing properties to be set on the raster
</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:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-2">
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-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>Determines if the raster is drawn with pixel smoothing when scaled up or down, and if so, at which quality its pixels are to be smoothed. The settings of this property control both the <code>imageSmoothingEnabled</code> and <code>imageSmoothingQuality</code> properties of the <code>CanvasRenderingContext2D</code> interface.</p>
<p>By default, smoothing is enabled at <code>'low'</code> quality. It can be set to of <code>'off'</code> to scale the raster’s pixels by repeating the nearest neighboring pixels, or to <code>'low'</code>, <code>'medium'</code> or <code>'high'</code> to control the various degrees of available image smoothing quality.</p>
<p>For backward compatibility, it can can also be set to <code>false</code> (= <code>'off'</code>) or <code>true</code> (= <code>'low'</code>).</p>
<ul class="member-list">
<h4>Default:</h4>
<li><tt>'low'</tt></li>
</ul>
<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-6">
var raster = new Raster({source:
'http://assets.paperjs.org/images/marilyn.jpg', smoothing: 'off'
});
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="putimagedata-data-point" class="member">
<div class="member-link">
<a name="putimagedata-data-point" href="#putimagedata-data-point"><tt><b>putImageData</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 id="setimagedata-data" class="member">
<div class="member-link">
<a name="setimagedata-data" href="#setimagedata-data"><tt><b>setImageData</b>(data)</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>
</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