Question

我目前正在使用HTML和Canvas创建一个底图。

以下是测试网址：http://test.fastcoding.jp/clem/floormap/

每个缩放级别的地图图像被切割成片段（使用PHP），并使用具有不同transform：translate（）位置的HTML div重建地图。

在鼠标滚轮事件中，比例因子应用于每个div，一旦比例变为1，将显示下一个缩放级别。

在鼠标拖动时，翻译值会更新。

现在问题就在于此。

在Chrome，Safari上一切正常，但在IE上，拖动动作确实很滞后（在Firefox中也有点滞后）。

这是我在拖动时调用的地图刷新功能：

app.refresh_map = function() {

    var curr_map = app.maps[app.curr_zoom];
    var maxI = curr_map.tiles.length-1;
    var maxJ = curr_map.tiles[0].length-1;
    var scale = app.zooms[app.curr_zoom][app.curr_scale];

    for(var i=0; i<=maxI; i++) {     
        for(var j=0; j<=maxJ; j++) {

            var curr_tile = curr_map.tiles[i][j];

            var new_tile = {
                x: curr_tile.x*scale, y: curr_tile.y*scale,
                width: curr_tile.width, height: curr_tile.height
            };

            var selector = ".fm-tiles[data-map='"+app.mapID+"'] .fm-tile[data-zoom='"+app.curr_zoom+"'][data-tile='"+i+"-"+j+"']";
            if ( app.in_screen(new_tile) ) {

                if( $(selector).length==0 ) $tiles.append('<div class="fm-tile" data-zoom="'+app.curr_zoom+'" data-tile="'+i+"-"+j+'"></div>');
                var $tile = $(selector);

                var x = app.pos.x + new_tile.x;
                var y = app.pos.y + new_tile.y;
                x = parseFloat(x.toFixed(2));
                y = parseFloat(y.toFixed(2));

                if(!$tile.hasClass("loaded")) {
                    $tile.css("background", "url('api/results/"+mapID+"/"+app.curr_zoom+"/"+curr_tile.src+"') no-repeat left top");
                    $tile.css("background-size", "100% 100%");
                    $tile.addClass("loaded");
                    $tile.css({
                        "width": curr_tile.width+"px",
                        "height": curr_tile.height+"px"
                    });
                }
                if(app.browser=="ie") {
                    $tile.css({
                        "transform-origin": "0% 0%",
                        "-ms-transform": "translate("+x+"px,"+y+"px) scale("+scale+","+scale+")"
                    });
                }
                else {
                    $tile.css({
                        "transform-origin": "0px 0px 0px",
                        "-webkit-transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)",
                        "-moz-transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)",
                        "transform": "translate3d("+x+"px,"+y+"px, 0px) scale("+scale+","+scale+") rotate(0.01deg)"
                    });
                }
                if(!$tile.is(":visible")) {
                    $tile.show().addClass("shown");
                }

            }
            else {
                if($(selector).length!=0){
                    $(selector).hide();
                } 
            }

        }
    }

    $(".fm-tiles[data-map='"+app.mapID+"'] .fm-tile:not([data-zoom='"+app.curr_zoom+"'])").hide();

}

我知道可以使其流畅，因为这张地图可以在任何浏览器上完美运行：http://okayamaeki-sc.jp/floorguide/#/sunste2f

我看了一下代码，但它有点难以理解。我知道它根据浏览器使用不同的transform和transform-origin，并且它使用了一种缓动，但我不知道它是否是它如此平滑的原因。

有没有人有任何线索？

感谢。

变换翻译在IE

0 个答案: