如何在matter.js中对图像进行四舍五入

Question

当球体掉落时，我想将图像放入其中，但它不适用于 fillStyle 渲染，我只能着色，现在使用精灵我可以，但它们不适合圆形，除非图像是圆形的，我怎么能圆形使用 javascript 和 Matter.js 的图像

代码：

return Matter.Bodies.circle(280, 40, 11, {
    restitution: 0.5,
    render: {
        // fillStyle: '#F00',
        // strokeStyle: 'black',
        // lineWidth: 3,
        sprite: {
            texture: img,
            xScale: 0.3,
            yScale: 0.3,  
        }
    }
    
});

img

从ticktok获取方形图像，我不知道如何将其变成圆形

Answer 1

我不确定100％，这是否是最好的方法（在您的特定用例中），但您可以：

• 创建一个助手

  canvas

  元素：
  

  <canvas id='helper-canvas'></canvas>

  或

  let canvas = document.createElement('canvas');

• 设置画布的宽度/高度（宽度=所需的纹理宽度）

  ...
  canvas.width='100';
  canvas.height='100';
  ...
  

• 将图像绘制到

  canvas

  元素上（使用

  context

  ）。

  ...
  ctx.drawImage(img, 0, 0); // "img" is a HtmlImageElement
  ...
  

• 设置composite-mode并绘制一个具有所需大小的圆圈

  ...
  ctx.globalCompositeOperation='destination-in';
  ctx.beginPath();
  ctx.arc(img.width/2,img.width/2,img.width/2,0,Math.PI*2);
  ctx.closePath();
  ctx.fill();
  ...
  

• 生成新的 “创建图像”的 url

  ...
  let imgUrl = img.toDataURL('image/png'); 
  ...
  

并且比只需创建物质体，并使用该图像：

Matter.Bodies.circle(280, 40, 11, {
    restitution: 0.5,
    render: {
        sprite: {
            texture: imgUrl,
            xScale: 0.3,
            yScale: 0.3,  
        }
    }      
});

Answer 2

您可能会推动内置渲染器超出其简单用例（调试、原型设计）的意图。考虑使用 MJS 无头以及更适合典型游戏或动画渲染复杂性的自定义渲染器。

您可以使用Matter.js 矩形内的文本中描述的类似技术，并使用 HTML 和 CSS 等来制作圆圈：

document.querySelector("img")
  .addEventListener("load", () => {
  const engine = Matter.Engine.create();
  const circle = {
    body: Matter.Bodies.circle(150, 0, 50),
    elem: document.querySelector("#circle"),
    render() {
      const {x, y} = this.body.position;
      this.elem.style.top = `${y - 50}px`;
      this.elem.style.left = `${x - 50}px`;
      this.elem.style.transform = `rotate(${this.body.angle}rad)`;
    },
  };
  const ground = Matter.Bodies.rectangle(
    200, 200, 400, 120, {isStatic: true}
  );
  const mouseConstraint = Matter.MouseConstraint.create(
    engine, {element: document.body}
  );
  Matter.Composite.add(
    engine.world, [circle.body, ground, mouseConstraint]
  );
  (function rerender() {
    circle.render();
    Matter.Engine.update(engine);
    requestAnimationFrame(rerender);
  })();
});

#circle {
  position: absolute;
  background: #111;
  height: 100px;
  width: 100px;
  top: -100px;
  left: -100px;
  cursor: move;
  border-radius: 50%;
}
#circle img {
  border-radius: 50%;
}

#ground {
  position: absolute;
  background: #666;
  top: 140px;
  height: 120px;
  width: 400px;
}

html, body {
  position: relative;
  height: 100%;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.0/matter.min.js"></script>
<div id="circle">
  <img
    draggable="false"
    src="https://4.bp.blogspot.com/-DmPeZ5KQhnM/TvDXvxxb_WI/AAAAAAAAAKI/aRDOjVpBtfM/s1600/poptarticon.gif"
  >
</div>
<div id="ground"></div>

您可以在此处使用 CSS

background

属性而不是

<img>

。