JavaScript实现封闭区域布尔运算的示例代码


Posted in Javascript onJune 25, 2018

这篇文章主要介绍多段线实现布尔运算的方法

先上代码

function getOperatedCurves(sourceCurs: Curve[], targetCus: Curve[])
  {
    let source: Polyline | Circle = (sourceCurs[0] instanceof Circle) ? sourceCurs[0] as Circle : new Polyline().Combine(sourceCurs)[0];
    let target: Polyline | Circle = (targetCus[0] instanceof Circle) ? targetCus[0] as Circle : new Polyline().Combine(targetCus)[0];
    try
    {
      if (!source.IsClose || !target.IsClose) throw new Error("不是封闭曲线");
    }
    catch (err)
    {
      console.log(err);
    }

    let interPts = source.IntersectWith(target, IntersectOption.OnBothOperands);
    let sourceContainerTarget = isTargetCurInSourceCur(source, target);
    let targetContainerSource = isTargetCurInSourceCur(target, source);

    let isContainer = sourceContainerTarget || targetContainerSource;
    let intersectionList: Curve[] = []; //交集
    let unionList: Curve[] = []; //并集
    let subList: Curve[] = []; //补集

    /*
    *两封闭区域有交点并且不是包含关系,则通过交点把区域分割
    */
    if (interPts.length && !isContainer)
    {
      let pars1 = interPts.map(p => source.GetParamAtPoint(p)).sort((a, b) => a - b);
      let pars2 = interPts.map(p => target.GetParamAtPoint(p)).sort((a, b) => a - b);

      let cus1: Array<Polyline | Arc> = source.GetSplitCurves(pars1);

      cus1.forEach(pl =>
      {
        if (isTargetCurInSourceCur(target, pl))
        {
          intersectionList.push(pl);
        }
        else
        {
          subList.push(pl);
          unionList.push(pl);
        }
      })

      let cus2: Array<Polyline | Arc> = target.GetSplitCurves(pars2);
      cus2.forEach(pl =>
      {
        if (isTargetCurInSourceCur(source, pl))
        {
          intersectionList.push(pl);
          subList.push(pl);
        }
        else
        {
          unionList.push(pl);
        }
      })

    }
    else
    {
      if (isContainer)
      {
        if (sourceContainerTarget)
        {
          intersectionList.push(target);
          subList.push(source, target);
          unionList.push(source);
        }
        else
        {
          unionList.push(target);
          intersectionList.push(source);
        }
      }
      else
      {
        unionList.push(source, target)
        subList.push(source);
      }

    }
    return {
      intersectionList, unionList, subList
    }
  }

由于一些曲线类实现方法不一,这里主要说一些实现布尔运算的思路

  1. 判断2封闭曲线是否是被包含的关系
  2. 获取2封闭曲线的所有交点,这里交点可能是圆和线,线和线,圆和圆的,求交点的方法网上应该很多,以后有时间也会写写用JavaScript实现方式
  3. 根据所有的交点把2封闭曲线分割为多个部分
  4. 对分割后的线段进行整理,其中相交部分是曲线在对方曲线内部的部分,合并是互不在对方曲线内部的部分,相减类似不想说了,具体看代码,如果是被包含状态则更加就简单了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中cookie的使用详细分析
May 28 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
ES6基础之默认参数值
Feb 21 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 #Javascript
Vue EventBus自定义组件事件传递
Jun 25 #Javascript
一个Vue页面的内存泄露分析详解
Jun 25 #Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 #Javascript
angularjs结合html5实现拖拽功能
Jun 25 #Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 #Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
Vue全局分页组件的实现代码
2018/08/10 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
2014年大学生就业规划书
2014/04/04 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
民事代理词范文
2015/05/25 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js