如何使用paper js实现镂空样式答案

【问题标题】：How to use paper js to realize hollowed-out style如何使用paper js实现镂空样式
【发布时间】：2023-03-15 01:31:01
【问题描述】：

我想实现一些镂空风格。

就这样？？？？

而且我是用canvas来实现这种风格的，但是不知道怎么用paper Js来实现同样的风格。

在画布中，有两种方式来绘制路径，顺时针和逆时针，如果你使用逆时针，它会忽略填充颜色。所以我使用逆时针绘制路径来实现镂空式，

# use canvas
  const canvas = document.querySelector('#myCanvas');
  const ctx = canvas.getContext('2d');

  const pointsOutSide = [{
    x: 100,
    y: 100,
  }, {
    x: 400,
    y: 100,
  },{
    x: 400,
    y: 400,
  },{
    x: 100,
    y: 400,
  }]

  const pointsIntSideRevers = [{
    x: 300,
    y: 200,
  }, {
    x: 200,
    y: 200,
  }, {
    x: 200,
    y: 300,
  }, {
    x: 300,
    y: 300,
  }]

  for(let i = 0; i < pointsOutSide.length; i++) {
    const { x, y } = pointsOutSide[i];

    if(i === 0) {
      ctx.moveTo(x, y);
      continue;
    }

    ctx.lineTo(x, y);
  }
  ctx.closePath();

  for(let i = 0; i < pointsIntSideRevers.length; i++) {
    const { x, y } = pointsIntSideRevers[i];

    if(i === 0) {
      ctx.moveTo(x, y);
      continue;
    }

    ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
  ctx.fill();

但是当我通过paper js使用相同的方式时，它不起作用，并且我检查了paper js的源代码，它使用了本机canvas API。我不知道它们为什么不同。

这是论文Js版????。其实这不是我想要的

【问题讨论】：

标签： javascript canvas paperjs

【解决方案1】：

您还没有展示如何在 paperjs 中设置两个矩形。我假设您使用了"CompoundPath"。创建复合路径时，所有子路径通常具有相同的方向（顺时针）。您可以调用path.reorient() 更改任何嵌套重叠路径的方向。

另一种方法是使用subtract 布尔运算。如果路径的边界不相互“交叉”，它们将产生相同的结果。

Here is a demo of different approaches.

【讨论】：

谢谢！你绝对解决了我的问题！