Notch 在 matter.js 中不以凹形显示。

huangapple go评论65阅读模式
英文:

Notch doesn't get displayed in concave shape in matter.js

问题

I need to make this shape in matter.js:

Notch 在 matter.js 中不以凹形显示。

This is what I tried (I took the points from Figma and inserted them into matter.js):

const logoBottom = Matter.Bodies.fromVertices(
    150,
    150,
    [
        [
            Matter.Vector.create(13.06, 22.53),
            Matter.Vector.create(66.94, 22.53),
            Matter.Vector.create(58.24, 37.54),
            Matter.Vector.create(39.03, 37.54),
            Matter.Vector.create(48.64, 54.10),
            Matter.Vector.create(40, 69),
        ],
    ],
    { isStatic: true }
);

However, the notch on the side doesn't get displayed and I don't know why.

英文:

I need to make this shape in matter.js:

Notch 在 matter.js 中不以凹形显示。

This is what I tried (I took the points from Figma and inserted them into matter.js):

const logoBottom = Matter.Bodies.fromVertices(
    150,
    150,
    [
        [
            Matter.Vector.create(13.06, 22.53),
            Matter.Vector.create(66.94, 22.53),
            Matter.Vector.create(58.24, 37.54),
            Matter.Vector.create(39.03, 37.54),
            Matter.Vector.create(48.64, 54.1),
            Matter.Vector.create(40, 69),
        ],
    ],
    { isStatic: true }
);

However, the notch on the side doesn't get displayed and I don't know why.

答案1

得分: 1

Based on the comments, it sounds like you missed that poly-decomp needs to be added.

With poly-decomp:

<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js"></script>

Without poly-decomp:

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>

I'm not sure what version of MJS you're using, but this gives me the following warning:

matter-js: Bodies.fromVertices: Install the 'poly-decomp' library and use Common.setDecomp or provide 'decomp' as a global to decompose concave vertices.

Related GH issues: #449, #15, #487.

英文:

Based on the comments, it sounds like you missed that poly-decomp needs to be added.

With poly-decomp:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({element: document.body, engine});
const logoBottom = Matter.Bodies.fromVertices(
  150,
  150,
  [
    [
      Matter.Vector.create(13.06, 22.53),
      Matter.Vector.create(66.94, 22.53),
      Matter.Vector.create(58.24, 37.54),
      Matter.Vector.create(39.03, 37.54),
      Matter.Vector.create(48.64, 54.1),
      Matter.Vector.create(40, 69),
    ],
  ],
  {isStatic: true},
);
Matter.Composite.add(engine.world, logoBottom);
Matter.Render.run(render);

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

Without poly-decomp:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const engine = Matter.Engine.create();
const runner = Matter.Runner.create();
const render = Matter.Render.create({element: document.body, engine});
const logoBottom = Matter.Bodies.fromVertices(
  150,
  150,
  [
    [
      Matter.Vector.create(13.06, 22.53),
      Matter.Vector.create(66.94, 22.53),
      Matter.Vector.create(58.24, 37.54),
      Matter.Vector.create(39.03, 37.54),
      Matter.Vector.create(48.64, 54.1),
      Matter.Vector.create(40, 69),
    ],
  ],
  {isStatic: true},
);
Matter.Composite.add(engine.world, logoBottom);
Matter.Render.run(render);

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

I'm not sure what version of MJS you're using, but this gives me the following warning:

> matter-js: Bodies.fromVertices: Install the 'poly-decomp' library and use Common.setDecomp or provide 'decomp' as a global to decompose concave vertices.

Related GH issues: #449, #15, #487.

huangapple
  • 本文由 发表于 2023年5月7日 02:47:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76190570.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定