<!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="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 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"> <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="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"> <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>