Canvas image zoom

Ante Stipani?ev tarafından Easeljs  kullanılarak hazırlanmış bir  canvas resim büyütme  örneği. Bu zaman kadar  sadece bir  defa rastladığım ve  normal bir jQuery  eklentisi  sandığım Easeljs de  jQuery  gibi  kullanılabilen bir javascript  kütüphanesidir. Eseljs ile  hazırlanan örnekler  gerçektende  çok güzel görünüyorlar. Şimdilik webmaster kategorisine yeni bir kategori  ekleyerek ileriki  zamanlarda  sizler  için Easeljs  hakkında da örnekler paylaşmaya gayret göstericem. Demo örneğinde mouse  ile  resmin bulunduğu çerçeveye  girdiğiniz  an ufak bir pencerede  resmin tamamı  görünüyor  ve canvas çerçevesi içinde  bulunan resim mercek  ile izleniyormuş gibi  bir  efekt  veriyor. Resmin olduğu çerçeveye  tıkladığınızda resim sabitleniyor  ve mouse  ile  resim çerçevesi  içinde  gezdiğinizde dahi resim sabit olarak kalıyor. Tekrar hareket ettirmek için mouse  ile resmin üstüne tıklamanız  gerekiyor. Kullanım

•  Head  etiketleri arasına eklenmesi gereken  bölümler.

Easeljs  dosya adresi : 

<script type="text/javascript" src="https://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>

JavaScript : 

var stage;

function init() { 
	var canvas = document.getElementById("canvas");
 if (!canvas || !canvas.getContext) return;

	stage = new createjs.Stage(canvas); 
 stage.enableMouseOver(5);
 stage.mouseMoveOutside = false; 
 createjs.Touch.enable(stage);

 var W = canvas.width, H = canvas.height, margin = 20, locked = false;
 var minimapWidth, minimapHeight, minimap, minimapFrame, minScale, currentScale, msg, bmpWidth, bmpHeight, bmp_maxx, bmp_maxy, frame_maxx, frame_maxy;

 // bitmap
 var bmp = new createjs.Bitmap(); 
 stage.addChild(bmp); 

 msg = new createjs.Text("Loading...", '10px Arial', '#FFFFFF');
	msg.x = 4;
 msg.y = H - 16; 
	stage.addChild(msg);
 stage.update();

 var img = new Image();  
  img.onload = imgLoaded;  
  img.src = 'https://jsrun.it/assets/b/I/A/K/bIAKE.jpg';

 function imgLoaded(event) {  
  bmp.image = event.target;  
  start();
 }

 function start() { 
  bmpWidth = bmp.image.width;
  bmpHeight = bmp.image.height;  

  bmp_maxx = bmpWidth - W;
  bmp_maxy = bmpHeight - H;

  // minmap
  minimapWidth = 160;
  minimapHeight = minimapWidth * bmpHeight/bmpWidth;

  minimap = new createjs.Container();
  minimap.x = minimap.y = 4;
  minimap.visible = false;
  stage.addChild(minimap);

  // thumb  
  var minimapBmp = bmp.clone();  
  var minimapScale = minimapWidth/bmpWidth;
  minimapBmp.setTransform(0, 0, minimapScale, minimapScale);
  minimap.addChild(minimapBmp);

  // frame
  var minimapFrameGraphics = new createjs.Graphics().setStrokeStyle(1, "round").beginStroke("#ffffff").drawRect(0, 0, minimapWidth, minimapHeight);
  minimap.addChild(new createjs.Shape(minimapFrameGraphics));

  var frame_width = minimapWidth * W / bmpWidth;
  var frame_height = minimapHeight * H / bmpHeight;
  frame_maxx = minimapWidth - frame_width;
  frame_maxy = minimapHeight - frame_height;
  var minimapFrameGraphics2 = new createjs.Graphics().setStrokeStyle(1, "round").beginStroke("#00ff00").drawRect(0, 0, frame_width, frame_height);
  minimapFrame = new createjs.Shape(minimapFrameGraphics2);
  minimap.addChild(minimapFrame); 

  // message
  msg.visible = false;
	 stage.addChild(msg);	
  updateMessage();

  // calculate min image scale
  minScale = Math.max(W / bmpWidth, H / bmpHeight);
  setImageScale(minScale);

  // mouse events
  if(bmpWidth >= W && bmpHeight >= H) {
  canvas.addEventListener("mouseover", mouseOver, false);
  canvas.addEventListener("mouseout", mouseOut, false);
  canvas.addEventListener("mousedown", toggleLock, false);

  stage.onMouseMove = mouseMoved;

  minimap.addEventListener("mouseover", minimapOver); 
  minimap.addEventListener("mouseout", minimapOut); 
  }

  stage.update();
 }

 function setImageScale(perc) { 
  currentScale = perc;
  bmp.scaleX = bmp.scaleY = currentScale;
  bmp.x = (W - bmp.image.width * currentScale) * 0.5;
  bmp.y = (H - bmp.image.height * currentScale) * 0.5;
 }

 function showMinimap(e) { 
  minimap.visible = e;
 }  

 function mouseOver(event) {  
  msg.visible = true;
  showMinimap(true);
  stage.update();  
 } 

 function mouseOut(event) {
  msg.visible = false;  
  resetCanvas();  
 }

 function resetCanvas() {
  if(locked===true) {  
  stage.update(); 
  return;
  }

  showMinimap(false);
  setImageScale(minScale);
  stage.update(); 
 }

 function toggleLock(event) {
  locked = !locked;

  showMinimap(true); // for touch
  updateMessage();
  stage.update();
 }

 function mouseMoved(event) { 
  if(locked===true) return;

  if(minimap.visible === false) showMinimap(true); // for touch
  update((event.stageX-margin)/(W-2*margin), (event.stageY-margin)/(H-2*margin));
  stage.update();
 }

 function minimapOver(event) {
  minimap.alpha = 0.3;
  stage.update();
 }

 function minimapOut(event) {
  minimap.alpha = 1; 
  stage.update();
 } 

 function update(xperc, yperc) {
  if(xperc<0) xperc = 0;
  else if(xperc>1) xperc = 1;
  if(yperc<0) yperc = 0;
  else if(yperc>1) yperc = 1;
  bmp.setTransform(-xperc * bmp_maxx, -yperc * bmp_maxy);
  minimapFrame.setTransform(xperc * frame_maxx, yperc * frame_maxy);
 }

 function updateMessage() {
  if(locked===true) {
  msg.text = 'LOCKED. Click to unlock';
  } else {
  msg.text = 'Click to lock';
  }
 } 
}

// Init
window.addEventListener('load', init, false);

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<canvas id='canvas' width="700" height="600"></canvas>