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>