HTML and CSS Reference
In-Depth Information
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() {
function drawScreen(){
context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
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,
Search WWH ::

Custom Search