mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-08 05:42:07 -05:00
421 lines
No EOL
10 KiB
HTML
421 lines
No EOL
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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..</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>Canvas</tt>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="reference-members"><h2>Properties</h2>
|
|
|
|
|
|
<div id="viewbounds-member" class="member">
|
|
<div id="viewbounds-link" class="member-link">
|
|
<a name="viewbounds" href="#" onClick="return toggleMember('viewbounds', false);"><tt><b>viewBounds</b></tt></a>
|
|
</div>
|
|
<div id="viewbounds-description" class="member-description hidden">
|
|
<div class="member-header">
|
|
<div class="member-title">
|
|
<div class="member-link">
|
|
<a href="#" onClick="return toggleMember('viewbounds', false);"><tt><b>viewBounds</b></tt></a>
|
|
</div>
|
|
</div>
|
|
<div class="member-close"><input type="button" value="Close" onClick="toggleMember('viewbounds', false);"></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="member-text">
|
|
<p>The bounds of the view, i.e. the bounds of the part of the project which
|
|
is visible in the window.</p>
|
|
|
|
|
|
<ul><b>Type:</b>
|
|
<li>
|
|
<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
|
|
</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">
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
<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="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">
|
|
|
|
|
|
<ul><b>Parameters:</b>
|
|
|
|
<li>
|
|
<tt>point:</tt>
|
|
<a href="../classes/Point.html"><tt>Point</tt></a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
</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> |