2

我正在尝试在hammer.js的帮助下为移动设备构建可缩放地图：http: //www.informatik.uni-bremen.de/~hhappe/visuHappe/SvgPan.html（在移动设备上的Opera中试用）。我正在使用我目前通过 img-Tags 嵌入的 SVG 文件重新创建以下示例： 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;

});

4

0 回答 0