<p>The View object wraps an HTML 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>
<p>Controls whether the view is automatically updated in the next animation frame on changes, or whether you prefer to manually call <ahref="../classes/View.html#update"><tt>update</tt></a>() or <ahref="../classes/View.html#requestupdate"><tt>requestUpdate</tt></a>() after changes. Note that this is <code>true</code> by default, except for Node.js, where manual updates make more sense.</p>
<p>The ratio between physical pixels and device-independent pixels (DIPs) of the underlying canvas / device. It is <code>1</code> for normal displays, and <code>2</code> or more for high-resolution displays.</p>
<p>The resoltuion of the underlying canvas / device in pixel per inch (DPI). It is <code>72</code> for normal displays, and <code>144</code> for high-resolution displays with a pixel-ratio of <code>2</code>.</p>
<p>Handler function to be called on each frame of an animation. The function receives an event object which contains information about the frame event:</p>
<ulclass="member-list">
<h4>Type:</h4>
<li>
<tt>Function</tt>
</li>
</ul>
<ulclass="member-list">
<h4>Options:</h4>
<li><tt>event.count: <tt>Number</tt></tt>— the number of times the frame event was fired</li>
<li><tt>event.time: <tt>Number</tt></tt>— the total amount of time passed since the first frame event in seconds</li>
<li><tt>event.delta: <tt>Number</tt></tt>— the time passed in seconds since the last frame event</li>
<p>The function to be called when the mouse button is pushed down on the view. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with <ahref="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from a handler.</p>
<p>The function to be called when the mouse position changes while the mouse is being dragged over the view. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with <ahref="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from a handler.</p>
<p>The function to be called when the mouse button is released over the item. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event.</p>
<p>The function to be called when the mouse clicks on the view. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with <ahref="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from a handler.</p>
<p>The function to be called when the mouse double clicks on the view. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with <ahref="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from a handler.</p>
<p>The function to be called repeatedly while the mouse moves over the view. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with <ahref="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from a handler.</p>
<p>The function to be called when the mouse moves over the view. This function will only be called again, once the mouse moved outside of the view first. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with <ahref="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from a handler.</p>
<p>The function to be called when the mouse moves out of the view. The function receives a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the mouse event. Note that such mouse events bubble up the scene graph hierarchy, reaching the view at the end, unless they are stopped before with <ahref="../classes/Event.html#stoppropagation"><tt>event.stopPropagation</tt></a>() or by returning <code>false</code> from a handler.</p>
<p>Updates the view if there are changes. Note that when using built-in event hanlders for interaction, animation and load events, this method is invoked for you automatically at the end.</p>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt><tt>Boolean</tt></tt> — <tt>true</tt> if the view was updated, <tt>false</tt> otherwise
<p>Requests an update of the view if there are changes through the browser’s requestAnimationFrame() mechanism for smooth animation. Note that when using built-in event handlers for interaction, animation and load events, updates are automatically invoked for you automatically at the end.</p>
<p>Converts the passed point from project coordinate space to view coordinate space, which is measured in browser pixels in relation to the position of the view element.</p>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>point:</tt>
<ahref="../classes/Point.html"><tt>Point</tt></a>
— the point in project coordinates to be converted
</li>
</ul>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt><ahref="../classes/Point.html"><tt>Point</tt></a></tt> — the point converted into view coordinates
— the function to be called when the event occurs, receiving a <ahref="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> or <ahref="../classes/Event.html"><tt>Event</tt></a> object as its sole argument
</li>
</ul>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt><ahref="../classes/View.html"><tt>View</tt></a></tt> — this view itself, so calls can be chained
</li>
</ul>
<h4>Example:<spanclass="description">Create a rectangle shaped path with its top left point at: {x: 50, y: 25} and a size of {width: 50, height: 50}</span></h4>
<divclass="paperscript split">
<divclass="buttons">
<divclass="button run">Run</div>
</div>
<scripttype="text/paperscript"canvas="canvas-1">
var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
<p>Attach one or more event handlers to the view.</p>
<ulclass="member-list">
<h4>Parameters:</h4>
<li>
<tt>param:</tt>
<tt>Object</tt>
— an object literal containing one or more of the following properties: <tt>frame</tt>, <tt>resize</tt>
</li>
</ul>
<ulclass="member-list">
<h4>Returns:</h4>
<li>
<tt><ahref="../classes/View.html"><tt>View</tt></a></tt> — this view itself, so calls can be chained
</li>
</ul>
<h4>Example:<spanclass="description">Create a rectangle shaped path with its top left point at: {x: 50, y: 25} and a size of {width: 50, height: 50}</span></h4>
<divclass="paperscript split">
<divclass="buttons">
<divclass="button run">Run</div>
</div>
<scripttype="text/paperscript"canvas="canvas-2">
var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
<tt><ahref="../classes/View.html"><tt>View</tt></a></tt> — this view itself, so calls can be chained
</li>
</ul>
<h4>Example:<spanclass="description">Create a rectangle shaped path with its top left point at: {x: 50, y: 25} and a size of {width: 50, height: 50}</span></h4>
<divclass="paperscript split">
<divclass="buttons">
<divclass="button run">Run</div>
</div>
<scripttype="text/paperscript"canvas="canvas-3">
var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
Copyright © 2011—2016 <ahref="http://www.lehni.org"target="_blank">Jürg Lehni</a>&<ahref="http://www.jonathanpuckey.com"target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
