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

在图形编辑器中,我们有时需要这样的一个图形,

或者这样的一个图形

像这种图形其实是基于相交的圆和矩形进行计算得出来的,这种操作大家一般叫做图形的布尔操作。

本片文章就教大家如何在图形编辑器中,实现 两个元素的差集,并集,合并,或者切割。

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

下面就进入正题啦

在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元素,才能使用。

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

下面看一下

布尔操作演示案例

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

js 复制代码
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种布尔操作,分别是

html 复制代码
 <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>

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

js 复制代码
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 合并 如下图:

第二种 intersect 交集 如下图:

第三种 subtract 差集 如下图:

第四种 exclude 排除 如下图:看起来没有什么变换,官方的解释是

排除指定路径的几何图形与此路径几何图形的交点,并将结果作为新的路径项返回。

第五种,divide 切割 如下图:

另外需要注意的是,如是直线与封闭图形 进行布尔计算的话,只有合集和排除两种有结果,其他计算都没有效果,另外也需要看用谁来调用布尔计算,效果也不一样。使用时要多做实验。

这里演示的案例比较简单,大家可以多试试其他不规则图形的布尔计算,发挥你们的创意,这件事一件非常好玩的事情。

好了今天的文章就到这里啦,过年前 最后一个工作日,祝大家新年快乐🎉。

相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
死也不注释6 小时前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js