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

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

先上代码

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. 对分割后的线段进行整理,其中相交部分是曲线在对方曲线内部的部分,合并是互不在对方曲线内部的部分,相减类似不想说了,具体看代码,如果是被包含状态则更加就简单了

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

(0)

相关推荐

  • js中的布尔运算符使用介绍

    在之前我们讨论到布尔运算符 && 和 || 的时候,我说过它们的结果是布尔值.这样说起来有点过于简单化了.如果你用它们来计算布尔数据类型,它们确实会返回布尔值.但是它们也能用于计算其他的类型的数据,这种时候,返回的就将是其中的一个参数了. 或运算符"||" 真正做的事是这样的:它首先检查一下它左边的参数,如果转换成布尔类型的值后为true,那么就返回左边的参数,否则就返回右边的参数. 仔细想想当运算符两边都是布尔类型的值的时候,是不是这样的.为什么它这样运行?这样运行的

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

    这篇文章主要介绍多段线实现布尔运算的方法 先上代码 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

  • 原生JavaScript实现滑动拖动验证的示例代码

    本文介绍了原生JavaScript实现滑动拖动验证的示例代码,分享给大家,具体如下: 通常,我们为了防止用户恶意提交表单,会让用户在提交前完成滑动拖动验证,有时候这也能起到一丝反爬的作用. 实现滑动验证的方式当然不止一种,这里我们直接使用原生 JavaScript 来实现. 现在,你可以在这里 看到完整的源码. 原生实现 原生 JavaScript 的实现,主要是通过监听鼠标事件来对 DOM 进行一系列的操作. 滑块验证的结构主要分为四个部分:轨道.滑块.背景和文案,我们可以使用下面的 HTML

  • JavaScript实现串行请求的示例代码

    使用async和await var fn = async function(promiseArr) { for(let i = 0,len = arr.length; i<len; i++) { currentPromise = (promiseArr[i] instanceOf Promise) ? promiseArr[i] : Promise.resolve(promiseArr[i]); var result = await currentPromise; console.log(res

  • Qt编写地图实现省市区域图的示例代码

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 省市区域图也可以叫省市轮廓图,就是将每个省份.市区的边界区域变成轮廓展示,只是个大概的轮廓,和真是的地图基本一致,毕竟都是一个个点堆起来的,可能会有很小很小的误差,之前做大屏系统中间那个中国地图的时候,客户千方百计交代清楚,千万要注意有九段线,不然在展会上被别人看到如果连九段线都没有的话会被人骂死,可能在部分早期的数据由于不是很完善所以未必有,后期的最新的地图数据都是有的,包括轮廓图数据. echart本身是没有提供

  • 使用JavaScript制作待办事项列表的示例代码

    目录 JavaScript待办事项列表 如何制作JavaScript待办事项列表 第 1 步: 项目的基本结构 第 2 步: 使用 HTML 创建一个输入位置 第 3 步: 制作查看 Todo 文本的列表 第 4 步: 使用 JavaScript 激活待办事项列表 JavaScript 解释 JavaScript待办事项列表 我在此处展示了有关如何使用 JavaScript创建待办事项列表 HTML 的完整信息和教程.我借助HTML 和 CSS来设计它.在 JavaScript 的帮助下实现.

  • JavaScript实现网页视频添加水印的示例代码

    目录 示例图 原理 代码示例 示例图 原理 通过html的页面布局,在video播放器层面,通过js控制dom,插入文本水印代码. 代码示例 index.html <!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit" /> <meta http-equiv="Content-Type" content=&quo

  • JavaScript实现九宫格抽奖功能的示例代码

    目录 效果图 实现流程 主要代码 效果图 话不多说,直接上效果: 实现流程 主要流程为: 1. 根据效果图,构建静态页面 2. 获取元素(自带的属性) 3. 绑定事件 4. 事件触发之后 4.1 所有的li元素 在指定的时间间隔下 颜色随机变化 4.2 延时器 2秒后 清除定时器 4.3 在清除定时器之后,所有的li背景色复位,随机选一个 主要代码 <!DOCTYPE html> <html lang="en"> <head> <meta ch

  • JavaScript实现导入导出excel的示例代码

    目录 Excel导入 html代码 js代码 Excel导出 html代码 js代码 Excel导入 html代码 <button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} > 导入 </button> <input id="upFile" type="file" style={{

  • 利用JavaScript实现创建虚拟键盘的示例代码

    目录 前言 项目基本结构 JavaScript 虚拟键盘的显示 虚拟键盘的按钮 CSS的键盘按钮设计 使用 JavaScript 激活虚拟键盘 前言 在线演示地址 项目基本结构 目录结构如下: 这是一个简单的 JavaScript 教程,教你如何创建JavaScript 虚拟键盘.虚拟键盘是一种屏幕输入法,如果你使用的是 Windows 操作系统,我相信你应该也使用过 Windows 中的默认虚拟键盘. 首先,我创建了一个可以看到输入字符的结果框,也就是我们可以在其中看到所有信息的显示器.此虚拟

  • 快速实现JS图片懒加载(可视区域加载)示例代码

    js懒加载图片 如何提高网页加载速度?在网页中有许多img标签,这些标签就是图片,其属性src则是指向服务器地址,当浏览器从上往下读取到src标签中的地址时,浏览器就会开启线程,加载这张图片.而并不是等到整张页面都解析完成才加载图片.我们要做的就是加载用户可视范围内的图片. js懒加载图片的目的 1.网页优化,提高网页加载速度 2.页面优化友好,提高SEO收录与排名 3.提高用户体验,减少服务器压力 实例代码如下: <!DOCTYPE html> <html lang="en&

随机推荐