时间戳

首页 > 解决方案 > 在 Phaser3 中向 svg 元素添加事件

svg - 在 Phaser3 中向 svg 元素添加事件

问题描述

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

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

标签： svgphaser-framework

解决方案

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

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

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

推荐阅读