javascript 我如何用matter.js从svg部分创建一个svg主体？

2nbm6dog 于 2023-02-07 发布在 Java

关注(0)|答案(1)|浏览(146)

我有两个svg在我的html中，我想把它们分组，所以最后我有一个包含两个svg部分的body。我该怎么做呢？
工作畜栏：https://codepen.io/m42444/pen/eYVEbOq
目前我正在渲染两个svg，就像下面的代码：

const vertexSets = [],

$("#svgOne")
  .find("path")
  .each(function (i, path) {
    var svgOne = Bodies.fromVertices(
      percentX(80),
      percentY(30),
      Matter.Vertices.scale(
        Svg.pathToVertices(path, 10),
        window.innerWidth / 2000,
        window.innerWidth / 2000,
      ),
      {
        render: {
          fillStyle: #F9420B,
          strokeStyle: #F9420B,
          lineWidth: 1,
        },
      },
      true,
    );

    vertexSets.push(svgOne);
  });

$("#svgTwo")
  .find("path")
  .each(function (i, path) {
    var svgTwo = Bodies.fromVertices(
      percentX(80),
      percentY(30),
      Matter.Vertices.scale(
        Svg.pathToVertices(path, 10),
        window.innerWidth / 2000,
        window.innerWidth / 2000,
      ),
      {
        render: {
          fillStyle: #F9420B,
          strokeStyle: #F9420B,
          lineWidth: 1,
        },
      },
      true,
    );

    vertexSets.push(svgTwo);
  });

World.add(engine.world, vertexSets);

<svg id="svgOne" style="position:absolute; width: 0; height: 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
        <g>
          <path class="e" d="M93.87,11.03S-16.33,82.23,2.07,171.13s105.8,179.6,174.3,238c68.5,58.4,109.1,86.2,125.2,179.6s7.3,128.4,53.8,100.2,56.9,2.4,74.5-29.7c17.5-32.2-64.7-117.3-78.4-164.2-13.7-46.8,12-169.1-18.3-328.1C302.87,8.03,164.07-19.67,93.87,11.03Z"/>                  
        </g>
      </svg>

      <svg id="svgTwo" style="position:absolute; width: 0; height: 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
        <g> 
          <path d="M116.37,127.73c9.7-4,18.8-7.8,29.1-12.1-2.9-7.1-5.6-14-8.7-20.8-1.4-3.1-2.2-5.6,1.9-6.9,3.2-1,6.6-3.4,8.8,1.9,7.5,18.5,15.3,37,22.8,55.5,2.1,5.1-2.8,11.6-8.3,11.2-1.3-.1-3.1-2-3.7-3.4-2.5-6.2-4.7-12.5-7.1-18.7-.9-2.5-2-4.9-3.2-7.8-9.3,3.8-18.2,7.6-28.2,11.7,3.1,7.4,6.1,15,9.4,22.6,2.5,5.7-1.1,11.2-7.5,10.7-1.3-.1-3-2-3.6-3.4-7.8-18.6-15.4-37.4-23.2-56-1.5-3.7-1.4-6.5,2.7-8.1,3.9-1.6,7.1-1.7,9.2,2.9,2.9,6.8,6.2,13.5,9.6,20.7Z"/>
        </g> 
      </svg>

JavaScript

来源：https://stackoverflow.com/questions/72316136/how-can-i-create-an-svg-body-out-of-svg-parts-with-matter-js

1条答案

按热度按时间

cqoc49vn1#

你是指这样的东西吗？（如下面的代码）
svg图像看起来与网页上的不一样，但我认为这与Matter.Svg.pathToVertices函数有关，因为documentation声明：* "...请注意，此函数不保证支持复杂路径（例如，带有孔的路径）。..."*

- 基于提供的CodePen，已删除演示代码：**

let Engine = Matter.Engine,
    Render = Matter.Render,
    Body = Matter.Body,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite,
    Svg = Matter.Svg,
    Vertices = Matter.Vertices,
    Runner = Matter.Runner;

let vertexSets = [],
    firstColor = '#F9420B',
    secondColor = '#009245';

let engine = Engine.create();

let render = Render.create({
    element: document.body,
    engine: engine,
    options: {
        wireframes: false,
        showInternalEdges: false,
        width: 400,
        height: 200,
        background: "#fff"
    }
});

let svgPath = document.querySelector('#svgOne path');
let svgVertices = Bodies.fromVertices(200, 75, Vertices.scale(Svg.pathToVertices(svgPath), .2, .2), {
    render: {
        strokeStyle: firstColor,
        lineWidth: 1
    }
}, true);
    
vertexSets.push(svgVertices);

svgPath = document.querySelector('#svgTwo path'); 

svgVertices = Bodies.fromVertices(240, 50, Vertices.scale(Svg.pathToVertices(svgPath,200),1, 1),{
    render: {
        strokeStyle: secondColor,
        lineWidth: 1
    }
}, true);

vertexSets.push(svgVertices);

let body = Composite.create({});
let constraint1 = Matter.Constraint.create({
        pointA: { x: 0, y: -45 },
        bodyA: vertexSets[0],
        bodyB: vertexSets[1],
        pointB: { x: 24, y: 26 }, 
        stiffness:.1,
        render:{strokeStyle: '#ff0000'},
       length:10
    });
    
let constraint2 = Matter.Constraint.create({
        pointA: { x: -45, y: -40 },
        bodyA: vertexSets[0],
        bodyB: vertexSets[1],
        pointB: { x: -11, y: 30}, 
        stiffness:.1,
        render:{strokeStyle: '#0000ff'},
       length:10
    })
    
Composite.add(body, [...vertexSets, constraint1, constraint2] );

Composite.add(engine.world, [
    body,
    Bodies.rectangle(0, 200, 1200, 50.5, { isStatic: true })
]);

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

<script src="//cdn.jsdelivr.net/npm/matter-js@0.18.0/build/matter.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/poly-decomp@0.3.0/build/decomp.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/pathseg@1.2.1/pathseg.min.js"></script>
  <body>
    <div class="container"> 
      <svg id="svgOne" style="position:absolute; width: 0; height: 0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
        <g><path class="e" d="M93.87,11.03S-16.33,82.23,2.07,171.13s105.8,179.6,174.3,238c68.5,58.4,109.1,86.2,125.2,179.6s7.3,128.4,53.8,100.2,56.9,2.4,74.5-29.7c17.5-32.2-64.7-117.3-78.4-164.2-13.7-46.8,12-169.1-18.3-328.1C302.87,8.03,164.07-19.67,93.87,11.03Z"/></g></svg>
      <svg id="svgTwo" style="position:absolute;display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
   <g><path d="M116.37,127.73c9.7-4,18.8-7.8,29.1-12.1-2.9-7.1-5.6-14-8.7-20.8-1.4-3.1-2.2-5.6,1.9-6.9,3.2-1,6.6-3.4,8.8,1.9,7.5,18.5,15.3,37,22.8,55.5,2.1,5.1-2.8,11.6-8.3,11.2-1.3-.1-3.1-2-3.7-3.4-2.5-6.2-4.7-12.5-7.1-18.7-.9-2.5-2-4.9-3.2-7.8-9.3,3.8-18.2,7.6-28.2,11.7,3.1,7.4,6.1,15,9.4,22.6,2.5,5.7-1.1,11.2-7.5,10.7-1.3-.1-3-2-3.6-3.4-7.8-18.6-15.4-37.4-23.2-56-1.5-3.7-1.4-6.5,2.7-8.1,3.9-1.6,7.1-1.7,9.2,2.9,2.9,6.8,6.2,13.5,9.6,20.7Z"/></g></svg>
    </div>
</body>

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 我如何用matter.js从svg部分创建一个svg主体？

1条答案

相关问题

热门标签

最新问答