algorithm - 计算任何矢量图标的体积中心或光学对齐(质心)的公式？

Question

我有兴趣计算 the "optical alignment" of an icon .例如:

如果您熟悉 UI 设计，就会知道某些图标(例如上面展示的“播放”按钮三角形)经常让人感觉格格不入。尽管图标的矩形边界在技术上是居中的，但图标仍然感觉不到居中。这是因为图标的表面积分布不均匀。

我尝试过的:

这很有趣，当我在询问之前研究这个问题时，在 Googling "volumetric center icon" 之后, 出现的第一个谷歌结果是 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 canvas 上渲染矢量图标(我是一名网络开发人员，最终想在 JavaScript 中进行此操作，即使我只是将其标记为“算法”)并计算像素，但这会很丑陋至少可以说是一种方法。

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

问题:

有谁知道如何编写这样的算法？当涉及到诸如此类的复杂数学算法时，我不知道从哪里开始。

注:有this question但它似乎只询问多边形，答案不涉及奇怪的曲线。

Answer 1

那篇文章所说的“真实中心”在技术上被称为物体的质心。对于像三角形这样的简单形状，甚至对于任意多边形，都有一个公式，您只需将边界点代入即可获得质心。例如，关于质心的维基百科文章显示了如何确定三角形的质心，这与您链接的文章中显示的结果一致。

不幸的是，对于矢量图形你有一个稍微难一点的问题，因为边界曲线可能就是这样；任意曲线。在这种情况下，最简单的方法是使用数值积分来确定质心。下面是算法的概要(如果您熟悉 MATLAB，可以查看 here 的实现):

• 确定形状的边界框
• 对于每个 x 和 y 维度:
  • 将边界框拆分为适当分辨率的均匀分布的采样点
  • 在每个点:
    • 确定与您正在迭代的方向正交的方向上的“占用长度”。
      • 对于凸形，占用长度就是两个边界点之间的差值
      • 对于凹形，您可能会有多个边界点，并且需要确定哪些跳跃点被占用(在我的脑海中，每对交替的边界点都被占用，从最外面的一对被占用开始)
    • 此外，确定“占用长度”的质心。找到一堆共线的质心并不难，所以我将其留作练习
    • 存储“占用长度”与其质心的乘积
  • 对所有加权占用长度取平均值，以找到与迭代正交的维度中的质心

一旦你在两个方向上都有质心，你就知道形状的“真实中心”。