惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

人人都是产品经理
人人都是产品经理
Apple Machine Learning Research
Apple Machine Learning Research
云风的 BLOG
云风的 BLOG
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
量子位
GbyAI
GbyAI
腾讯CDC
T
Tailwind CSS Blog
博客园 - Franky
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
D
Docker
G
Google Developers Blog
aimingoo的专栏
aimingoo的专栏
The GitHub Blog
The GitHub Blog
Microsoft Security Blog
Microsoft Security Blog
Stack Overflow Blog
Stack Overflow Blog
Hugging Face - Blog
Hugging Face - Blog
小众软件
小众软件
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
N
Netflix TechBlog - Medium
Jina AI
Jina AI
IT之家
IT之家
Y
Y Combinator Blog

GeekPlux

一代人的博客,一代人的青春注脚 那些年我打过的日结工 来美国的两年后 2023 一蓑烟雨 在美国拥有一辆 Tesla 的成本 我的 Workspaces 十年进化史 迁移豆瓣读书记录到 goodreads 来美国之后,如何快速安顿下来 疫情三年 与人聊天的美好 我获取信息的方法 2022 版 我是如何学会编程的 2020 恍如隔世 接外包的一些坑和小技巧 论交友 往返香港隔离指南 即将失明,还能继续做程序员吗 小谈我对新技术的态度 远程工作如何提高效率 复式记账、财报、量化与图论 我为什么从阿里巴巴离职 2019 柳暗花明 YouTube 观看历史数据分析 投资被动型指数基金正在造成下一次金融泡沫? 三种主流的网赚套利,躺着赚钱? 色盲的世界 我是如何管理 21 张信用卡的 薅羊毛的最大意义:保持对规则的敏感度 来香港的两个月 数据可视化技术实现的关键点
如何在不规则多边形内均匀撒点的算法
GeekPlux · 2018-03-17 · via GeekPlux

如何在不规则多边形内均匀撒点的算法

原文地址:https://geekplux.com/2018/03/16/how-to-picking-uniform-points-in-irregular-polygon

给定一个不规则的多边形(可能是凹多边形,可能是凸多边形),在其中要显示拓扑网络数据,要求节点不重合、不超出边界。

该问题出现的场景:

  • 在地图上撒点
  • 在未知画布上生成初始的拓扑布局

解决方案:

方法一 随机撒点

取凸多边形的外接矩形,在矩形中随机撒点,如果落在凸多边形外,再次随机撒点,直至落在凸多边形内。 这个方法比较暴力,可以通过计算期望来控制撒点次数,撒点次数应该符合泊松分布。

方法二 把不规则多边形切割成若干三角形

可以看作方法一的改进。切成多个三角形之后,问题转化为了如何在多个三角形内撒点。

参考:https://beta.observablehq.com/@scarysize/finding-random-points-in-a-polygon 切割库:https://github.com/mapbox/earcut

earcut 切割效果

三角形是凸多边形,如何在三角形内均匀撒点可参考:http://mathworld.wolfram.com/TrianglePointPicking.html

算法步骤:

  1. 随机选取任意一三角形
  2. 在三角形内撒点
  3. 重复 12,直到点撒完

这里有个问题*:每个三角形被选取的概率相同,但三角形面积不同。这就可能出现小面积三角形中的点和大面积三角形中的点个数差不多,从而造成总体上看起来点集中在小面积三角形中的情况。 所以要保证三角形被选取的概率跟它的面积成正比

方法三 用力导向迭代

可以看作是 方法二 的改进。给随机撒好的点设置相同的电荷力,使其不停迭代到稳定状态,即形成下图状态,达到尽量“均匀”。

参考:https://bl.ocks.org/mbostock/1b64ec067fcfc51e7471d944f51f1611

力导向迭代效果

方法四 用四叉树生成点

和前三种方法无关。用四叉树将二维空间切割成相等大小的正方形,然后用正方形图心撒点。

参考:https://www.phase2technology.com/blog/using-d3-quadtrees-power-interactive-map-bonnier-corporation

四叉树效果 四叉树效果