HTML 等轴测视图答案

【问题标题】：HTML isometric viewHTML 等轴测视图
【发布时间】：2015-06-23 00:56:19
【问题描述】：

如果我只使用 HTML（每个网格项都是菱形图像）创建一个等距的瓷砖网格，瓷砖会在角落重叠。因此，单击一个可能会单击与其重叠的图像。

我可以使用 JavaScript 来获取鼠标单击事件的 X/Y 并确定单击了哪个图像。我可以使用 HTML5，并且类似地将点击的 X/Y 转换为图像。

我正在研究使用 SVG 将图像旋转 45 度。然后，它们不会重叠。我可以单击 SVG 对象。到目前为止，这似乎是在 HTML 等轴测视图中处理点击事件的最简单方法。

有没有一种我忽略的在 HTML 中显示非方形对象的方法？

【问题讨论】：

为什么不创建一个span 元素并使用CSS3 对其进行转换？然后你可以使用 JS 捕获它的事件。
我没有固定的想法，但我首先想到的是 CSS3 转换和动画规则的世界。
我会尝试转换。我的经验是，点击仍然适用于矩形，而不是菱形。也许我做错了。

标签： html image isometric

【解决方案1】：

这个问题已经问了很久了，所以很可能你已经找到了你正在寻找的答案，但我想为任何有同样疑问的人澄清一下。

如果将CSS transformations 应用于HTML 元素，则无需进行任何JavaScript 计算即可知道它是否被点击。查看您的评论，您似乎认为鼠标事件在元素边界框而不是元素本身中起作用，但它不是以那种方式起作用的。当单击与元素相关的区域时，将触发鼠标事件，尊重其转换。

看看这个小sn-p。磁贴已经用CSS transformations 进行了转换，点击磁贴，您可以检查是否触发了事件，同时考虑到每个事件的菱形形状。

document.querySelectorAll('.isometric').forEach(tile => {
  tile.addEventListener('click', function () {
      this.dataset.active = 1 - (this.dataset.active || 0);
  });
});

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  left: 50%;
  position: relative;
  top: 50%;
  transform: translateY(-100px);
}

.isometric {
  background-color: #CCC;
  height: 100px;
  outline: 2px solid #FFF;
  position: absolute;
  width: 100px;
}

.isometric[data-active="1"] {
  background-color: #F00;
}

<script src="https://unpkg.com/isometric-css@2.2.3/index.js"></script>
<div class="container">
  <div class="isometric" data-view="top" ></div>
  <div class="isometric" data-view="top" data-right="100"></div>
  <div class="isometric" data-view="top" data-left="100" data-left="100"></div>
  <div class="isometric" data-view="top" data-right="100" data-left="100"></div>
</div>

【讨论】：