多边形的布尔运算（intersection交集, union并集, difference差异, xor 异或）

最新推荐文章于 2024-04-30 08:38:25 发布
最新推荐文章于 2024-04-30 08:38:25 发布
阅读量8k 收藏 11
点赞数 3
分类专栏： 前端体系 文章标签： json canvas 数据可视化 pixijs 多边形布尔运算
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/105983737
版权

文章目录

前言

这是工作中的一个需求，要求使用PixiJS来进行绘制，所以这里就不使用原生Canvas或是其他绘制工具了。但归根结底，原理都是一样的。

正文

多边形的布尔运算（ boolean operation on polygons）包括: intersection交集, union并集, difference差异, xor 异或。

具体表现如，Photoshop中的选区操作：
Photoshop中的**选区操作**
Sketch中的图形叠加效果：
Sketch中的**图形叠加效果**

实现思路

根据两个多边形的所有顶点的坐标组成GeoJSON，然后通过martinez这个库计算出布尔运算之后的GeoJSON，再解析生成最终效果的多边形定点数组，最后绘制数组生成图像。（下面我使用了PIXI来绘制图形）

API:
.intersection(<Geometry>, <Geometry>) => <Geometry>
.union(<Geometry>, <Geometry>) => <Geometry>
.diff(<Geometry>, <Geometry>) => <Geometry>
.xor(<Geometry>, <Geometry>) => <Geometry>

关于由顶点数组绘制多边形，可参阅博文【绘制】HTML5 Canvas 实现任意圆角多边形

效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

缺点

只能应用于直线边，对于圆角/弧度边无法计算

代码实现

本身我是不打算贴出代码的，因为代码中复用了之前的文章的“圆角多边形”的radius效果，产生了一定的代码冗余，但是考虑到读者可能会在某些地方有所顾虑，还是贴上了，请大家有选择的翻阅。

index.js

import React, {useEffect, useState} from "react";
import * as PIXI from 'pixi.js'
import {intersection, union, xor, diff, drawAll} from './utils.js'

export default function PloygonsBooleanDemo() {
    const [json1, setJson1] = useState([
        // 正方形
        {
            x: 20,
            y: 20,
            radius: 0
        },
        {
            x: 110,
            y: 10,
            radius: 0
        },
        {
            x: 90,
            y: 90,
            radius: 0
        },
        {
            x: 20,
            y: 80,
            radius: 0
        }

    ]);
    const [json2, setJson2] = useState([
        {
            x: 50,
            y: 50,
            radius: 0
        },
        {
            x: 110,
            y: 50,
            radius: 0
        },
        {
            x: 110,
            y: 110,
            radius: 0
        },
        {
            x: 50,
            y: 110,
            radius: 0
        }
    ]);

    const app = new PIXI.Application({
        antialias: true,    // default: false
    });
    let graphics;

    useEffect(() => {
        document.body.appendChild(app.view);
        graphics = new PIXI.Graphics();
        app.stage.addChild(graphics);
    }, []);

    // 初始化图形
    let initGraphics = () => {
        app.stage.removeChild(graphics);
        graphics = new PIXI.Graphics();
        app.stage.addChild(graphics);
    };

    return (<div>
        <button onClick={() => {
            initGraphics();
            drawAll(intersection(json1, json2), graphics);
        }
        }>交集
        </button>
        <button onClick={() => {
            initGraphics();
            drawAll(union(json1, json2), graphics);

        }}>并集
        </button>
        <button onClick={() => {
            initGraphics();
            drawAll(diff(json1, json2), graphics);
        }}>除去一层1
        </button>
        <button onClick={() => {
            initGraphics();
            drawAll(diff(json2, json1), graphics);
        }}>除去一层2
        </button>
        <button onClick={() => {
            initGraphics();
            drawAll(xor(json1, json2), graphics);
        }}>差集
        </button>
    </div>)
}

utils.js

import * as martinez from "martinez-polygon-clipping";

export function geoJSON2RadiusShapeJSON(geoJSON) {
    let radiusShapeJSON = [];

    geoJSON.geometry.coordinates.forEach((element)=>{
        let childRadiusShapeJSON = [];
        element[0].forEach((element, index, array) => {
            if (index !== array.length - 1) {
                childRadiusShapeJSON.push({x: element[0], y: element[1], radius: 0});
            }
        });
        radiusShapeJSON.push(childRadiusShapeJSON)
    })
    return radiusShapeJSON;
}

// 将绘制所用的json转化为GoeJSON
export function radiusShapeJSON2GeoJSON(radiusShapeJSON) {
    let coordinatesArr = [];
    radiusShapeJSON.forEach((element) => {
        coordinatesArr.push([element.x, element.y]);
    });
    coordinatesArr.push([radiusShapeJSON[0].x, radiusShapeJSON[0].y]);


    return {
        "type": "Feature",
        "geometry": {
            "type": "Polygon", "coordinates": [
                coordinatesArr
            ]
        }
    }
}

//交集
export function intersection(radiusShapeJSON1, radiusShapeJSON2) {
    return geoJSON2RadiusShapeJSON(
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon", "coordinates":
                    martinez.intersection(
                        radiusShapeJSON2GeoJSON(radiusShapeJSON1).geometry.coordinates,
                        radiusShapeJSON2GeoJSON(radiusShapeJSON2).geometry.coordinates
                    )

            }
        }

    )
}

//差
export function diff(radiusShapeJSON1, radiusShapeJSON2) {
    return geoJSON2RadiusShapeJSON(
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon", "coordinates":
                    martinez.diff(
                        radiusShapeJSON2GeoJSON(radiusShapeJSON1).geometry.coordinates,
                        radiusShapeJSON2GeoJSON(radiusShapeJSON2).geometry.coordinates
                    )

            }
        }

    )
}

//并集
export function union(radiusShapeJSON1, radiusShapeJSON2) {
    return geoJSON2RadiusShapeJSON(
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon", "coordinates":
                    martinez.union(
                        radiusShapeJSON2GeoJSON(radiusShapeJSON1).geometry.coordinates,
                        radiusShapeJSON2GeoJSON(radiusShapeJSON2).geometry.coordinates
                    )

            }
        }

    )
}

//异或
export function xor(radiusShapeJSON1, radiusShapeJSON2) {
    return geoJSON2RadiusShapeJSON(
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon", "coordinates":
                    martinez.xor(
                        radiusShapeJSON2GeoJSON(radiusShapeJSON1).geometry.coordinates,
                        radiusShapeJSON2GeoJSON(radiusShapeJSON2).geometry.coordinates
                    )

            }
        }

    )
}

/**
 * 已知A、B、C三点坐标，求半径为r的内切圆与AC的切点坐标
 * @param A
 * @param B
 * @param C
 * @param r
 * @returns {{x: *, y: *}}
 */
export function _toOrigin(A, B, C, r) {
    let {pow, acos, tan} = Math;

    //ab的长度
    const ab = pow(pow(A.x - B.x, 2) + pow(A.y - B.y, 2), 0.5);
    //bc的长度
    const bc = pow(pow(C.x - B.x, 2) + pow(C.y - B.y, 2), 0.5);

    //B的角度
    const angleB = acos(((A.x - B.x) * (C.x - B.x) + (A.y - B.y) * (C.y - B.y)) / (ab * bc));

    //BM的长度,即B到切线的长度
    const M = r / tan(angleB / 2);


    const k = (C.y - B.y) / (C.x - B.x);


    if (k === '-Infinity') {
        return {
            x: B.x,
            y: B.y - M
        };
    } else if (k === 'Infinity') {
        return {
            x: B.x,
            y: B.y + M
        };
    } else {
        let i = 1;

        if (1 / k === '-Infinity') {
            i = -1;
        }

        if (k < 0) {
            if ((C.y - B.y) < 0) {
                i = 1;
            } else {
                i = -1;
            }
        }

        if (k > 0) {
            if (C.y - B.y < 0) {
                i = -1;
            }
        }


        return {
            x: B.x + (1 / pow(1 + k * k, 0.5)) * M * i,
            y: B.y + (k / pow(1 + k * k, 0.5)) * M * i
        };
    }


}

/**
 * 将json点集转化为可操作点handlePoints
 */
export function json2HandlePoint(json) {
    //矫正radius
    fixRadius(json);
    //将所有可操作点保存handlePoint变量中
    let handlePoints = [];

    //第一个点
    handlePoints.push({
        start: {x: json[json.length - 1].x, y: json[json.length - 1].y},
        middle: {x: json[0].x, y: json[0].y},
        end: {x: json[1].x, y: json[1].y},
        radius: json[0].radius
    });

    //中间所有点
    for (let i = 1; i < json.length - 1; i++) {
        handlePoints.push({
            start: {x: json[i - 1].x, y: json[i - 1].y},
            middle: {x: json[i].x, y: json[i].y},
            end: {x: json[i + 1].x, y: json[i + 1].y},
            radius: json[i].radius
        });
    }

    //最后一个点
    handlePoints.push({
        start: {x: json[json.length - 2].x, y: json[json.length - 2].y},
        middle: {x: json[json.length - 1].x, y: json[json.length - 1].y},
        end: {x: json[0].x, y: json[0].y},
        radius: json[json.length - 1].radius
    });


    return handlePoints;
}

/**
 * 将异常json的radius按照Sketch模式矫正
 * sketch圆角异常数据处理方法：

 用户可设定radius值，当出现不合法值的时候，原值不变，图像自行优化

 说明：如100*50的矩形，可以在50像素的边对应的角，各设置成radius=25，也可以其中一个设为0，另一个设为50，总之就是radius1+radius2=50。当radius1+radius2>50的时候，在绘制里，radius_min不变，radius_max = 50/2,而在json数据中不改变这些数据，已保存用户的数据记录
 */
export function fixRadius(json) {
    //第一个点
    _fixRadius(json[json.length - 1], json[0], json[1]);

    for (let i = 1; i < json.length - 1; i++) {
        _fixRadius(json[i - 1], json[i], json[i + 1]);
    }

    //最后一个点
    _fixRadius(json[json.length - 2], json[json.length - 1], json[0]);
}

export function _fixRadius(left, curr, right) {
    let {pow, acos, tan} = Math;

    const leftLine = pow(pow(left.x - curr.x, 2) + pow(left.y - curr.y, 2), 0.5);
    const rightLine = pow(pow(right.x - curr.x, 2) + pow(right.y - curr.y, 2), 0.5);

    //两边最短边
    const minLine = leftLine < rightLine ? leftLine : rightLine;
    //中间角度
    const angleCurr = acos(((left.x - curr.x) * (right.x - curr.x) + (left.y - curr.y) * (right.y - curr.y)) / (leftLine * rightLine));
    //理论上能实现的最大弧度半径
    let maxRadius = minLine * tan(angleCurr / 2);


    /*
        当左右都为0且，当前radius超过理论最大弧度半径时
        将radius缩减到最大弧度半径
     */
    if (left.radius === 0 && right.radius === 0) {
        if (curr.radius > maxRadius) {
            curr.radius = maxRadius;
        }
    }

    /*
        当左右任意一边有值，且radius超过理论最大弧度半径的一半时
        将radius缩减到最大弧度半径的一半
     */

    if (left.radius > 0 || right.radius > 0) {
        if (curr.radius > maxRadius / 2) {
            curr.radius = maxRadius / 2;
        }
    }

}

export function drawShape(handlePoints,graphics) {
    //重置路径
    graphics.beginFill(0x66CCFF);
    let currPoint = undefined;

    const origin = _toOrigin(handlePoints[0].start, handlePoints[0].middle, handlePoints[0].end, handlePoints[0].radius);

    graphics.moveTo(origin.x, origin.y);

    for (let i = 1; i < handlePoints.length; i++) {
        currPoint = handlePoints[i];

        //绘制圆弧
        graphics.arcTo(currPoint.middle.x, currPoint.middle.y, currPoint.end.x, currPoint.end.y, currPoint.radius);
    }

    currPoint = handlePoints[0];
    graphics.arcTo(currPoint.middle.x, currPoint.middle.y, currPoint.end.x, currPoint.end.y, currPoint.radius);

    graphics.endFill();
    graphics.closePath();
}

//绘制经布尔运算后的图形
export function drawAll(arr,graphics) {
    arr.forEach(element => {
        drawShape(json2HandlePoint(element),graphics)
    })
};
苏一恒
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python 并集union, 交集intersection, 差集difference, 对称差集symmetric_difference
12-21
python 并集union, 交集intersection, 差集difference, 对称差集symmetric_difference a,b,c = [1,2,3],[2,3,4],[3,4,5] print('------>union') print('a,b取并集：',set(a).union(b)) print('a,b取并集：',set(a)|set(b)) print('a,b,c取并集：',set(a).union(b,c)) print('a,b,c取并集：',set(a)|set(b)|set(c)) print('------>intersection') print
polybooljs:对多边形（联合，交集，差，异或）进行布尔运算
05-10
polybooljs 对多边形（联合，交集，差，异或）进行布尔运算。 特征 裁剪所有布尔运算的多边形 删除不必要的顶点 处理重合的线段（完美重叠，共享顶点，一个在另一个内部等） 使用考虑到浮点不规则性的公式（通过可配置的epsilon） 提供用于构造有效操作序列的API 支持GeoJSON "Polygon"和"MultiPolygon"类型（实验性） 资源 在某种程度上基于F. Martinez（2008）算法： ， 正在安装 npm install polybooljs 或者，对于浏览器，在目录中查找单个文件。 当包含在页面中时，它将公开全局PolyBool 。 例子 var PolyBool = require ( 'polybooljs' ) ; PolyBool . intersect ( { regions : [ [ [ 50 , 50 ]
二维多边形布尔运算，包括多边形绘制，交并差
08-25
代码暂支持多边形的交并差，若要支持圆弧，可将圆弧离散成线段
CGAL的2D Nef多边形布尔操作
weixin_44897632的博客
11-28 234
当处理多边形和多面体集合时，数学模型确定了可以表示的点集类型。Nef多面体是最通用的直线多面体模型。包含在Nef多面体域内的更简单的拓扑模型包括：凸多面体，通常定义为非空有限点集的凸包，凸多面体是紧闭流形集。基本多面体，通常定义为有限个凸多面体的并集。多面体集，通常定义为有限个闭半空间的交集。这样的集合是封闭和凸的，但不一定是紧的。线性多面体，通常定义为简单复形的单纯形的所有点的集合。平面Nef多面体是可以通过使用集合补和交集操作从有限个开半空间的集合中获得的集合。
多边形面 并集 运算思路(想法)
春夜喜雨的专栏
06-20 4692
输入：多边形面1---多变形面N 的所有角点 输入：并集 输出：布尔运算后的多边形面的面 或者 合并后的多段线   (性能：差) 非精确合并思路1：基于三角形 合成 bool二维栅格代表图形 1. 多边形拆分成三角形 2. 三角形的边线的填充(Vertex A B C), 可以使用bres线填充算法     边AB, BC, CA 3. 基于得到的边像素，每一行从AB,BC,CA
flatten-boolean-op:多边形的布尔运算
05-17
多边形的布尔运算 @ flatten-js / boolean-op是一个JavaScript库，可对多边形执行快速可靠的布尔运算。 它提供二进制布尔操作： 多边形实际上是可以由多个面组成的多多边形。 面的方向（顺时针或逆时针）很重要，因为算法的实现方式是永远不会改变边的原始方向。 为了正确执行布尔运算，面必须符合以下规则： 每个面都是一个非退化的简单闭合多边形。 换句话说，面对shouhttps：//badge.fury.io/js/flatten-boolean-op.svgld没有自相交，其方向应该是可定义的。 如果一个面完全在另一面内，则其方向应与外部面的方向相反。 然后我们将外表面称为“岛” ，将内表面称为“Kong” 。 因此，规则是“岛内无岛，洞内无Kong”。 多边形的面不应相互重叠 布尔运算算法不检查多边形是否符合这些规则，这由调用者负责。 布尔运算的结果也是一个
CGAL-多边形的表示-布尔运算-二维正则布尔集合操作
插件开发
08-07 1618
该包包括在二维欧几里德空间中以弱x单调曲线为界的点集上实现布尔集合运算。特别是，它包含正则化布尔集合操作、交集谓词和点包容谓词的实现。上图显示了此类操作的简单示例。普通的布尔集合操作(区分多边形的内部和边界)在这个包中没有实现。第2章Nef多边形的布尔运算支持这些(线性)多边形的运算。在本章的其余部分，除非另有说明，我们将使用传统符号来表示正则化操作;例如，P∩Q表示P与Q的正则化交集。交集计算交集R=P∩Q。并集计算并集R=P∪Q。差集计算差集R=P\Q。对称差分。
关于多边形的布尔运算
Heru
07-17 8482
在计算机图形学中，经常遇到如何计算两个多边形之间交集的情况，这其实就是一种多边形的布尔运算的问题。多边形必定会把平面分区为两个分离的区域：内部区域和外部区域。我们可以这样定义，多边形的每一条线形对象都具有与其相关的法线向量，法线所指向的区域标为“外部”；相反的区域为“内部”。如果线形对象按指定方向前进时，内部区域位于左边，而外部位于右边。这样我们就明确的划分了内部区域和外部区域。对于与多边形相
CGAL多面体布尔运算
hanfeidyx的博客
01-18 5969
环境配置 BOOST下载boost_1_68_0x64 CGAL下载CGAL4.7x64 CMake下载x64 64位 VS2015 x64   1.编译boost （1）打开命令行窗口； （2）输入cmd.exe，回车； （3）将boost根目录下面的booststrap.bat文件直接拖到cmd.exe打开的界面并回车，      运行结束后会产生b2.exe和bjam.e...
[从头学数学] 第286节 [计算几何] 多边形的布尔运算（上）
微笑的彩虹的博客
10-21 1769
剧情提要： 阿伟看到了一本比较有趣的书，是关于《计算几何》的，2008年由北清派出版。很好奇 它里面讲了些什么，就来看看啦。 正剧开始： 星历2016年10月21日 14:37:23, 银河系厄尔斯星球中华帝国江南行省。 [工程师阿伟]正在和[机器小伟]一起研究[计算几何]]。 一、生成随机多边形 # import math fro
Clipper:多边形并集的Weiler–Atherton算法实现
05-25
快船队 Clipper演示了Wyler-Atherton算法，并进行了修改以查找两个多边形的并集。 多边形可以是非凸的，并且可以包含“Kong”（内部的其他多边形）。 您可以在应用程序窗口中绘制两个多边形，也可以对其进行编辑（添加/删除点）。 Clipper找到多边形的并集并将其绘制在工作窗口中。 多边形及其联合可以打印，保存和加载（在本地数据库或磁盘上的文件中，由您选择）。 应用程序设计的简要说明： 多边形类：将多边形表示为几何形状，存储多边形的状态并提供编辑方法； PolygonValidater类：包含用于检查几何形状是否符合问题条件的方法（检查自相交，“Kong”的正确位置等）； 实用程序类：提供了一组用于解决计算子任务的静态方法（确定点是否位于多边形，线段的相交点，图形的面积）; PolygonMerger类：实现Wyler-Atherton算法以合并两条路径； Wh
多边形布尔运算源代码最新版本5.1.6
10-10
布尔运算源于数学中的集合论，将多边形视为集合，通过并（Union）、交（Intersection）、差（Difference）和异或（XOR）等基本运算，可以实现复杂的图形组合效果。在计算机图形处理中，这些运算常用于游戏开发、地图...
面试题: 用C++实现多边形IOU计算
To be a better man
03-28 834
实现多边形 IOU 计算。
多边形布尔运算(1)
最新发布
qq_34343690的博客
04-30 1659
两平面向量交点的几何数的绝对值取1，这两个向量在该交点处各有一个几何数，其正负号由向量的旋向决定——记这两个平面向量分别为P1和P2，若从P2旋转到P1为逆时针，则P1在该交点处的几何数为-1，则P2在该交点处的几何数为+1；其中O(n1×n2)是关键的复杂度，算法的主要开销在计算交点，交点计算的复杂度决定了整个算法的复杂度，算法的优化也取决于交点计算，尽量避免不必要的交点计算操作是很重要的。一般地，当其中一个多边形的环中无几何数不为0的点时，即一个多边形的环中无交点时，便是计算得到了所有的环。
多边形求并的简单算法
sfe1012 Na~喊 -- 心系一处 睥睨群雄 Blog
05-16 1026
【代码】多边形求并的简单算法。
多边形裁剪(Polygon Clipping) 1
richard9006的专栏
07-23 3328
原文地址:https://sean.cm/a/polygon-clipping-pt1 Greiner-Hormann裁剪算法无法处理重合线。所以我研究并写了另一篇适用于所有多边形的文章。 在此处阅读后续内容：多边形裁剪（第 2 部分） 问题 首先, 让我们定义问题, 假设您有两个多边形，每个多边形都以 2D 形式存在 var poly1 = [ // red [ 181, 270 ], [ 85, 418 ], [ 171, 477 ], [ 491, 365 ..
083：vue+leaflet 绘制两个多边形的交集、差集、并集
大剑师兰特的GIS世界
02-20 969
第083个本示例的目的是介绍演示如何在vue+leaflet中如何获取两个多边形的交集、差集、并集。
python多边形并集_找到多个重叠矩形的并集 – OpenCV python
weixin_39959482的博客
12-08 1525
我有几个重叠的边界框,包含一个对象,但它们在某些地方最低限度重叠.作为一个整体,它们包含整个对象,但openCV的groupRectangles函数不会返回包含该对象的框.我有的边框用蓝色显示,我想要返回的边框在这里用红色显示我想得到只有重叠矩形的联合但不确定如何迭代列表而不组合每个矩形.我有下面显示的并集和交叉函数,以及由(x y w h)表示的矩形列表,其中x和y是框左上角的坐标.def un...
Google Earth Engine（gee）中的Geometry
11-24 6168
目录 点：ee.Geometry.Point() 多点：ee.Geometry.MultiPoint() 线：ee.Geometry.LineString() 多线：ee.Geometry.MultiLineString() 单闭合线：ee.Geometry.LinearRing() 多闭合线：ee.Geometry.MultiLineString() ee.Geometry() 面：ee.Geometry.Polygon() 多面：ee.GeometryMultiPolygon() 矩
java求集合的交集、差集和并集
07-12
你可以使用Java中的集合类来找到集合的交集、差集和并集。Java中提供了Set接口和HashSet类，它们可以用于执行这些操作。 假设你有两个集合SetA和SetB，下面是如何获取它们的交集、差集和并集的示例代码： 1. 求交集： ```java Set<Integer> intersection = new HashSet<>(SetA); intersection.retainAll(SetB); ``` 2. 求差集： ```java Set<Integer> difference = new HashSet<>(SetA); difference.removeAll(SetB); ``` 3. 求并集： ```java Set<Integer> union = new HashSet<>(SetA); union.addAll(SetB); ``` 请注意，上述示例假设你的集合中存储的是整数。根据实际情况，你需要调整代码中的数据类型。另外，这些操作也适用于其他类型的集合，只需将代码中的数据类型进行相应的更改即可。 希望这可以帮助到你！如果你有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值