CSS3

Question

के साथ ज़ूम करने के लिए पिंच करें मैं Google मानचित्र में ठीक तरह से चुटकी-टू-ज़ूम जेस्चर को लागू करने की कोशिश कर रहा हूं। मैंने स्टीफन वुड्स - "Creating Responsive HTML5 Touch Interfaces” द्वारा एक बात देखी - इस मुद्दे के बारे में और तकनीक का उल्लेख किया। विचार लक्ष्य तत्व के परिवर्तन तत्व को (0, 0) और स्केल के बिंदु पर स्केल सेट करना है। फिर छवि को ट्रांसफॉर्म के बिंदु पर केंद्रित रखने के लिए अनुवाद करें।

मेरे टेस्ट कोड स्केलिंग में ठीक काम करता है। छवि बाद के अनुवादों के बीच ठीक से ज़ूम इन और आउट हो जाती है। समस्या यह है कि मैं अनुवाद मानों की सही गणना नहीं कर रहा हूं। मैं स्पर्श घटनाओं के लिए jQuery और Hammer.js का उपयोग कर रहा हूँ। ट्रांसफॉर्म कॉलबैक में मैं अपनी गणना कैसे समायोजित कर सकता हूं ताकि छवि ट्रांसफॉर्म के बिंदु पर केंद्रित हो?

CoffeeScript

image = $('#test-resize') 

hammer = image.hammer -> 
    prevent_default: true 
    scale_treshold: 0 

width = image.width() 
height = image.height() 
toX = 0 
toY = 0 
translateX = 0 
translateY = 0 
prevScale = 1 
scale = 1 

hammer.bind 'transformstart', (event) -> 

    toX = (event.touches[0].x + event.touches[0].x)/2 
    toY = (event.touches[1].y + event.touches[1].y)/2 

hammer.bind 'transform', (event) -> 

    scale = prevScale * event.scale 
    shiftX = toX * ((image.width() * scale) - width)/(image.width() * scale) 
    shiftY = toY * ((image.height() * scale) - height)/(image.height() * scale) 
    width = image.width() * scale 
    height = image.height() * scale 

    translateX -= shiftX 
    translateY -= shiftY 

    css = 'translateX(' + @translateX + 'px) translateY(' + @translateY + 'px) scale(' + scale + ')' 
    image.css '-webkit-transform', css 
    image.css '-webkit-transform-origin', '0 0' 

hammer.bind 'transformend',() -> 
    prevScale = scale 

Answer 1

मैं यह काम कर रहा करने के लिए प्रबंधित (#test-resize एक पृष्ठभूमि छवि के साथ एक div है)।

jsFiddle demo

jsFiddle डेमो में, छवि पर क्लिक पिंच जेस्चर क्लिक बिंदु पर केंद्रित प्रतिनिधित्व करता है। बाद के क्लिक स्थिर राशि से स्केल कारक को बढ़ाते हैं। इसे उपयोगी बनाने के लिए, आप स्केल करना चाहते हैं और एक ट्रांसफॉर्म ईवेंट पर अधिक बार कंप्यूटेशंस का अनुवाद करना चाहते हैं (hammer.js एक प्रदान करता है)।

इसे काम करने की कुंजी छवि के सापेक्ष स्केल निर्देशांक के बिंदु की सही गणना करने के लिए थी। मैंने स्क्रीन निर्देशांक प्राप्त करने के लिए event.clientX/Y का उपयोग किया। निम्नलिखित लाइनों स्क्रीन से कन्वर्ट करने के लिए छवि का समन्वय करता है:

x -= offset.left + newX 
y -= offset.top + newY 

तो हम छवि के लिए एक नया आकार की गणना और से अनुवाद करने के लिए दूरी पाते हैं। अनुवाद समीकरण Stephen Woods' talk से लिया गया है।

newWidth = image.width() * scale 
newHeight = image.height() * scale 

newX += -x * (newWidth - image.width)/newWidth 
newY += -y * (newHeight - image.height)/newHeight 

अंत में, हम पैमाने पर और

image.css '-webkit-transform', "scale3d(#{scale}, #{scale}, 1)"   
wrap.css '-webkit-transform', "translate3d(#{newX}px, #{newY}px, 0)" 

हम यह सुनिश्चित करने के लिए एक आवरण तत्व पर हमारे सभी अनुवाद है कि अनुवाद कर मूल हमारी छवि के ऊपर बाईं ओर रहता अनुवाद करते हैं।

Answer 2

मैंने हथौड़ा और jquery का उपयोग करके फोनगैप पर छवियों का आकार बदलने के लिए सफलतापूर्वक उस स्निपेट का उपयोग किया।

यदि यह किसी के हित में है, तो मैंने इसे जेएस में अनुवादित किया है।

function attachPinch(wrapperID,imgID) 
{ 
    var image = $(imgID); 
    var wrap = $(wrapperID); 

    var width = image.width(); 
    var height = image.height(); 
    var newX = 0; 
    var newY = 0; 
    var offset = wrap.offset(); 

    $(imgID).hammer().on("pinch", function(event) { 
     var photo = $(this); 

     newWidth = photo.width() * event.gesture.scale; 
     newHeight = photo.height() * event.gesture.scale; 

     // Convert from screen to image coordinates 
     var x; 
     var y; 
     x -= offset.left + newX; 
     y -= offset.top + newY; 

     newX += -x * (newWidth - width)/newWidth; 
     newY += -y * (newHeight - height)/newHeight; 

     photo.css('-webkit-transform', "scale3d("+event.gesture.scale+", "+event.gesture.scale+", 1)");  
     wrap.css('-webkit-transform', "translate3d("+newX+"px, "+newY+"px, 0)"); 

     width = newWidth; 
     height = newHeight; 
    }); 

} 

Answer 3

मैं सभी इंटरनेट पर देखा है, और जो कुछ भी outernet, जब तक मैं केवल काम कर प्लगइन/पुस्तकालय में आए - http://cubiq.org/iscroll-4

var myScroll; 
myScroll = new iScroll('wrapper'); 

जहां आवरण आईडी = "आवरण" के रूप में

अपने आईडी है

<div id="wrapper"> 
    <img src="smth.jpg" /> 
</div> 

Answer 4

यह कुछ मैं कुछ साल पहले लिखा था जावा में और हाल ही में जावास्क्रिप्ट

को +०१२३५१६४१०६ परिवर्तित है

function View() 
{ 
this.pos = {x:0,y:0}; 
this.Z = 0; 
this.zoom = 1; 
this.scale = 1.1; 
this.Zoom = function(delta,x,y) 
{ 
    var X = x-this.pos.x; 
    var Y = y-this.pos.y; 
    var scale = this.scale; 
    if(delta>0) this.Z++; 
    else 
    { 
    this.Z--; 
    scale = 1/scale; 
    } 
    this.zoom = Math.pow(this.scale, this.Z); 
    this.pos.x+=X-scale*X; 
    this.pos.y+=Y-scale*Y; 
} 
} 

this.Zoom = function(delta,x,y) लेता है:

• delta = ज़ूम इन या आउट
• x = एक्स मूल ज़ूम की स्थिति
• y = जूम मूल

एक के y स्थिति छोटा उदाहरण:

<script> 
var view = new View(); 
var DivStyle = {x:-123,y:-423,w:300,h:200}; 
function OnMouseWheel(event) 
{ 
event.preventDefault(); 
view.Zoom(event.wheelDelta,event.clientX,event.clientY); 
div.style.left = (DivStyle.x*view.zoom+view.pos.x)+"px"; 
div.style.top = (DivStyle.y*view.zoom+view.pos.y)+"px"; 
div.style.width = (DivStyle.w*view.zoom)+"px"; 
div.style.height = (DivStyle.h*view.zoom)+"px"; 
} 
function OnMouseMove(event) 
{ 
view.pos = {x:event.clientX,y:event.clientY}; 
div.style.left = (DivStyle.x*view.zoom+view.pos.x)+"px"; 
div.style.top = (DivStyle.y*view.zoom+view.pos.y)+"px"; 
div.style.width = (DivStyle.w*view.zoom)+"px"; 
div.style.height = (DivStyle.h*view.zoom)+"px"; 
} 
</script> 
<body onmousewheel="OnMouseWheel(event)" onmousemove="OnMouseMove(event)"> 
<div id="div" style="position:absolute;left:-123px;top:-423px;width:300px;height:200px;border:1px solid;"></div> 
</body> 

यह एक कैनवास और ग्राफिक्स के साथ इस्तेमाल किया जा रहा करने के इरादे से बनाया गया था, लेकिन यह पूरी तरह से सामान्य एचटीएमएल लेआउट

Answer 5

नहीं एक असली जवाब है, लेकिन एक प्लग के लिए एक लिंक के लिए काम करना चाहिए = है कि यह सभी के लिए करता है आप। अच्छा कार्य!

https://github.com/timmywil/jquery.panzoom

(धन्यवाद 'Timmywil', जो कभी आप कर रहे हैं)