<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Symbol</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>Symbol</h1>
<p>Symbols allow you to place multiple instances of an item in your project. This can save memory, since all instances of a symbol simply refer to the original item and it can speed up moving around complex objects, since internal properties such as segment lists and gradient positions don’t need to be updated with every transformation.</p>
</div>
<!-- =============================== constructors ========================== -->
<div class="reference-members">
<h2>Constructors</h2>
<div id="symbol-item" class="member">
<div class="member-link">
<a name="symbol-item" href="#symbol-item"><tt><b>Symbol</b>(item[, dontCenter])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a Symbol item.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>item:</tt>
<a href="../classes/Item.html"><tt>Item</tt></a>
— the source item which is copied as the definition of the symbol
</li>
<li>
<tt>dontCenter:</tt>
<tt>Boolean</tt>
— optional, default: <tt>false</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
</li>
</ul>
<h4>Example:<span class="description">Placing 100 instances of a symbol:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
var path = new Path.Star(new Point(0, 0), 6, 5, 13);
path.style = {
fillColor: 'white',
strokeColor: 'black'
};
// Create a symbol from the path:
var symbol = new Symbol(path);
// Remove the path:
path.remove();
// Place 100 instances of the symbol:
for (var i = 0; i < 100; i++) {
// Place an instance of the symbol in the project:
var instance = symbol.place();
// Move the instance to a random position within the view:
instance.position = Point.random() * view.size;
// Rotate the instance by a random amount between
// 0 and 360 degrees:
instance.rotate(Math.random() * 360);
// Scale the instance between 0.25 and 1:
instance.scale(0.25 + Math.random() * 0.75);
}
</script>
<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
</div>
</div>
</div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<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 symbol 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="definition" class="member">
<div class="member-link">
<a name="definition" href="#definition"><tt><b>definition</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The symbol definition.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<a href="../classes/Item.html"><tt>Item</tt></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="place" class="member">
<div class="member-link">
<a name="place" href="#place"><tt><b>place</b>([position])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Places in instance of the symbol in the project.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>position:</tt>
<a href="../classes/Point.html"><tt>Point</tt></a>
— the position of the placed symbol
— optional
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
<div id="clone" class="member">
<div class="member-link">
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Returns a copy of the symbol.</p>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
</li>
</ul>
</div>
</div>
</div>
<div id="equals-symbol" class="member">
<div class="member-link">
<a name="equals-symbol" href="#equals-symbol"><tt><b>equals</b>(symbol)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Checks whether the symbol’s definition is equal to the supplied symbol.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>symbol:</tt>
<a href="../classes/Symbol.html"><tt>Symbol</tt></a>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if they are equal, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Paper.js v0.9.25 (develop)<br>
Copyright © 2011—2016 <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>