文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Matter.js中使用SVG图像？

问如何在Matter.js中使用SVG图像？
EN

Stack Overflow用户

提问于 2020-12-11 22:43:08

回答 1查看 1.2K关注 0票数 1

我想要做的是:在matter.js中使用一个字体强大的SVG - sleigh。

我试过了：

Matter.Bodies.fromVertices(500, 50 , Matter.Svg.pathToVertices("sleigh.svg"))

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M612.7 350.7l-9.3-7.4c-6.9-5.5-17-4.4-22.5 2.5l-10 12.5c-5.5 6.9-4.4 17 2.5 22.5l9.3 7.4c5.9 4.7 9.2 11.7 9.2 19.2 0 13.6-11 24.6-24.6 24.6H48c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h516c39 0 73.7-29.3 75.9-68.3 1.4-23.8-8.7-46.3-27.2-61zM32 224c0 59.6 40.9 109.2 96 123.5V400h64v-48h192v48h64v-48c53 0 96-43 96-96v-96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96v64c0 35.3-28.7 64-64 64h-20.7c-65.8 0-125.9-37.2-155.3-96-29.4-58.8-89.6-96-155.3-96H32C14.3 32 0 46.3 0 64s14.3 32 32 32v128z"/></svg>

但得到的是：

matter.js:4624 matter-js: Svg.pathToVertices: SVGPathSeg not defined, a polyfill is required.

matter.js:7554 Uncaught TypeError: Cannot read property 'numberOfItems' of undefined

我做错了什么？

(附言:我是matter.js的新手，所以如果这是一个愚蠢的问题，我很抱歉，…)

javascript

svg

font-awesome

matter.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-12-15 11:11:47

让它正常工作可能有点麻烦，因为作为the docs point out，对于polyfill SVGPathSeg和decompose a 2D polygon into convex pieces来说，有几个外部脚本是必需的。版本受挫随之而来。

下面的代码片段中显示了在引用the official example和this outdated Codepen example之后适用于我的版本。

值得注意的是，Matter.Bodies.fromVertices docs状态：“如果顶点是凹的，如果poly-decomp.js可用，它们将被分解。请注意，这个过程不能保证支持复杂的顶点集(例如，那些有洞的可能会失败)”，这可能解释了你在渲染体中看到的额外线条。

此外，MJS的内置渲染器主要用于原型设计目的，因此，如果要在页面上动态显示原始SVG元素，则主体上有额外一行的事实可能并不重要。你也可以尝试一下高级的字体很棒的填充雪车，但我没有机会使用它们。

const engine = Matter.Engine.create();
const render = Matter.Render.create({
  element: document.body,
  engine: engine
});
const bodies = [
  Matter.Bodies.rectangle(400, 210, 810, 60, {isStatic: true}),
  ...[...document.querySelectorAll("svg > path")].map(path => {
    const body = Matter.Bodies.fromVertices(
      100, 80, Matter.Svg.pathToVertices(path), {}, true
    );
    Matter.Body.scale(body, 0.2, 0.2);
    return body;
  })
];
Matter.World.add(engine.world, bodies);
Matter.Runner.run(engine);
Matter.Render.run(render);

svg {display: none;}

<script src="https://cdn.jsdelivr.net/npm/pathseg@1.2.0/pathseg.js"></script>
<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.js"></script>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="sleigh" class="svg-inline--fa fa-sleigh fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M612.7 350.7l-9.3-7.4c-6.9-5.5-17-4.4-22.5 2.5l-10 12.5c-5.5 6.9-4.4 17 2.5 22.5l9.3 7.4c5.9 4.7 9.2 11.7 9.2 19.2 0 13.6-11 24.6-24.6 24.6H48c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h516c39 0 73.7-29.3 75.9-68.3 1.4-23.8-8.7-46.3-27.2-61zM32 224c0 59.6 40.9 109.2 96 123.5V400h64v-48h192v48h64v-48c53 0 96-43 96-96v-96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96v64c0 35.3-28.7 64-64 64h-20.7c-65.8 0-125.9-37.2-155.3-96-29.4-58.8-89.6-96-155.3-96H32C14.3 32 0 46.3 0 64s14.3 32 32 32v128z"></path></svg>

要重现您的错误，请注释掉

<script src="https://cdn.jsdelivr.net/npm/pathseg@1.2.0/pathseg.js"></script>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65253422

复制

相似问题

问如何在Matter.js中使用SVG图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Matter.js中使用SVG图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Matter.js中使用SVG图像？
EN