2011-06-12 14:04:25 -04:00
<!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 >
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-06-17 06:41:47 -04:00
< tt > Canvas< / tt >
2011-06-12 14:04:25 -04:00
< / 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 >
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-17 06:41:47 -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-17 06:41:47 -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
< 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 ========================= -->
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 >
