Question

我正在尝试为网页游戏（HTML，JS等）创建一个交互式网格，其中每个单元格都应该更改它在悬停/点击时的填充。我需要一个正方形网格和一个三角形网格。我希望它是基于矢量的，这样它可以很好地缩放以适应不同的屏幕尺寸。我认为最简单的方法是创建一个图案并将其填充在一个矩形上。这是我到目前为止的代码：

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path id="tile" d="M 0,0 L 0,10 10,10 10,0 Z" fill="none" stroke="gray" stroke-width="1"/>
</pattern>

对于正方形，这对于三角形网格：

<pattern id="baseTile" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 5,0 L 10,2.5 10,7.5 5,10 0,7.5 0,2.5 Z" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 5,0 L 5,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,2.5 L 10,7.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,7.5 L 10,2.5" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 0,0 L 0,2.5 M 0,7.5 L 0,10" fill="none" stroke="gray" stroke-width=".1" />
<path d="M 10,0 L 10,2.5 M 10,7.5 L 10,10" fill="none" stroke="gray" stroke-width=".1" />
</pattern>

他们生产我需要的网格，但我不知道如何单独定位每个单元格。我猜测，因为我没有找到关于此的信息，这是不可能的，除了应该使用的其他解决方案。有什么想法吗？

编辑：我想能够在鼠标点击时循环不同的填充。对于方格，我使用我在这里找到的代码：http://bl.ocks.org/bunkat/2605010但是对于三角形格子，我完全不知道从哪里开始。这就是我想到的原因。

PS：我应该补充一点，我没有编程经验，我试图制作非图形游戏来教自己一些Javascript。

Answer 1

图案纯粹是装饰性的。在图案内瞄准单个图块就像在渐变内瞄准单个图块。最好不要将它们视为不同的“瓷砖”，而应将其视为一张重复的壁纸。

那该怎么办？好吧，你需要为你想要操作的每件作品提供一个独特的元素。但由于它们大致相同，因此您需要使用<use>元素来重复图形。你需要做一些数学计算才能弄清楚如何正确定位三角形，但不比你想要弄清楚那个模式更糟糕。尽管你可以在<defs>部分中对原始元素进行硬编码，但在JS脚本中创建带循环的元素当然是最简单的。

此外，您没有指定要对单个单元格执行的。如果您要改变它们的外观，可能有助于记住您可以在<use>元素上设置样式，这些样式将由重用的图形继承。因此，如果您没有直接设置填充/描边，您可以通过设置<use>样式来更改它们，而不是使用单独的，颜色不同的模板进行交换。

以SVG模式操作单个图块

1 个答案: