mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-07 13:22:07 -05:00
538 lines
No EOL
14 KiB
HTML
538 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>View</title>
|
|
<base target="classFrame">
|
|
<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
|
|
<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
|
|
<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
|
|
<script src="../resources/js/paper.js" type="text/javascript"></script>
|
|
<script src="../resources/js/codemirror.js" type="text/javascript"></script>
|
|
<script src="../resources/js/reference.js" type="text/javascript"></script>
|
|
</head>
|
|
<body class="reference">
|
|
<div class="reference-class">
|
|
<h1>View</h1>
|
|
|
|
<p>The View object wraps a canvas element and handles drawing and user
|
|
interaction through mouse and keyboard for it. It offer means to scroll the
|
|
view, find the currently visible bounds in project coordinates, or the
|
|
center, both useful for constructing artwork that should appear centered on
|
|
screen.</p>
|
|
|
|
</div>
|
|
|
|
<!-- ============================== constructors ========================= -->
|
|
<div class="reference-members"><h2>Constructors</h2>
|
|
|
|
|
|
<div id="view-canvas-member" class="member">
|
|
<div id="view-canvas-link" class="member-link">
|
|
<a name="view-canvas" href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
|
|
</div>
|
|
<div id="view-canvas-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view-canvas', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Creates a view object</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>canvas:</tt>
|
|
<tt>HTMLCanvasElement</tt> / <tt>String</tt>
|
|
— The canvas object that this
|
|
view should wrap, or the String id that represents it
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="reference-members"><h2>Properties</h2>
|
|
|
|
|
|
<div id="canvas-member" class="member">
|
|
<div id="canvas-link" class="member-link">
|
|
<a name="canvas" href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
|
|
</div>
|
|
<div id="canvas-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('canvas', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The underlying native canvas element.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>HTMLCanvasElement</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="viewsize-member" class="member">
|
|
<div id="viewsize-link" class="member-link">
|
|
<a name="viewsize" href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
|
|
</div>
|
|
<div id="viewsize-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('viewsize', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The size of the view canvas. Changing the view's size will resize it's
|
|
underlying canvas.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Size.html"><tt>Size</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="bounds-member" class="member">
|
|
<div id="bounds-link" class="member-link">
|
|
<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
|
</div>
|
|
<div id="bounds-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The bounds of the currently visible area in project coordinates.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="size-member" class="member">
|
|
<div id="size-link" class="member-link">
|
|
<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
|
|
</div>
|
|
<div id="size-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The size of the visible area in project coordinates.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Size.html"><tt>Size</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="center-member" class="member">
|
|
<div id="center-link" class="member-link">
|
|
<a name="center" href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
|
|
</div>
|
|
<div id="center-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('center', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The center of the visible area in project coordinates.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="zoom-member" class="member">
|
|
<div id="zoom-link" class="member-link">
|
|
<a name="zoom" href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
|
|
</div>
|
|
<div id="zoom-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('zoom', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The zoom factor by which the project coordinates are magnified.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Number</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Event Handlers</h3>
|
|
|
|
<div id="onframe-member" class="member">
|
|
<div id="onframe-link" class="member-link">
|
|
<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
|
</div>
|
|
<div id="onframe-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>Handler function to be called on each frame of an animation.</p>
|
|
<p>The function receives an event object which contains information about
|
|
the frame event:</p>
|
|
<p><b><tt>event.count</tt></b>: the number of times the frame event was fired.</p>
|
|
<p><b><tt>event.time</tt></b>: the total amount of time passed since the first frame
|
|
event in seconds.</p>
|
|
<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last frame
|
|
event.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Function</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Creating an animation:
|
|
</p>
|
|
|
|
<div class="paperscript split">
|
|
<div class="button">Run</div>
|
|
<script type="text/paperscript" canvas="canvas-0">
|
|
// 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';
|
|
|
|
function onFrame(event) {
|
|
// Every frame, rotate the path by 3 degrees:
|
|
path.rotate(3);
|
|
}
|
|
</script>
|
|
<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="onresize-member" class="member">
|
|
<div id="onresize-link" class="member-link">
|
|
<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
|
</div>
|
|
<div id="onresize-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>Handler function that is called whenever a view is resized.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<tt>Function</tt>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
<b>Example</b> — Repositioning items when a view is resized:
|
|
</p>
|
|
|
|
|
|
<pre class="code">// Create a circle shaped path in the center of the view:
|
|
var path = new Path.Circle(view.bounds.center, 30);
|
|
path.fillColor = 'red';
|
|
|
|
function onResize(event) {
|
|
// Whenever the view is resized, move the path to its center:
|
|
path.position = view.center;
|
|
}</pre>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- ============================== methods ================================ -->
|
|
<div class="reference-members"><h2>Methods</h2>
|
|
|
|
|
|
<div id="activate-member" class="member">
|
|
<div id="activate-link" class="member-link">
|
|
<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
|
</div>
|
|
<div id="activate-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Makes this view the active one, meaning <a href="../classes/PaperScope.html#view"><tt>paperScope.view</tt></a> will
|
|
point to it.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="remove-member" class="member">
|
|
<div id="remove-link" class="member-link">
|
|
<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
|
</div>
|
|
<div id="remove-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Removes thsi view from the <a href="../classes/PaperScope.html#views"><tt>paperScope.views</tt></a> list and frees the
|
|
associated canvas.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="isvisible-member" class="member">
|
|
<div id="isvisible-link" class="member-link">
|
|
<a name="isvisible" href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
|
|
</div>
|
|
<div id="isvisible-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isvisible', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Checks whether the view is currently visible within the current browser
|
|
viewport.</p>
|
|
|
|
|
|
<ul><b>Returns:</b>
|
|
|
|
<li>
|
|
<tt><tt>Boolean</tt></tt> — Whether the view is visible.
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="scrollby-point-member" class="member">
|
|
<div id="scrollby-point-link" class="member-link">
|
|
<a name="scrollby-point" href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
|
|
</div>
|
|
<div id="scrollby-point-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scrollby-point', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Scrolls the view by the given vector.</p>
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>point:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="draw-member" class="member">
|
|
<div id="draw-link" class="member-link">
|
|
<a name="draw" href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
|
|
</div>
|
|
<div id="draw-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('draw', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="member-text">
|
|
<p>Draws the view.</p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- =========================== copyright notice ========================= -->
|
|
<p class="footer">Copyright © 2011 <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>
|
|
|
|
</body> |