javascript - 放大六边形瓷砖javascript

Question

我创建了一个 hexagon grid map并且需要能够放大。正确添加了放大的滚轮事件，但是当我放大时， map 的顶部/左侧被覆盖，我无法滚动到最顶部/左侧(底部/右侧边是可达的)。

同样，如果我缩小，顶部/左侧有一个巨大的间隙，而底部/右侧是正常的。我不确定为什么会发生这种情况，但我无法修复它。

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

我真的无法修复它，但我确实有一个建议。缩放时，您可以根据 map 上的当前位置设置变换原点。但是，当通过滚动更改位置时，您不会重新计算该变换原点。滚动回到左上角后，转换原点不是我认为应该的 0 0。

因此，将计算放在命名函数中并为滚动和按键输入附加事件处理程序可能是一个想法。

在 FF 中进行的快速测试显示 map 在缩放后确实会在按键后转到左上角(显然更改后的代码有缺陷，并且在按键后缩放停止工作)。

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

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

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