在 Phaser3 中向 svg 元素添加事件答案

【问题标题】：Adding event to svg elements in Phaser3在 Phaser3 中向 svg 元素添加事件
【发布时间】：2020-09-20 10:29:41
【问题描述】：

我有一个 SVG 图像文件，有一些路径。比如：

<svg>

  <g>

   <path id="land" class="land" d="M108.114,402.043l0.683,1.604l-1.204.(truncated)">

   <path id="ice" class="ice" d="M288.114,402.541l0.683,1.604l-1.204...........">

   <path id="water" class="water" d="M038.114,402.543l0.683,1.604l-1.204........">

  </g>

</svg>

我需要知道点击了哪个路径。当我使用 load.svg() 在 Phaser 中加载 SVG 图像文件时，会为整个图像触发事件，而不仅仅是区域（或路径）。

那么，如何检测点击了哪个路径？任何帮助表示赞赏。

【问题讨论】：

标签： svg phaser-framework

【解决方案1】：

可能使用了错误的术语，但 SVG 加载器将投影的 SVG 绘制为静态位图纹理。这消除了这些路径对象的存在。即使您将这些路径拆分为它们自己的 SVG 并将它们分层，纹理的命中框也将是矩形的，具体取决于纹理的大小。

如果您将这些路径分离到它们自己的 SVG 中，则会存在计算成本更高的 hitbox，并为 hitbox 设置启用像素完美Docs Phaser3 #makePixelPerfect。这将查看投影纹理并在每个 SVG 渲染的像素上应用 hitboxArea。

当输入管理器测试指针事件时，每个 SVG 的更便宜的命中框将实现自定义命中测试函数。 Docs Phaser3 HitAreaCallback。这将变得更加困难，其难度取决于您要寻找的碰撞箱的形状，以及您需要该碰撞箱的准确度。命中测试的基本几何和包含方法可以在 Phaser.Geom 命名空间中找到，如果这些与您的用例不匹配，您需要自己编写/查找函数。

【讨论】：

谢谢，我已经失去了获得任何帮助的希望。将路径拆分为自己的 SVG 听起来不错。我将深入研究 HitAreaCallback。
顺便说一句，您对使用 Phaser 的 graphics.fillPoints() 而不是 SVG 路径有何看法。使用填充点，我可以参考我绘制的每个区域。唯一的大问题是 fillpoints() 期望参数是 Geom.Point 数组，而 SVG 路径属性的格式完全不同 (d="M238.114,402.543l)。
就我个人而言，我会将纹理保留为 SVG。我想这取决于你期望对纹理做什么。如果它们是静态的，那么除了 SVG 之外没有其他任何理由。