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

Question

我对计算the "optical alignment" of an icon感兴趣。例如：

如果您熟悉UI设计，您就会知道某些图标，例如＆＃34; play＆＃34;按钮三角形如上所示，经常感到不合适。即使图标的矩形边界在技术上居中，图标仍然没有感觉到居中。这是因为图标表面区域的分布不均匀。

我尝试了什么：

有趣的是，当我在询问之前进行研究时，在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画布上渲染矢量图标（我是网络开发人员，并且最终会喜欢在JavaScript中执行此操作，即使我只是将其标记为＆＃34;算法＆＃34;）和计算像素，但这至少可以说是一种丑陋的方法。

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

问题：

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

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

Answer 1

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

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

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

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