paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 12-5-13
JavaScript Tutorial & paper.js primer
Raster Animation
Picture Slide Show
Montana-003
fitBounds()
This page doesn't load right (all the time) if it's the first
thing one lands on. The images don't have enough
time to load
before the rest of the javascript fires. However, if one
refreshes the page (or comes from the previous Montana tutorial, the
images work fine). This means I need to wraps some of the code in
an onload function (or so I hope that does the trick).
Anyway, that's for the next webpage/tutorial.
What
I wanted to do was fit the images (the rasters) in a certain space (say
the user's full size screen) without distorting the image aspect ratio.
The way to do that is with fitbounds().
Create a Sizing Rectangle
This code creates that big black rectangle that outlines the view area of the canvas.// sSR = screenSizeRectangle var sSR = new Path.Rectangle( new Point(0,0), new Point(view.size.width, view.size.height)); sSR.strokeColor = 'black'; sSR.strokeWidth = 25;
Fit Raster in Question with fitBounds to Sizing Rectangle
And this code sizes the background pictures (rasters) to that rectangle.
backgroundRaster[i].fitBounds(sSR.bounds);
In the final release version, we'll set: screenSizeRectangle.visibile = false;
And here's the same thing for the small center rectangle & picture.
// smallSSR = size of small pictures var smallSSR = new Path.Rectangle( new Point(0,0), new Point(view.size.width/4, view.size.height/4)); smallSSR.strokeColor = 'black'; smallSSR.strokeWidth = 25; smallSSR.position = view.center;
holdingArray[i].fitBounds(smallSSR.bounds);
Next, let's see about passing the code till the pictures load.
Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky
Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone,
Kevin Stillwater, and of course, me, your host, Brett Paufler)