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.



previous: Montana-002        paper.js tutorial index       next: Montana-004



Back to BrettCode Home



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)

paper.js official site = http://www.paperJS.org


© Copyright 2013 Brett Paufler