在 Matter,js 中为凹形 SVG 组合添加边框

问题描述

我希望为通过 matter.js 呈现的凹形添加边框。您可以在此处查看 matter.js 设置的工作示例：

var Engine = Matter.Engine,Render = Matter.Render,Runner = Matter.Runner,Common = Matter.Common,MouseConstraint = Matter.MouseConstraint,Mouse = Matter.Mouse,Composite = Matter.Composite,Vertices = Matter.Vertices,Svg = Matter.Svg,Bodies = Matter.Bodies;

    Common.setDecomp;

// create engine
var engine = Engine.create(),world = engine.world;

   // create renderer
   var render = Render.create({

       canvas: document.querySelector('#myCanvas'),engine: engine,options: {
          background: '#eaeaea',wireframes: false,width: 800,height: 800
       }
   });

   Render.run(render);

   // create runner
   var runner = Runner.create();

   // add mouse control
   var mouse = Mouse.create(render.canvas),mouseConstraint = MouseConstraint.create(engine,{
           mouse: mouse,constraint: {
               stiffness: 0.2,render: {
                   visible: false
               }
           }
       });

    mouseConstraint.mouse.element.removeEventListener("mousewheel",mouseConstraint.mouse.mousewheel);
    mouseConstraint.mouse.element.removeEventListener("DOMMouseScroll",mouseConstraint.mouse.mousewheel);

   Composite.add(world,mouseConstraint);

   // keep the mouse in sync with rendering
   render.mouse = mouse;

   // create runner
   var runner = Runner.create();

   // add bodies
   Composite.add(world,[
       // walls: bottom,right,left
       Bodies.rectangle(400,795,800,10,{isstatic: true,render: {opacity: 1}}),]);

   // add bodies
   if (typeof fetch !== 'undefined') {
       var select = function(root,selector) {
           return Array.prototype.slice.call(root.querySelectorAll(selector));
       };

       var loadSvg = function(url) {
           return fetch(url)
               .then(function(response) { return response.text(); })
               .then(function(raw) { return (new window.DOMParser()).parseFromString(raw,'image/svg+xml'); });
       };



       ([
         'https://assets.codepen.io/6334052/filled-m.svg','https://assets.codepen.io/6334052/border-m.svg','https://assets.codepen.io/6334052/complete-m.svg'
        

       ]).forEach(function(path,i) {
           loadSvg(path).then(function(root) {

               var vertexSets = select(root,'path').map(function(path) { return Vertices.scale(Svg.pathToVertices(path,60),0.5,0.5); });

               Composite.add(world,Bodies.fromVertices((i * 150)+100,50,vertexSets,{
                   render: {
                       fillStyle: '#EE9E8A',strokeStyle: '#EE9E8A',linewidth: 1
                   }
               },true));
           });
       });

   } else {
       Common.warn('Fetch is not available. Could not load SVG.');
   }



Matter.Runner.run(engine)
Render.run(render);

#myCanvas{
  background: #e1e1e1;
  width: 800px;
 height: 800px;
}

  <script src='https://cdn.jsdelivr.net/npm/poly-decomp@0.2.1/build/decomp.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/pathseg@1.2.0/pathseg.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js'></script>

<canvas id="myCanvas"></canvas>
<br>
<img width = "250px" src="https://assets.codepen.io/6334052/Screenshot+2021-06-01+at+11.22.58.png" />

但是我想在字母上添加一个黑色边框，我已经尝试了各种 SVG 文件，但似乎我只能渲染一种颜色，并且根据文档添加边框为复合材料的各个部分添加了边框.

关于如何实现这一目标的任何想法？我可以在合成中添加另一个元素来模仿边框吗？

谢谢！

代码笔：https://codepen.io/spinder/pen/VwpbMjW

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript matter.js