Question

我的目标是创建一个支持缩放的插件。在页面区域上平移操作，就像谷歌地图目前的工作方式一样（意思是：用鼠标滚动=放大/缩小区域，点击＆amp; hold＆amp; move＆amp; release = panning）。

滚动时，我希望以鼠标光标为中心进行缩放操作。

为此，我使用即时CSS3矩阵转换。唯一但强制性的约束是我不能使用除CSS3之外的任何其他内容。缩放变换，变换原点为0px 0px。

平移不在我的问题范围内，因为我已经开始工作了。当谈到缩放时，我正在努力弄清楚我的javascript代码中的毛刺在哪里。

问题必须在MouseZoom.prototype.zoom函数中的某处，计算x轴和y轴的平移。

首先，这是我的HTML代码：

<!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和Brandon Aaron的jquery鼠标滚轮插件，可以在这里找到： https://github.com/brandonaaron/jquery-mousewheel/

以下是StackOverflow.js文件的内容：

/***************************************************** 
 * 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);
}

Answer 1

使用transform在 div元素上获得谷歌地图缩放行为似乎是一个有趣的想法，所以我付了钱小=）

我会使用transform-origin（及其姐妹属性以获得浏览器兼容性）来调整缩放到您正在缩放的div上的鼠标位置。我认为这可以做你想要的。我举了几个例子来说明：

示例1：zoom in and out on transform-origin
示例2：zoom on transform-origin & shift zooming frame with translation
示例3：example 2 + zoom-out limited to original frame borders
示例4：example 3 + parent frame with hidden overflow

调整transform-origin

因此，在您的applyTransformations函数中，如果我们从transform-origin传递此值，我们可以从imageX和imageY动态调整MouseZoom （鼠标监听器）功能。

    var orig = t.getTranslateX().toFixed() + "px " + t.getTranslateY().toFixed() + "px";
    elem.css("transform-origin", orig);
    elem.css("-ms-transform-origin", orig);
    elem.css("-o-transform-origin", orig);
    elem.css("-moz-transform-origin", orig);
    elem.css("-webkit-transform-origin", orig);

（在此first fiddle example中，我刚刚使用translateX中的translateY和Transformations来传递div元素上鼠标的位置 - 在第二个示例中，我重命名了要originX和originY来区分翻译变量。）

计算转换原点

在MouseZoom我们可以使用imageX/previousScale简单地计算出发地点。

    MouseZoom.prototype.zoom = function(){
        var previousScale = this.current.getScale();
        var newScale = previousScale + this.delta/10;
        if(newScale<1){
            newScale = 1;
        }
        var ratio = newScale / previousScale;

        var imageX = this.mouseX - this.offsetLeft;
        var imageY = this.mouseY - this.offsetTop;

        var newTx = imageX/previousScale;
        var newTy = imageY/previousScale;

        return new Transformations(newTx, newTy, newScale);
    }

因此，如果在放大其他位置之前完全缩小，这将完美地工作。但是为了能够在任何缩放级别更改缩放原点，我们可以将原点和翻译功能结合起来。

移动缩放框（扩展原始答案）

图像上的变换原点仍然以相同的方式计算，但我们使用单独的translateX和translateY来移动缩放框架（这里我介绍了两个新的变量来帮助我们完成这个技巧 - 所以现在我们有{{1} }，originX，originY和translateX）。

translateY

对于此示例，我稍微调整了原始脚本并添加了second fiddle example。

现在我们可以从任何缩放级别放大和缩小鼠标光标。但由于帧移动，我们最终移动原始div（“测量地球”）......如果你使用宽度和高度有限的物体（在一端放大，缩小在另一端，我们像一只尺蛾一样前进。

避免“尺蚯蚓”效应

为了避免这种情况，您可以添加限制，以便左图像边框不能移动到其原始x坐标的右侧，顶部图像边框不能移动到低于其原始y位置，依此类推另一个两个边界。但是，缩放/输出不会完全绑定到光标，而是完全绑定到example 3中图像的边缘（您会注意到图像滑入到位）。

    MouseZoom.prototype.zoom = function(){
        // current scale
        var previousScale = this.current.getScale();
        // new scale
        var newScale = previousScale + this.delta/10;
        // scale limits
        var maxscale = 20;
        if(newScale<1){
            newScale = 1;
        }
        else if(newScale>maxscale){
            newScale = maxscale;
        }
        // current cursor position on image
        var imageX = (this.mouseX - this.offsetLeft).toFixed(2);
        var imageY = (this.mouseY - this.offsetTop).toFixed(2);
        // previous cursor position on image
        var prevOrigX = (this.current.getOriginX()*previousScale).toFixed(2);
        var prevOrigY = (this.current.getOriginY()*previousScale).toFixed(2);
        // previous zooming frame translate
        var translateX = this.current.getTranslateX();
        var translateY = this.current.getTranslateY();
        // set origin to current cursor position
        var newOrigX = imageX/previousScale;
        var newOrigY = imageY/previousScale;
        // move zooming frame to current cursor position
        if ((Math.abs(imageX-prevOrigX)>1 || Math.abs(imageY-prevOrigY)>1) && previousScale < maxscale) {
            translateX = translateX + (imageX-prevOrigX)*(1-1/previousScale);
            translateY = translateY + (imageY-prevOrigY)*(1-1/previousScale);
        }
        // stabilize position by zooming on previous cursor position
        else if(previousScale != 1 || imageX != prevOrigX && imageY != prevOrigY) {
            newOrigX = prevOrigX/previousScale;
            newOrigY = prevOrigY/previousScale;
        }
        return new Transformations(newOrigX, newOrigY, translateX, translateY, newScale);
    }

另一个（有点蹩脚）选项是在完全缩小时简单地重置帧平移（scale == 1）。

但是，如果您要处理连续元素（左边和右边以及顶边和底边绑定在一起）或仅处理非常大的元素，则不会出现此问题。

要通过一个很好的触摸来完成所有事情 - 我们可以在我们的缩放对象周围添加一个隐藏溢出的父框架。因此图像区域不会随着缩放而改变。请参阅jsfiddle example 4。

Answer 2

我们为此制作了一个反应库： https://www.npmjs.com/package/react-map-interaction

它处理缩放和平移，适用于移动设备和桌面设备。

源代码相当简短且可读，但为了更直接地回答您的问题，我们使用此CSS转换：

const transform = `translate(${translation.x}px, ${translation.y}px) scale(${scale})`;
const style = {
    transform: transform,
    transformOrigin: '0 0 '
};

// render the div with that style

主要技巧之一是正确计算触发/鼠标移动发生时初始指针/鼠标按下状态与当前状态之间的差异。当鼠标按下时，捕获坐标。然后在每次鼠标移动时（直到鼠标向上）计算距离中的差异。您需要偏移平移，以确保光标下的初始点是缩放的焦点。

CSS3缩放鼠标光标

2 个答案: