HTML and CSS Reference
In-Depth Information
Panning the Image
To pan the window across the image, we simply need to modify the windowX and
windowY coordinates. In Example 4-12 , we will modify the windowX coordinate inside a
frame tick interval. During each loop iteration, we will increase the value of windowX by
10 . We need to be careful not to go off the far right side of the image, so we will subtract
the windowWidth from the image.width , and use the result as the maximum windowX
windowX+ = 10;
if (windowX>photo.width - windowWidth){
windowX = photo.width - windowWidth;
Example 4-12 contains the changes necessary to perform this panning operation.
Example 4-12. Simple image panning
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 );
When you test Example 4-12 , you will see the window pan across the image and stop
at the rightmost edge. Next, we will start to implement zooming into this simple
Search WWH ::

Custom Search