我有兴趣计算
the “optical alignment” of an icon.例如：

如果您熟悉UI设计,您就会知道某些图标,例如上面演示的“播放”按钮三角形,通常会感觉不合适.即使图标的矩形边界在技术上居中,图标仍然感觉不到居中.这是因为图标表面区域的分布不均匀.

我尝试过的：

有趣的是,当我在询问之前进行研究时,在Googling “volumetric center icon”之后,第一个出现的Google结果是a question I asked at Mathematics Stack Exchange on this very same topic 2 years ago,没有回答.

On Math SE there is a similar question,但是因为它使用JPEG图像作为示例,所以答案的解决方案是使用像素网格来计算解决方案.我当然可以在HTML5画布上渲染矢量图标(我是一个Web开发人员,并且最终会喜欢在JavaScript中执行此操作,即使我只是将其标记为“算法”)并计算像素,但这将是一个丑陋的至少可以说的方法.

我想知道是否有任何算法我可以用来计算矢量图标的体积中心甚至只是光学对齐(可以通过在图标周围绘制最小圆圈来手动完成,如上所示,但我很感兴趣在自动方法).我意识到这可能是一个具有挑战性的问题,因为矢量图标可以组合任意数量的形状,矢量形状可以在其中有孔等.

题：

有谁知道怎么写这样的算法？当涉及到诸如此类的复杂数学算法时,我不知道从哪里开始.

注意：有this question但它似乎只询问多边形,而答案不解决奇数曲线.

最佳答案 那篇文章所称的“真实中心”在技术上被称为对象的质心.对于像三角形这样的简单形状,甚至对于任意多边形,有一个公式,您可以将边界点插入以获得质心.例如,关于质心的维基百科文章显示了如何确定三角形的质心,这与您链接的文章中显示的结果一致.

不幸的是,使用矢量图形你会遇到一个稍微困难的问题,因为边界曲线就是这样;任意曲线.在这种情况下,最简单的方法是使用数值积分来确定质心.以下是算法的概要(如果您熟悉MATLAB,可以查看here的实现)：

>确定形状的边界框
>对于x和y维度中的每一个：

>将边界框拆分为均匀间隔的样本点的合适分辨率
>在每一点：

>在与您正在迭代的方向正交的方向上确定“占用长度”.

>对于凸形,占用长度只是两个边界点之间的差异
>对于凹形,您可能会有多个边界点,需要确定哪些跳跃被占用(从我的头顶开始,每对交替的边界点都被占用,从最外面的对被占用开始)

>此外,确定“占用长度”的质心.找到一堆共线的质心并不难,所以我将其作为练习
>存储“占用长度”及其质心的产品

>平均所有加权占用长度,以找到与您正在迭代的维度正交的质心

一旦你在两个方向都有质心,就会知道形状的“真实中心”.