当前位置：首页 > article >正文

图形编辑器基于Paper.js教程22：在图形矢量编辑器中，实现两个元素的差集，交集，并集，切割

article 2025/1/31 1:30:21

在图形编辑器中，我们有时需要这样的一个图形，
在这里插入图片描述
或者这样的一个图形

像这种图形其实是基于相交的圆和矩形进行计算得出来的，这种操作大家一般叫做图形的布尔操作。
本片文章就教大家如何在图形编辑器中，实现两个元素的差集，并集，合并，或者切割。

学会了这个技能，你就可以基于一些基本元素，组合成千奇百怪的图形。

下面就进入正题啦

在paperjs提供的例子中，有一个关于元素布尔操作的复杂案例，就是下面这个
http://paperjs.org/examples/boolean-operations/
在这里插入图片描述

这个案例将paperjs能够实现的5种布尔操作。
分别是 ['unite', 'intersect', 'subtract', 'exclude', 'divide'] ，其实还有一种reorient没有提到。

下面我们就相信看一下这些api，以及实现的效果
api详细的文档 http://paperjs.org/reference/path/#unite-path
在这里插入图片描述
首先，这些布尔操作都是Path （继承自PathItem）这个类下面的方法，而不是item，这就表明并不是所有的paperjs元素都是能进行布尔操作，而是只有path这个元素才能使用。 path属性基本对应 svg中的 path标签。

另外就是调用这个下方，只能是两个path进行操作，而不是三个，四个。这就要求我们在设计这个功能时，也需要用户选择了两个Path元素，才能使用。

我写了一个案例来演示各种操作。
下面看一下

布尔操作演示案例

首先我们在画布上画一个圆，一个矩形，并让两者相交

square = new paper.Path.Rectangle({
 position: paper.view.center,
  size: 300,
  // fillColor: 'red',
  strokeColor: 'black',
  strokeWidth: 1,
  strokeScaling: false,
});

outer = new paper.Path.Circle({
  center: paper.view.center.add(-60, -60),
  radius: 140,
  // fillColor: 'blue',
  strokeColor: 'red',
  strokeWidth: 1,
  strokeScaling: false,
});

在这里插入图片描述
然后我们添加5个按钮，对应5种布尔操作，分别是

 <button onclick="booleans('unite')">合并</button>
 <button onclick="booleans('intersect')">交集</button>
 <button onclick="booleans('subtract')">差集</button>
 <button onclick="booleans('exclude')">排除</button>
 <button onclick="booleans('divide')">切割</button>

然后我们的布尔操作方法如下：

function booleans(operation) {
  paper.project.clear()
  result = null
  init()
  result = square[operation](outer);
  square.visible = false
  outer.visible = false
  console.log(result)
}

首先我们每次操作前都清空画布，并初始化圆和矩形，为了保证每次布尔计算都相互不影响。

然后使用圆对矩形进行布尔计算。 result = square[operation](outer);
进行布尔计算后，会产生一个新的Path元素，默认会被直接渲染到页面上，你也可以使用参数控制是否渲染。为了不影响观看效果，我们将圆和矩形隐藏起来。
下面一起看一下 5种布尔操作的结果
第一种 unite 合并如下图：
在这里插入图片描述