计算任何矢量图标的体积中心或光学对齐（质心）的公式？

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 画布上渲染矢量图标（我是一名网络开发人员，最终希望在 JavaScript 中执行此操作，即使我只是将其标记为“算法”）并计算像素，但这会很丑至少可以说的方法。

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

问题：

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

注意：有this question，但它似乎只是在询问多边形，答案并没有解决奇数曲线。

Answer 1

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

不幸的是，对于矢量图形，您会遇到一个稍微困难的问题，因为边界曲线可能就是这样；任意曲线。在这种情况下，最容易使用数值积分来确定质心。这是一个算法的概要（如果您熟悉 MATLAB，可以查看 here 的实现）：

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

一旦你得到了两个方向的质心，你就知道了形状的“真正的中心”。