将事件添加到 Phaser3 中的 svg 元素

Question

我有一个 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 图像文件时，整个图像都会触发事件，而不仅仅是区域（或路径）。

那么，如何检测点击了哪条路径？感谢任何帮助。

Answer 1

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

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

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

将事件添加到 Phaser3 中的 svg 元素

Adding event to svg elements in Phaser3

svg

phaser-framework