12
मेरा लक्ष्य एक प्लगइन बनाना है जो पेज मैप पर पैनिंग ऑपरेशंस ज़ूम करने में सक्षम बनाता है, जैसे कि Google मानचित्र वर्तमान में कैसे काम करता है (अर्थ: माउस के साथ स्क्रॉल करना = क्षेत्र के ज़ूमिंग/आउट करना, क्लिक करें & & & रिलीज = पैनिंग) को पकड़ें।CSS3 कर्सर पर ज़ूमिंग
स्क्रॉल करते समय, मैं माउस कर्सर पर ज़ूम ऑपरेशन केंद्रित करना चाहता हूं।
इसके लिए, मैं ऑन-द-फ्लाई CSS3 मैट्रिक्स ट्रांसफॉर्मेशन का उपयोग करता हूं। एकमात्र, अभी तक अनिवार्य, बाधा यह है कि मैं 0px 0px की एक ट्रांसफॉर्म उत्पत्ति के साथ, CSS3 से & स्केल ट्रांसफॉर्मेशन का अनुवाद करने के अलावा किसी अन्य चीज़ का उपयोग नहीं कर सकता।
पैनिंग मेरे प्रश्न के दायरे से बाहर है, क्योंकि मेरे पास पहले से ही काम कर रहा है। जब ज़ूमिंग की बात आती है, तो मैं यह पता लगाने के लिए संघर्ष कर रहा हूं कि गड़बड़ मेरे जावास्क्रिप्ट कोड में कहां है।
एक्स अक्ष और वाई धुरी पर अनुवाद की गणना में समस्या MouseZoom.prototype.zoom फ़ंक्शन में कहीं कहीं होनी चाहिए।
सबसे पहले, यहाँ मेरी एचटीएमएल कोड है: https://github.com/brandonaaron/jquery-mousewheel/
:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width = device-width, initial-scale = 1.0, user-scalable = no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="StackOverflow.js"></script>
<style type="text/css" media="all">
#drawing {
position: absolute;
top: 0px;
left: 0px;
right:0;
bottom:0;
z-index: 0;
background: url(http://catmacros.files.wordpress.com/2009/09/cats_banzai.jpg) no-repeat;
background-position: 50% 50%;
}
</style>
<title>Test</title>
</head>
<body>
<div id="drawing"></div>
<script>
var renderer = new ZoomPanRenderer("drawing");
</script>
</body>
</html>
आप देख सकते हैं, मैं jQuery और ब्रैंडन हारून से jQuery माउस व्हील प्लगइन, यहां पाया जा सकता है जो उपयोग कर रहा हूँ
/*****************************************************
* Transformations
****************************************************/
function Transformations(translateX, translateY, scale){
this.translateX = translateX;
this.translateY = translateY;
this.scale = scale;
}
/* Getters */
Transformations.prototype.getScale = function(){ return this.scale; }
Transformations.prototype.getTranslateX = function(){ return this.translateX; }
Transformations.prototype.getTranslateY = function(){ return this.translateY; }
/*****************************************************
* Zoom Pan Renderer
****************************************************/
function ZoomPanRenderer(elementId){
this.zooming = undefined;
this.elementId = elementId;
this.current = new Transformations(0, 0, 1);
this.last = new Transformations(0, 0, 1);
new ZoomPanEventHandlers(this);
}
/* setters */
ZoomPanRenderer.prototype.setCurrentTransformations = function(t){ this.current = t; }
ZoomPanRenderer.prototype.setZooming = function(z){ this.zooming = z; }
/* getters */
ZoomPanRenderer.prototype.getCurrentTransformations = function(){ return this.current; }
ZoomPanRenderer.prototype.getZooming = function(){ return this.zooming; }
ZoomPanRenderer.prototype.getLastTransformations = function(){ return this.last; }
ZoomPanRenderer.prototype.getElementId = function(){ return this.elementId; }
/* Rendering */
ZoomPanRenderer.prototype.getTransform3d = function(t){
var transform3d = "matrix3d(";
transform3d+= t.getScale().toFixed(10) + ",0,0,0,";
transform3d+= "0," + t.getScale().toFixed(10) + ",0,0,";
transform3d+= "0,0,1,0,";
transform3d+= t.getTranslateX().toFixed(10) + "," + t.getTranslateY().toFixed(10) + ",0,1)";
return transform3d;
}
ZoomPanRenderer.prototype.getTransform2d = function(t){
var transform3d = "matrix(";
transform3d+= t.getScale().toFixed(10) + ",0,0," + t.getScale().toFixed(10) + "," + t.getTranslateX().toFixed(10) + "," + t.getTranslateY().toFixed(10) + ")";
return transform3d;
}
ZoomPanRenderer.prototype.applyTransformations = function(t){
var elem = $("#" + this.getElementId());
elem.css("transform-origin", "0px 0px");
elem.css("-ms-transform-origin", "0px 0px");
elem.css("-o-transform-origin", "0px 0px");
elem.css("-moz-transform-origin", "0px 0px");
elem.css("-webkit-transform-origin", "0px 0px");
var transform2d = this.getTransform2d(t);
elem.css("transform", transform2d);
elem.css("-ms-transform", transform2d);
elem.css("-o-transform", transform2d);
elem.css("-moz-transform", transform2d);
elem.css("-webkit-transform", this.getTransform3d(t));
}
/*****************************************************
* Event handler
****************************************************/
function ZoomPanEventHandlers(renderer){
this.renderer = renderer;
/* Disable scroll overflow - safari */
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
/* Disable default drag opeartions on the element (FF makes it ready for save)*/
$("#" + renderer.getElementId()).bind('dragstart', function(e) { e.preventDefault(); });
/* Add mouse wheel handler */
$("#" + renderer.getElementId()).bind("mousewheel", function(event, delta) {
if(renderer.getZooming()==undefined){
var offsetLeft = $("#" + renderer.getElementId()).offset().left;
var offsetTop = $("#" + renderer.getElementId()).offset().top;
var zooming = new MouseZoom(renderer.getCurrentTransformations(), event.pageX, event.pageY, offsetLeft, offsetTop, delta);
renderer.setZooming(zooming);
var newTransformation = zooming.zoom();
renderer.applyTransformations(newTransformation);
renderer.setCurrentTransformations(newTransformation);
renderer.setZooming(undefined);
}
return false;
});
}
/*****************************************************
* Mouse zoom
****************************************************/
function MouseZoom(t, mouseX, mouseY, offsetLeft, offsetTop, delta){
this.current = t;
this.offsetLeft = offsetLeft;
this.offsetTop = offsetTop;
this.mouseX = mouseX;
this.mouseY = mouseY;
this.delta = delta;
}
MouseZoom.prototype.zoom = function(){
var previousScale = this.current.getScale();
var newScale = previousScale + this.delta/5;
if(newScale<1){
newScale = 1;
}
var ratio = newScale/previousScale;
var imageX = this.mouseX - this.offsetLeft;
var imageY = this.mouseY - this.offsetTop;
var previousTx = - this.current.getTranslateX() * previousScale;
var previousTy = - this.current.getTranslateY() * previousScale;
var previousDx = imageX * previousScale;
var previousDy = imageY * previousScale;
var newTx = (previousTx * ratio + previousDx * (ratio - 1))/newScale;
var newTy = (previousTy * ratio + previousDy * (ratio - 1))/newScale;
return new Transformations(-newTx, -newTy, newScale);
}
सुझाव: (1) jsfiddle का उपयोग करें, परिणाम देखने में आसान है (2) अधिक जानकारी में "गड़बड़" का वर्णन करें। –
बस एक टिप - क्या आपने ज़ूमूज़.जेएस नामक प्लगइन देखी है, यदि आपके पास जो भी बनाना है, उसके लिए पिनपॉइंटर्स के बहुत सारे नहीं हो सकते हैं - http://janne.aukia.com/zoomooz/ –