六角形タイルをズームインするjavascript

Question

私はを作成しました。ズームインできるようにする必要がありました。ホイールイベントのズームインが正しく追加されましたが、ズームインすると地図の上部/左側が覆われます右上/左にスクロールします（下側/右側に到達可能）。

同様に、ズームアウトすると、上部/左側に大きな隙間があり、下部/右側は正常です。なぜこのようなことが起こるのか分かりませんが、修正できません。

HTML：

<div id="map"></div> 

CSS：

#map { 
    position: absolute; 
    left: 0; 
    top: 0; 
    padding: 10px 1px; 
    width: 3032px; 
    z-index: 5; 
    overflow: visible; 
    transform-origin: 50% 50%; 
} 
body { 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
} 
#map>div { 
    position: relative; 
    display: inline-block; 
    float: left; 
    width: 60px; 
    height: 34.64px; 
    margin: 8px 0; 
    border-left: solid 1px rgba(35, 35, 35, 0.8); 
    border-right: solid 1px rgba(35, 35, 35, 0.8); 
    opacity: 1; 
    transition: opacity 400ms; 
} 
#map>div:nth-child(97n+50) { 
    margin-left: 30px; 
} 
#map>div:before, 
#map>div:after { 
    content: ""; 
    position: absolute; 
    z-index: 1; 
    width: 42.43px; 
    height: 42.43px; 
    -webkit-transform: scaleY(0.5774) rotate(-45deg); 
    -ms-transform: scaleY(0.5774) rotate(-45deg); 
    transform: scaleY(0.5774) rotate(-45deg); 
    background-color: inherit; 
    left: 7.7868px; 
} 
#map>div:before { 
    top: -21.2132px; 
    border-top: solid 1.4142px rgba(35, 35, 35, 0.8); 
    border-right: solid 1.4142px rgba(35, 35, 35, 0.8); 
} 
#map>div:after { 
    bottom: -21.2132px; 
    border-bottom: solid 1.4142px #333333; 
    border-left: solid 1.4142px #333333; 
} 

はJavaScript：

for (var j = 0; j < 2500; j++) { 
    var tile = document.createElement('div'); 
    tile.setAttribute('id', '#' + j); 
    tile.setAttribute('tabindex', 0); 
    map.appendChild(tile); 
} 
var zoom = 1; 
document.addEventListener('wheel', function(e) { 
    //console.log((map.scrollLeft + e.pageX) + ' ' + (map.scrollTop + e.pageY)); 
    map.style.transformOrigin = (map.scrollLeft + e.pageX) + 'px ' + (map.scrollTop + e.pageY) + 'px'; 
    // This is so that the zoom center is at the cursor. (I feel like this is causing the problem) 
    zoom += e.deltaY/5; 
    if (zoom < 0.5) zoom = 0.5; 
    else if (zoom > 5) zoom = 5; 
    console.log(map.style.transform = "scale(" + zoom + ")"); 
}, false); 

いくつかのブラウザでは、この場合は、矢印キーナビゲーションのためのサポートを提供していないようです。私はFirefoxと矢印キーのナビゲーションを使っています。

誰かがこの問題を解決するのに役立つことができますか？

Answer 1

私は本当にそれを修正することはできませんが、私は示唆を持っています。拡大表示するときは、マップ上の現在の位置に基づいて変換元を設定します。ただし、スクロールして位置を変更する場合は、その変換元を再計算しないでください。左上にスクロールした後、変換元は0ではないと思います。

名前付き関数の中に計算を入れて、スクロールとキー入力のイベントハンドラをアタッチするのはおそらく考えられます。

FFのクイックテストは、ズーム後、キーを押した後に地図が左上に移動することを示しています（明らかに変更されたコードには欠陥があり、キーを押した後にズームが機能しなくなります）。

http://jsfiddle.net/11Lagwye/1/

document.addEventListener('wheel', myfunc, false); 
document.addEventListener('keydown', myfunc, false); 

function myfunc(e) { 
// your zoom.transform code 
}