如何在Matter.js中使用SVG图像? [英] How to use an SVG image in Matter.js?

问题描述

我正在尝试做的事情:在Font.js中使用雪橇-来使用Font Awesome SVG.

What I'm trying to do: Use a Font Awesome SVG - sleigh - in matter.js.

我已经尝试过了:

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

我在做什么错了?

(P.S:我对马术.js还很陌生，如果这是一个愚蠢的问题，对不起……)

(P. S: I'm pretty new to matter.js, so sorry if this is a silly question…)

推荐答案

使此工作有点麻烦，因为分解一个将2D多边形变成凸块.版本挫败感随之而来.

Getting this working can be a bit of a fuss because, as the docs point out, there are a couple of external scripts necessary to polyfill SVGPathSeg and to decompose a 2D polygon into convex pieces. Version frustrations ensue.

在引用官方示例后对我有用的版本和此过时的Codepen示例显示在以下代码段中

The versions that worked for me after referencing the official example and this outdated Codepen example are shown below in the snippet.

值得一提的是， Matter.Bodies.fromVertices docs 状态:如果顶点是凹形的，则如果 poly-decomp.js 可用.注意，不能保证该过程支持复杂的顶点集(例如，那些具有孔的顶点可能会失败).这可能是您在渲染的正文中看到的多余线条的原因.

Worth noting, the Matter.Bodies.fromVertices docs state: "if the vertices are concave, they will be decomposed if poly-decomp.js is available. Note that this process is not guaranteed to support complex sets of vertices (e.g. those with holes may fail)" which probably accounts for the extra line you see in the rendered body.

此外，MJS的内置渲染器主要用于原型制作，因此，如果要在页面上为原始SVG元素设置动画，那么主体上会有多余的线条这一事实可能就无关紧要了.您也可以尝试使用高级字体-很棒的填充雪橇，但我无权使用它们.

Furthermore, MJS' built-in renderer is mainly for prototyping purposes, so the fact that there's an extra line on the body likely won't matter if you're animating the original SVG element on the page. You may also try the premium font-awesome filled sleighs, but I don't have access to them.

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.Engine.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.14.2/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>

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

To reproduce your error, comment out

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

这篇关于如何在Matter.js中使用SVG图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！