HTML5 canvas magnifying glass (放大鏡) sample code Part2

2013-08-31

988
0
2013-09-11

摘要:HTML5 canvas magnifying glass (放大鏡) sample code Part2

版本1的會有邊界問題，沒辦法放大到邊界的地方，因此對於這個問題再做修正

  function commonMove() {
   magnifyRectangle.x = magnifyingGlassX - magnifyingGlassRadius;
   magnifyRectangle.y = magnifyingGlassY - magnifyingGlassRadius;

   if (magnifyRectangle.x < 0)
   {
    magnifyRectangle.width = 2 * magnifyingGlassRadius + magnifyRectangle.x;
    magnifyRectangle.x = 0;
   }
   else {
    if (magnifyRectangle.x + 2 * magnifyingGlassRadius < theCanvas.width) {
     magnifyRectangle.width = 2 * magnifyingGlassRadius;
    }
    else {
     magnifyRectangle.width = theCanvas.width - magnifyRectangle.x;
    }
   }

   if (magnifyRectangle.y < 0) {
    magnifyRectangle.height = 2 * magnifyingGlassRadius + magnifyRectangle.y;
    magnifyRectangle.y = 0;
   }
   else {
    if (magnifyRectangle.y + 2 * magnifyingGlassRadius < theCanvas.height) {
     magnifyRectangle.height = 2 * magnifyingGlassRadius;
    }
    else {
     magnifyRectangle.height = theCanvas.height - magnifyRectangle.y;
    }
   }

DrawScaleMagnifyRectangle.width = scaledMagnifyRectangle.width * magnifyRectangle.width / (2 * magnifyingGlassRadius);
DrawScaleMagnifyRectangle.height = scaledMagnifyRectangle.height * magnifyRectangle.height / (2 * magnifyingGlassRadius);

dx = magnifyRectangle.x + magnifyRectangle.width / 2 - scaledMagnifyRectangle.width / 2;
dy = magnifyRectangle.y + magnifyRectangle.height / 2 - scaledMagnifyRectangle.height / 2;

   if (dx < 0) {
    dx = 0;
   }

   if (dy < 0) {
    dy = 0;
   }

   drawScreen();
  }

function drawScreen() {

context.save();

context.clearRect(0, 0, theCanvas.width, theCanvas.height);

context.drawImage(oneImage, 0, 0, theCanvas.width, theCanvas.height);

   context.beginPath();
   context.arc(magnifyingGlassX, magnifyingGlassY,
      magnifyingGlassRadius, 0, Math.PI * 2, false);

context.clip();

   context.drawImage(theCanvas,
    magnifyRectangle.x, magnifyRectangle.y,
    magnifyRectangle.width, magnifyRectangle.height,

dx,
dy,

DrawScaleMagnifyRectangle.width,
DrawScaleMagnifyRectangle.height);

context.restore();
}

download complete source code: https://skydrive.live.com/embed?cid=FBEB6373D9321A7F&resid=FBEB6373D9321A7F%2124108&authkey=AEN5NH3NUpMb8LM

回首頁