Matter js - 带孔的 svg 路径无法正确显示

Question

我正在尝试使用物理引擎 Matter JS 渲染 svg 路径。该路径使用 Matter JS 进行渲染，但它没有按照应有的方式渲染。我的理解是，我首先需要加载 pathseg (https://github.com/progers/pathseg)，这就是我正在做的事情：

var url = 'https://raw.githubusercontent.com/progers/pathseg/master/pathseg.js';

loadGitHubScript(url).then(function() {

  var path = '<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" 
  style="enable-background:new 0 0 512 512;" viewBox="0 0 73.64 63.03"><path class="cls-1" 
  d="M333.85,415.22l-25.57-16.45V446.7l27,2.85Zm-18,22.24v-18l9.06,1.61,2,17.21Z" 
  transform="translate(-261.61 -386.53)"/></svg>';

  var vertices = Matter.Svg.pathToVertices(path);
  var body = Bodies.fromVertices(200, 200, vertices, options);
  World.add(engine.world, body);

});

结果是左侧的图像，而它实际上应该看起来像右侧的图像。我怎样才能防止这种情况发生？

Answer 1

Matter-js 使用 poly-decomp 函数。有时效果不好。你可以使用替代方案，尝试使用google查找（matter-js decomp function alternation）。 https://github.com/schteppe/poly-decomp.js/tree/master/build

你可以看到，我通过修改poly-decomp.js生成SVG背景 https://mlich.zam.slu.cz/js-matter/js-bridge/bb-game.htm