• Choose a category
• All
• Classic-Fiction

}

function startUp(){

setInterval(drawScreen, 100 );

}

When we test this example, we will see that when zoomed out, the image on the canvas is 50% of its original size. To zoom in, we simply change the scale factor from .5 to a number greater than 1:

context.drawImage(photo, windowX, windowY, windowWidth,windowHeight,

0,0,windowWidth*2,windowHeight*2);

Example 4-14 changes this single line from Example 4-13 to zoom in rather than zoom out.

Example 4-14. Pan an image with a preset zoom amount

var photo = new Image();

photo.addEventListener('load', eventPhotoLoaded , false);

photo.src = "butterfly.jpg";

var windowWidth = 500;

var windowHeight = 500;

var windowX = 0;

var windowY = 0;

function eventPhotoLoaded() {

startUp();

}

function drawScreen(){

context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,

0,0,windowWidth*2,windowHeight*2);

windowX += 10;

if (windowX>photo.width - windowWidth){

windowX = photo.width - windowWidth;

}

}

function startUp(){

setInterval(drawScreen, 100 );

}

Application: Controlled Pan and Zoom

Our final example for this section will be a simple application allowing the user to zoom and pan a photo.

The zoom scale

We are going to create a set of variables to handle the current zoom scale, the factor by which the zoom scale is increased or decreased, as well as the maximum and minimum zoom values:

var currentScale = .5;

var minScale = .2

var maxScale = 3;

var scaleIncrement = .1;

We will apply these values to the drawImage() function:

context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,

0,0,windowWidth*currentScale,windowHeight*currentScale);

Keyboard input

Now we need to create a keyboard listener function. The following function seems to work best in all browsers tested—it’s certainly not the only keyboard event listener, but it is tried and true throughout this book:

document.onkeydown = function(e){

e = e?e:window.event;

}

NOTE

This function utilizes the ternary operator. If the statement before the ? is true, the statement following the ? is executed. If it is false, the statement after the : is executed. This is a shorthand version of the classic if/else construct.

We will add a switch/case statement, combining all the functions we have put into the previous zoom and pan examples, along with a new set of code for the y direction panning that we have not implemented before. It is very similar to the x direction panning: the left arrow key will pan the image to the left; the right arrow key will pan the image to the right:

case 38:

//up

windowY-=10;

if (windowY<0){

windowY = 0;

}

break;

case 40:

//down

windowY+=10;

if (windowY>photo.height - windowHeight){

windowY = photo.height - windowHeight;

}

break;

case 37:

//left

windowX-=10;

if (windowX<0){

windowX = 0;

}

break;

case 39:

//right

windowX+=10;

if (windowX>photo.width - windowWidth){

windowX = photo.width - windowWidth;

}

break;

We also need to add in two cases for the + and - keys to perform zoom in and zoom out actions:

case 109:

//-

currentScale-=scaleIncrement;

if (currentScalecurrentScale = minScale;

}

break;

case 107:

//+

currentScale+=scaleIncrement;

if (currentScale>maxScale){

currentScale = maxScale;

}

When the user presses the + or - key, the currentScale variable is either incremented or decremented by the scaleIncrement value. If the new value of currentScale is greater than maxScale or lower than minScale, we set it to maxScale or minScale, respectively.

Example 4-15 puts this entire application together. It doesn’t take many lines of code to create the simple interactions.

Example 4-15. Image pan and zoom application

var photo = new Image();

photo.addEventListener('load', eventPhotoLoaded , false);

photo.src = "butterfly.jpg";

var windowWidth = 500;

var windowHeight = 500;

var windowX = 0;

var windowY = 0;

var currentScale = .5;

var minScale = .2

var maxScale = 3;

var scaleIncrement = .1;

function eventPhotoLoaded() {

startUp();

}