Question

我正在尝试使用hammer.js为移动设备构建可缩放的地图： http://www.informatik.uni-bremen.de/~hhappe/visuHappe/SvgPan.html（在移动设备上试用Opera）。我正在使用SVG文件重新创建以下示例，我目前通过img-Tags嵌入： https://github.com/EightMedia/hammer.js/blob/master/examples/pinchzoom.html

虽然该示例与JPG文件完美配合，但在我的情况下，SVG（MapGartendeck.svg）在移动设备上的第一个触摸手势后部分消失（不幸的是，它到目前为止仅适用于Opera ...不知道为什么）。在平移时SVG边界似乎发生了变化。我已经尝试以不同的方式嵌入SVG（对象标签和svg标签），但没有解决问题;它甚至会使情况变得更糟，触摸根本无法正常工作......

有人知道如何解决这个问题吗？我的代码中的要点： ...

#pinchzoom {
        -webkit-transform: translate3d(0,0,0);
        overflow: hidden;
    }

... 身体：

<div id="pinchzoom" align="center">

        <img id="theSvgElement" src="MapGartendeck.svg" alt="" width="639.86" height="400.12" viewport="-639.86 -400.12 639.855 400.117">
        <!-- /*Try out other ways to embed svg:*/
        <iframe height="450px" width="95%" src="MapGartendeck.svg" scrolling="no">            
        <img id="theSvgElement" src="MapGartendeck.png" alt="MapGartendeck.png" width="689px" height="430.95px" left:"2.5px" />
        </iframe>

        <object id="theSvgElement" data="MapGartendeck.svg" type="image/svg+xml" width="95%" left="2.5px" style="display:block"></object>
        -->

    </div>

...

<script>     
 var hammertime = Hammer(document.getElementById('pinchzoom'), {
    transform_always_block: true,
    transform_min_scale: 1,
    drag_block_horizontal: true,
    drag_block_vertical: true,
    drag_min_distance: 0
});

var svg = document.getElementById('theSvgElement');

var posX=0, posY=0,
    lastPosX=0, lastPosY=0,
    scale=1, last_scale,
    rotation= 1, last_rotation,
    dt=0;

hammertime.on('touch drag transform dragend doubletap', function(ev) {
    switch(ev.type) {
        //rotate should be left out

        case 'touch':
            last_scale = scale;
            //last_rotation = rotation;
            break;

        case 'drag':
            if(scale > 1){
            posX = ev.gesture.deltaX + lastPosX; 
            posY = ev.gesture.deltaY + lastPosY; 
            }
            break;

        case 'transform':
            //rotation = last_rotation + ev.gesture.rotation;
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            break;

        case 'dragend':
            lastPosX = posX;
            lastPosY = posY;
            break;

        case 'doubletap':
            if (dt == 0){
                dt=1;
                scale = 2;
            }else if (dt ==1){
                dt = 0;
                scale = 1;
                posX=0;
                posY=0;
            }last_scale = scale;
            //last_rotation = rotation;
            break;
    }

    // transform!
    var transform =
            "translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) "; 
            //+ "rotate("+rotation+"deg) ";


    theSvgElement.style.transform = transform;
    theSvgElement.style.oTransform = transform;
    theSvgElement.style.msTransform = transform;
    theSvgElement.style.mozTransform = transform;
    theSvgElement.style.webkitTransform = transform;

});

如何在缩放和平移时避免svg消失？

0 个答案: