我对计算图标的“光学对准”感兴趣。例如:
如果您熟悉 UI 设计,您就会知道某些图标(例如上面演示的“播放”按钮三角形)常常感觉不合适。尽管图标的矩形边界在技术上是居中的,但图标仍然感觉不居中。这是因为图标表面积分布不均匀。
有趣的是,当我在问这个问题之前研究这个问题时,在谷歌搜索“体积中心图标”之后,出现的第一个谷歌结果是我两年前在数学堆栈交换中就同一主题提出的问题,但没有答案。
在Math SE上有一个类似的问题,但由于它使用JPEG图像作为示例,答案指出的解决方案是使用像素网格来计算解决方案。我当然可以在 HTML5 画布上渲染矢量图标(我是一名 Web 开发人员,最终希望在 JavaScript 中执行此操作,即使我只是将其标记为“算法”)并计算像素,但这将是一个丑陋的至少可以说。
我想知道是否有任何算法可以用来计算矢量图标的体积中心,甚至可以简单地计算光学对齐(可以通过在图标周围绘制尽可能小的圆来手动完成,如上所示,但我很感兴趣以自动方法)。我意识到这可能是一个具有挑战性的问题,因为矢量图标可以组合任意数量的形状,矢量形状可以有孔,等等。
有谁知道如何编写这样的算法?当涉及到这样复杂的数学算法时,我不知道从哪里开始。
注意:有这个问题,但它似乎只询问多边形,并且答案不解决奇怪的曲线。
该文章所指的“真实中心”在技术上称为对象的质心。对于三角形等简单形状,甚至对于任意多边形,您可以使用公式将边界点代入以获得质心。例如,维基百科关于质心的文章显示了如何确定三角形的质心,这与您链接的文章中显示的结果一致。
不幸的是,对于矢量图形,您会遇到一个稍微困难的问题,因为边界曲线可能就是这样;任意曲线。在这种情况下,最简单的方法是使用数值积分来确定质心。以下是算法的概要(如果您熟悉 MATLAB,可以在此处查找实现):
一旦获得了两个方向的质心,您就知道了形状的“真实中心”。