Javascript 空心圆体

有没有办法在物质中制造空心圆？我什么也没找到

如上图所示，红色圆圈位于黑色圆圈内。这就是我想做的

这是代码，但不是我想要的

// Black circle
Matter.Bodies.circle(120, 120, 180, {
    mass: 50
})

// Red circle
Matter.Bodies.circle(60, 60, 30, {
    mass: 50
})

---

我一直想做点什么。似乎影响空心形状的最佳方法是用一系列矩形近似其表面：

如果希望外圈能够与其他对象碰撞，则需要创建一个

主体

，并使每个矩形成为其“部分”。这里是我用来创建各种容器多边形形状的函数；对于足够大的边数，这是一个相当好的环近似值：

/**
 * Creates a polygon that can contain other objects by putting together
 * rectangles for each edge of the polygon.
 *
 * @param x, y: the center of the polygon
 * @param sides: the number of sides of the polygon
 * @param radius: the radius of the circumscribing circle
 * @param options: a set of properties applied to each edge of the polygon.
 * There are a few special options:
 *  'extraLength': The factor to increase the length of each rectangle by to
 *  avoid inner and outer gaps. Typically around 1.15.
 *  'width': the width of each rectangluar side. If this is too small, the
 *  matter-js engine will require a smaller interval to prevent objects from
 *  being pushed in / out of teh object.
 *  'initialRotation': The initital rotation to be applied to the shape.
 */
function containerPolygon(x: number, y: number, sides: number, radius: number, options): Body {
  const width = options.width || 20; delete options.width;
  const extraLength = options.extraLength || 1.15; delete options.extraLength;
  const initialRotation = options.initialRotation || 0; delete options.initialRotation;

  const theta = 2 * Math.PI / sides;
  const sideLength = 2 * radius * theta/2 * extraLength;

  const parts = [];
  for (let i = 0; i < sides; i++) {
    // We'll build thin sides and then translate + rotate them appropriately.
    const body = Bodies.rectangle(0, 0, sideLength, width);
    Body.rotate(body, i * theta);
    Body.translate(body, {x: radius * Math.sin(i * theta), y: -radius * Math.cos(i * theta)});
    parts.push(body);
  }
  const ret = Body.create(options);
  Body.setParts(ret, parts);
  if (initialRotation) {
    Body.rotate(ret, initialRotation);
  }
  Body.translate(ret, {x: x, y: y});

  return ret;
}

/**
*通过组合创建可以包含其他对象的多边形
*多边形每条边的矩形。
*
*@param x，y：多边形的中心
*@param sides：多边形的边数
*@param radius：外切圆的半径
*@param options：应用于多边形每条边的一组属性。
*有几个特殊选项：
*“extraLength”：将每个矩形的长度增加到的因子
*避免内部和外部间隙。通常在1.15左右。
*“宽度”：每个矩形边的宽度。如果这个太小，则
*matter js引擎将需要较小的间隔来防止对象
*被推入/推出物体。
*“initialRotation”：应用于形状的初始旋转。
*/
函数容器多边形（x:编号，y:编号，边：编号，半径：编号，选项）：主体{
const width=options.width | | 20；删除options.width；
const extraLength=options.extraLength | | 1.15；删除options.extraLength；
const initialRotation=options.initialRotation | | 0；删除options.initialRotation；
常数θ=2*Math.PI/边；
常数边长=2*半径*θ/2*额外长度；
常量部分=[]；
for（设i=0；i

我一直想做点什么。似乎影响空心形状的最佳方法是用一系列矩形近似其表面：

如果希望外圈能够与其他对象碰撞，则需要创建一个

主体

，并使每个矩形成为其“部分”。这里是我用来创建各种容器多边形形状的函数；对于足够大的边数，这是一个相当好的环近似值：

/**
 * Creates a polygon that can contain other objects by putting together
 * rectangles for each edge of the polygon.
 *
 * @param x, y: the center of the polygon
 * @param sides: the number of sides of the polygon
 * @param radius: the radius of the circumscribing circle
 * @param options: a set of properties applied to each edge of the polygon.
 * There are a few special options:
 *  'extraLength': The factor to increase the length of each rectangle by to
 *  avoid inner and outer gaps. Typically around 1.15.
 *  'width': the width of each rectangluar side. If this is too small, the
 *  matter-js engine will require a smaller interval to prevent objects from
 *  being pushed in / out of teh object.
 *  'initialRotation': The initital rotation to be applied to the shape.
 */
function containerPolygon(x: number, y: number, sides: number, radius: number, options): Body {
  const width = options.width || 20; delete options.width;
  const extraLength = options.extraLength || 1.15; delete options.extraLength;
  const initialRotation = options.initialRotation || 0; delete options.initialRotation;

  const theta = 2 * Math.PI / sides;
  const sideLength = 2 * radius * theta/2 * extraLength;

  const parts = [];
  for (let i = 0; i < sides; i++) {
    // We'll build thin sides and then translate + rotate them appropriately.
    const body = Bodies.rectangle(0, 0, sideLength, width);
    Body.rotate(body, i * theta);
    Body.translate(body, {x: radius * Math.sin(i * theta), y: -radius * Math.cos(i * theta)});
    parts.push(body);
  }
  const ret = Body.create(options);
  Body.setParts(ret, parts);
  if (initialRotation) {
    Body.rotate(ret, initialRotation);
  }
  Body.translate(ret, {x: x, y: y});

  return ret;
}

/**
*通过组合创建可以包含其他对象的多边形
*多边形每条边的矩形。
*
*@param x，y：多边形的中心
*@param sides：多边形的边数
*@param radius：外切圆的半径
*@param options：应用于多边形每条边的一组属性。
*有几个特殊选项：
*“extraLength”：将每个矩形的长度增加到的因子
*避免内部和外部间隙。通常在1.15左右。
*“宽度”：每个矩形边的宽度。如果这个太小，则
*matter js引擎将需要较小的间隔来防止对象
*被推入/推出物体。
*“initialRotation”：应用于形状的初始旋转。
*/
函数容器多边形（x:编号，y:编号，边：编号，半径：编号，选项）：主体{
const width=options.width | | 20；删除options.width；
const extraLength=options.extraLength | | 1.15；删除options.extraLength；
const initialRotation=options.initialRotation | | 0；删除options.initialRotation；
常数θ=2*Math.PI/边；
常数边长=2*半径*θ/2*额外长度；
常量部分=[]；
for（设i=0；i