scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-09 14:22:08 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
paper.js/dist/docs/classes/Tool.html

761 lines
17 KiB
HTML
Raw Normal View History

Prebuilt module for commit a183dc0c0d7ba05d9ac0f60bcf1b3ff9b1e2a745
2019-12-13 10:17:15 -05:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tool</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>Tool</h1>
<p>The Tool object refers to a script that the user can interact with by using the mouse and keyboard and can be accessed through the global <code>tool</code> variable. All its properties are also available in the paper scope.</p>
<p>The global <code>tool</code> variable only exists in scripts that contain mouse handler functions (<a href="../classes/Tool.html#onmousemove"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown"><tt>onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup"><tt>onMouseUp</tt></a>) or a keyboard handler function (<a href="../classes/Tool.html#onkeydown"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>onKeyUp</tt></a>).</p>
<h4>Example:</h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-0">
var path;
// Only execute onMouseDrag when the mouse
// has moved at least 10 points:
tool.minDistance = 10;
tool.onMouseDown = function(event) {
// Create a new path every time the mouse is clicked
path = new Path();
path.add(event.point);
path.strokeColor = 'black';
}
tool.onMouseDrag = function(event) {
// Add a point to the path every time the mouse is dragged
path.add(event.point);
}
</script>
<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
</div>
</div>
<!-- ================================ properties =========================== -->
<div class="reference-members">
<h2>Properties</h2>
<div id="mindistance" class="member">
<div class="member-link">
<a name="mindistance" href="#mindistance"><tt><b>minDistance</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The minimum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="maxdistance" class="member">
<div class="member-link">
<a name="maxdistance" href="#maxdistance"><tt><b>maxDistance</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The maximum distance the mouse has to drag before firing the onMouseDrag event, since the last onMouseDrag event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<div id="fixeddistance" class="member">
<div class="member-link">
<a name="fixeddistance" href="#fixeddistance"><tt><b>fixedDistance</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Number</tt>
</li>
</ul>
</div>
</div>
</div>
<h3>Mouse Event Handlers</h3>
<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. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>⟋<tt>null</tt>
</li>
</ul>
<h4>Example:<span class="description">Creating circle shaped paths where the user presses the mouse button:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-1">
tool.onMouseDown = function(event) {
// Create a new circle shaped path with a radius of 10
// at the position of the mouse (event.point):
var path = new Path.Circle({
center: event.point,
radius: 10,
fillColor: 'black'
});
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-1"></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. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>⟋<tt>null</tt>
</li>
</ul>
<h4>Example:<span class="description">Draw a line by adding a segment to a path on every mouse drag event:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-2">
// Create an empty path:
var path = new Path({
strokeColor: 'black'
});
tool.onMouseDrag = function(event) {
// Add a segment to the path at the position of the mouse:
path.add(event.point);
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-2"></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 the mouse moves within the project view. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>⟋<tt>null</tt>
</li>
</ul>
<h4>Example:<span class="description">Moving a path to the position of the mouse:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-3">
// Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
var path = new Path.Circle({
center: [0, 0],
radius: 10,
fillColor: 'black'
});
tool.onMouseMove = function(event) {
// Whenever the user moves the mouse, move the path
// to that position:
path.position = event.point;
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-3"></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. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the tool event.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>⟋<tt>null</tt>
</li>
</ul>
<h4>Example:<span class="description">Creating circle shaped paths where the user releases the mouse:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-4">
tool.onMouseUp = function(event) {
// Create a new circle shaped path with a radius of 10
// at the position of the mouse (event.point):
var path = new Path.Circle({
center: event.point,
radius: 10,
fillColor: 'black'
});
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
</div>
</div>
</div>
</div>
<h3>Keyboard Event Handlers</h3>
<div id="onkeydown" class="member">
<div class="member-link">
<a name="onkeydown" href="#onkeydown"><tt><b>onKeyDown</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called when the user presses a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>⟋<tt>null</tt>
</li>
</ul>
<h4>Example:<span class="description">Scaling a path whenever the user presses the space bar:</span></h4>
<div class="paperscript split">
<div class="buttons">
<div class="button run">Run</div>
</div>
<script type="text/paperscript" canvas="canvas-5">
// Create a circle shaped path:
var path = new Path.Circle({
center: new Point(50, 50),
radius: 30,
fillColor: 'red'
});
tool.onKeyDown = function(event) {
if (event.key == 'space') {
// Scale the path by 110%:
path.scale(1.1);
// Prevent the key event from bubbling
return false;
}
}
</script>
<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
</div>
</div>
</div>
</div>
<div id="onkeyup" class="member">
<div class="member-link">
<a name="onkeyup" href="#onkeyup"><tt><b>onKeyUp</b></tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>The function to be called when the user releases a key on the keyboard. The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains information about the keyboard event.</p>
<p>If the function returns <code>false</code>, the keyboard event will be prevented from bubbling up. This can be used for example to stop the window from scrolling, when you need the user to interact with arrow keys.</p>
<ul class="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>⟋<tt>null</tt>
</li>
</ul>
<h4>Example:</h4>
<pre><code>tool.onKeyUp = function(event) {
if (event.key == 'space') {
console.log('The spacebar was released!');
}
}</code></pre>
</div>
</div>
</div>
</div>
<!-- ============================== methods ================================ -->
<div class="reference-members">
<h2>Methods</h2>
<div id="activate" class="member">
<div class="member-link">
<a name="activate" href="#activate"><tt><b>activate</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Activates this tool, meaning <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> will point to it and it will be the one that receives tool events.</p>
</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 this tool from the <a href="../classes/PaperScope.html#tools"><tt>paperScope.tools</tt></a> list.</p>
</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>Attach an event handler to the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>type:</tt>
<tt>String</tt>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
<li>
<tt>function:</tt>
<tt>Function</tt>
&mdash;&nbsp;the function to be called when the event occurs, receiving a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object as its sole argument
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
</li>
</ul>
</div>
</div>
</div>
<div id="on-param" class="member">
<div class="member-link">
<a name="on-param" href="#on-param"><tt><b>on</b>(param)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Attach one or more event handlers to the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>param:</tt>
<tt>Object</tt>
&mdash;&nbsp;an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
</li>
</ul>
</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 tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>type:</tt>
<tt>String</tt>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
<li>
<tt>function:</tt>
<tt>Function</tt>
&mdash;&nbsp;the function to be detached
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool itself, so calls can be chained
</li>
</ul>
</div>
</div>
</div>
<div id="off-param" class="member">
<div class="member-link">
<a name="off-param" href="#off-param"><tt><b>off</b>(param)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Detach one or more event handlers from the tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>param:</tt>
<tt>Object</tt>
&mdash;&nbsp;an object literal containing one or more of the following properties: <tt>mousedown</tt>, <tt>mouseup</tt>, <tt>mousedrag</tt>, <tt>mousemove</tt>, <tt>keydown</tt>, <tt>keyup</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><a href="../classes/Tool.html"><tt>Tool</tt></a></tt>&nbsp;&mdash;&nbsp;this tool 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 tool.</p>
<ul class="member-list">
<h4>Parameters:</h4>
<li>
<tt>type:</tt>
<tt>String</tt>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
<li>
<tt>event:</tt>
<tt>Object</tt>
&mdash;&nbsp;an object literal containing properties describing the event
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<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 tool 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>
&mdash;&nbsp;the event type: <tt>&lsquo;mousedown&rsquo;</tt>, <tt>&lsquo;mouseup&rsquo;</tt>, <tt>&lsquo;mousedrag&rsquo;</tt>, <tt>&lsquo;mousemove&rsquo;</tt>, <tt>&lsquo;keydown&rsquo;</tt>, <tt>&lsquo;keyup&rsquo;</tt>
</li>
</ul>
<ul class="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the tool has one or more event handlers of the specified type, <tt>false</tt> otherwise
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- =========================== copyright notice ========================== -->
<p class="footer">
Prebuilt module for commit 4bc92ce1321392c59474f6ec14fdea9a7365b113
2019-12-15 16:00:11 -05:00
Paper.js v0.12.4 (develop)<br>
Prebuilt module for commit efcdd7bda8c4f81e9c913037a4685fcdb63d4d43
2020-01-17 12:14:59 -05:00
Copyright &#169; 2011—2020 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
Prebuilt module for commit a183dc0c0d7ba05d9ac0f60bcf1b3ff9b1e2a745
2019-12-13 10:17:15 -05:00
<div class="content-end"></div>
</article>
</body>
Reference in a new issue Copy permalink