JavaScript實(shí)現(xiàn)封閉區(qū)域布爾運(yùn)算的示例代碼
這篇文章主要介紹多段線實(shí)現(xiàn)布爾運(yùn)算的方法
先上代碼
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[] = []; //補(bǔ)集 /* *兩封閉區(qū)域有交點(diǎn)并且不是包含關(guān)系,則通過交點(diǎn)把區(qū)域分割 */ 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 } }
由于一些曲線類實(shí)現(xiàn)方法不一,這里主要說一些實(shí)現(xiàn)布爾運(yùn)算的思路
- 判斷2封閉曲線是否是被包含的關(guān)系
- 獲取2封閉曲線的所有交點(diǎn),這里交點(diǎn)可能是圓和線,線和線,圓和圓的,求交點(diǎn)的方法網(wǎng)上應(yīng)該很多,以后有時(shí)間也會(huì)寫寫用JavaScript實(shí)現(xiàn)方式
- 根據(jù)所有的交點(diǎn)把2封閉曲線分割為多個(gè)部分
- 對(duì)分割后的線段進(jìn)行整理,其中相交部分是曲線在對(duì)方曲線內(nèi)部的部分,合并是互不在對(duì)方曲線內(nèi)部的部分,相減類似不想說了,具體看代碼,如果是被包含狀態(tài)則更加就簡(jiǎn)單了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS控制表格實(shí)現(xiàn)一條光線流動(dòng)分割行的方法
這篇文章主要介紹了JS控制表格實(shí)現(xiàn)一條光線流動(dòng)分割行的方法,實(shí)例分析了javascript操作table表格元素的技巧,需要的朋友可以參考下2015-03-03js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)精確到秒的倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)
TypeScript是一種由微軟開發(fā)的開源、跨平臺(tái)的編程語(yǔ)言。這篇文章主要介紹了TypeScript的安裝、使用、自動(dòng)編譯的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-04-04原生JavaScript實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09讓javascript加載速度倍增的方法(解決JS加載速度慢的問題)
這篇文章主要介紹了讓javascript加載速度倍增的方法,通過document.write輸出js解決廣告加載速度慢的問題,需要的朋友可以參考下2014-12-12JavaScript 限制文本框不可輸入英文單雙引號(hào)的方法
這篇文章主要介紹了JavaScript 限制文本框不可輸入英文單雙引號(hào)的方法的相關(guān)資料,需要的朋友可以參考下2016-12-12echarts柱狀堆疊圖實(shí)現(xiàn)示例(圖例和x軸都是動(dòng)態(tài)的)
一些柱形圖在數(shù)據(jù)量比較多的時(shí)候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細(xì),影響整體的效果,下面這篇文章主要給大家介紹了關(guān)于echarts柱狀堆疊圖(圖例和x軸都是動(dòng)態(tài)的)的相關(guān)資料,需要的朋友可以參考下2023-04-04