जावास्क्रिप्ट छवि पैन/ज़ूम

Question

कुछ सीएसएस और jQuery यूआई/ड्रैगगेबल के संयोजन से मैंने एक छवि को पैन करने की क्षमता बनाई है और थोड़ा अतिरिक्त जेएस के साथ अब आप छवि ज़ूम कर सकते हैं।

मेरी समस्या यह है कि, यदि आप छवि के शीर्ष बाएं कोने में ज़ूम करते हैं, तो आप तय करेंगे। मैं चाहता हूं कि छवि केंद्रीय (वर्तमान पैन के आधार पर) रहने के लिए है ताकि छवि के बीच कंटेनर के बीच में बड़ा हो जाए।

मैंने इसके लिए कुछ कोड लिखा है लेकिन काम नहीं करता है, मुझे उम्मीद है कि मेरे गणित गलत हैं। क्या कोई मदद कर सकता है?

मैं इसे this करता हूं जैसे काम करना चाहता हूं। जब आप किसी छवि में स्क्रॉल करते हैं तो यह कोने से ज़ूम आउट करने के बजाय वर्तमान पैन के आधार पर केंद्रित छवि को रखता है।

HTML:

<div id="creator_container" style="position: relative; width: 300px; height: 400px; overflow: hidden;"> 
    <img src="/images/test.gif" class="user_image" width="300" style="cursor: move; position: absolute; left: 0; top: 0;"> 
</div> 

जावास्क्रिप्ट:

$("#_popup_creator .user_image").bind('mousewheel', function(event, delta) { 
    zoomPercentage += delta; 
    $(this).css('width',zoomPercentage+'%'); 
    $(this).css('height',zoomPercentage+'%'); 

    var widthOffset = (($(this).width() - $(this).parent().width())/2); 
    $(this).css('left', $(this).position().left - widthOffset); 
}); 

Answer 1

लंबी कहानी संक्षेप में, आप एक छवि के रूप में एक ही राशि के द्वारा पैमाने पर करने के मैट्रिक्स को बदलने और उसके बाद परिणत करने की जरूरत है उस मैट्रिक्स का उपयोग कर छवि की स्थिति। यदि वह स्पष्टीकरण आपके लिए पूर्ण ग्रीक है, तो "छवि परिवर्तन" और "मैट्रिक्स गणित" देखें। http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/geom/Matrix.html

---

वैसे भी, मैं अपने स्वयं के कुछ परियोजनाओं में उन तरीकों को क्रियान्वित किया है:

इस पेज की शुरुआत भले ही यह एक अलग प्रोग्रामिंग भाषा के साथ शुरू करने के लिए एक बहुत अच्छा स्रोत है। यहाँ समारोह में ज़ूम कुछ से मैं ने लिखा है कि कार्यों मनचाहा:

function zoomIn(event) { 
    var prevS = scale; 
    scale += .1; 
    $(map).css({width: (baseSizeHor * scale) + "px", height: (baseSizeVer * scale) + "px"}); 

    //scale from middle of screen 
    var point = new Vector.create([posX - $(viewer).width()/2, posY - $(viewer).height()/2, 1]); 
    var mat = Matrix.I(3); 
    mat = scaleMatrix(mat, scale/prevS, scale/prevS); 
    point = transformPoint(mat, point); 

    //http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript 
    posX = point.e(1) + $(viewer).width()/2; 
    posY = point.e(2) + $(viewer).height()/2; 
    $(map).css({left: posX, top: posY}); 

    return false;//prevent drag image out of browser 
} 

नोट कमांड "नई Vector.create()" और "Matrix.I (3)"। जावास्क्रिप्ट वेक्टर/मैट्रिक्स गणित पुस्तकालय http://sylvester.jcoglan.com/

से आते हैं उन तब नोट "transformPoint()"।

function translateMatrix(mat, dx, dy) { 
    var m = Matrix.create([ 
     [1,0,dx], 
     [0,1,dy], 
     [0,0,1] 
    ]); 
    return m.multiply(mat); 
} 
function rotateMatrix(mat, rad) { 
    var c = Math.cos(rad); 
    var s = Math.sin(rad); 
    var m = Matrix.create([ 
     [c,-s,0], 
     [s,c,0], 
     [0,0,1] 
    ]); 
    return m.multiply(mat); 
} 
function scaleMatrix(mat, sx, sy) { 
    var m = Matrix.create([ 
     [sx,0,0], 
     [0,sy,0], 
     [0,0,1] 
    ]); 
    return m.multiply(mat); 
} 
function transformPoint(mat, vec) { 
    return mat.multiply(vec); 
}