2016-04-17 6 views
0

Ich erstellte eine hexagon grid map und musste in der Lage sein zu vergrößern. Die Wheel Event Zoom wurde korrekt hinzugefügt, aber wenn ich heranzoomen, ist die obere/linke Seite der Karte abgedeckt und ich kann Scrolle nicht ganz nach oben/links (die unteren/rechten Seiten sind erreichbar).Zoomen auf Sechseck Kacheln Javascript

Ebenso, wenn ich verkleinern, gibt es eine große Lücke auf der oberen/linken Seite, während die unteren/rechten Seiten normal sind. Ich bin mir nicht sicher, warum das passiert, aber ich kann es nicht beheben.

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); 

Es scheint, dass einige Browser bieten keine Unterstützung für Pfeiltasten Navigation in diesem Fall. Ich benutze Firefox und die Pfeiltasten Navigation funktioniert.

Kann mir jemand helfen, dieses Problem zu beheben?

Antwort

0

Ich kann es nicht wirklich beheben, aber ich habe einen Vorschlag. Beim Zoomen legen Sie einen Transformationsursprung basierend auf der aktuellen Position auf der Karte fest. Wenn Sie die Position jedoch durch Scrollen ändern, berechnen Sie diesen Transformationsursprung nicht neu. Nach dem Zurückscrollen nach oben links ist der Transform-Ursprung nicht 0 0, was ich denke, dass es sein sollte.

Es ist also wahrscheinlich eine Idee, die Berechnungen in eine benannte Funktion einzufügen und Ereignishandler für die Scroll- und Tasteneingabe anzuhängen.

Ein schneller Test in FF zeigt, dass die Karte nach dem Zoomen nach dem Tastendruck nach oben links geht (offensichtlich ist der geänderte Code fehlerhaft und der Zoom funktioniert nach dem Tastendruck nicht mehr).

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

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

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