Question

我创建了一个hexagon grid map并且需要能够放大。正确放大的轮子事件已正确添加，但是当我放大时，地图的顶部/左侧被覆盖，我可以＆＃39 ; t滚动到最顶部/左侧（可以访问底部/右侧）。

同样，如果我缩小，顶部/左侧有一个巨大的间隙，而底部/右侧是正常的。我不确定为什么会这样，但我无法解决。

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

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

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

FF中的快速测试显示，地图在缩放后确实在按键后左上角显示（显然更改后的代码存在缺陷，并且按键后缩放停止工作）。

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

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

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

放大六角形瓷砖javascript

1 个答案: