2011-06-12 14:04:25 -04:00
<!DOCTYPE html>
< html >
< head >
2011-08-01 07:05:06 -04:00
< meta charset = "UTF-8" >
2011-06-12 14:04:25 -04:00
< 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 >
2011-06-27 09:28:11 -04:00
< p > The View object wraps a canvas element and handles drawing and user
2011-06-30 05:25:39 -04:00
interaction through mouse and keyboard for it. It offer means to scroll the
2011-06-27 09:28:11 -04:00
view, find the currently visible bounds in project coordinates, or the
2011-06-30 05:25:39 -04:00
center, both useful for constructing artwork that should appear centered on
2011-06-27 09:28:11 -04:00
screen.< / p >
2011-06-17 06:41:47 -04:00
2011-06-12 14:04:25 -04:00
< / 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 >
2011-08-02 05:09:40 -04:00
< tt > HTMLCanvasElement< / tt > / < tt > String< / tt >
— The canvas object that this
view should wrap, or the String id that represents it
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
< div class = "reference-members" > < h2 > Properties< / h2 >
2011-06-27 09:28:11 -04:00
< 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 >
2011-06-12 14:04:25 -04:00
< 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" >
2011-06-22 19:02:40 -04:00
< p > The size of the view canvas. Changing the view's size will resize it's
2011-06-27 09:28:11 -04:00
underlying canvas.< / p >
2011-06-12 14:04:25 -04:00
< 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" >
2011-06-27 09:28:11 -04:00
< p > The bounds of the currently visible area in project coordinates.< / p >
2011-06-12 14:04:25 -04:00
< 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" >
2011-06-27 09:28:11 -04:00
< p > The size of the visible area in project coordinates.< / p >
2011-06-12 14:04:25 -04:00
< 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" >
2011-06-27 09:28:11 -04:00
< p > The center of the visible area in project coordinates.< / p >
2011-06-12 14:04:25 -04:00
< 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" >
2011-06-27 09:28:11 -04:00
< p > The zoom factor by which the project coordinates are magnified.< / p >
2011-06-12 14:04:25 -04:00
< ul > < b > Type:< / b >
< li >
2011-06-17 06:41:47 -04:00
< tt > Number< / tt >
2011-06-12 14:04:25 -04:00
< / 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 >
2011-06-30 05:25:39 -04:00
< tt > Function< / tt >
2011-06-12 14:04:25 -04:00
< / li >
< / ul >
< p >
< b > Example< / b > — Creating an animation:
< / p >
< div class = "paperscript split" >
< div class = "button" > Run< / div >
2011-06-17 06:41:47 -04:00
< script type = "text/paperscript" canvas = "canvas-0" >
2011-06-12 14:04:25 -04:00
// 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 >
2011-06-17 06:41:47 -04:00
< div class = "canvas" > < canvas width = "516" height = "100" id = "canvas-0" > < / canvas > < / div >
2011-06-12 14:04:25 -04:00
< / 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 >
2011-06-30 05:25:39 -04:00
< tt > Function< / tt >
2011-06-12 14:04:25 -04:00
< / 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 ================================ -->
2011-06-17 06:41:47 -04:00
< div class = "reference-members" > < h2 > Methods< / h2 >
2011-06-12 14:04:25 -04:00
2011-08-02 05:09:40 -04:00
< 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 >
2011-06-22 19:02:40 -04:00
< 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 >
2011-06-12 14:04:25 -04:00
< 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" >
2011-06-27 09:28:11 -04:00
< p > Scrolls the view by the given vector.< / p >
2011-06-12 14:04:25 -04:00
< ul > < b > Parameters:< / b >
< li >
< tt > point:< / tt >
< a href = "../classes/Point.html" > < tt > Point< / tt > < / a >
< / li >
< / ul >
2011-08-02 05:09:40 -04:00
< / 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 >
2011-06-12 14:04:25 -04:00
< / div >
< / div >
< / div >
< / div >
<!-- =========================== copyright notice ========================= -->
2011-06-17 06:41:47 -04:00
< 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 >
2011-06-12 14:04:25 -04:00
< / body >
