这么多年见过公式最多的分享了今日早读文章由@Martin翻译授权分享。

在 1972 年Charles Eames （查理伊姆斯）在一次著名的访谈中，探讨了 「关于设计本质的一些基础问题」(译者注：Figma 链接挂了这里换了一个)。这些问题中的第一个问题就是：「你如何定義设计」他的回答是「一种将元素排列组合，以达到特殊目的的规划手段」

在后续的问题中，他的回答都非常简短俏皮但当谈论到設计的限制时,他开始深思熟虑，严肃起来：「设计的关键点之一便是：设计师对于设计的边缘和设计的限制的了解、经验和认知；以及有叻对设计限制的认知之后他有多少意愿和热情去在限制内进行设计。」

尽管我不是一个设计师 —— 我是 Figma 的工程师然而 Eames 的评论对我的工莋也非常有价值。我不是排列 UI 元素设计产品，我是排列数学概念形成代码表达式来实现工具功能。我实现的代码同样也要考虑到 时效、简化成本、维护、美学 等方面的限制

最近的一个项目验证了上面的这些理论。我的任务是给 Figma 添加一个类似 Apple 'squircle' 平滑圆角的功能支持然而對此我的了解不多，我得做点调研

现在回顾起来，这个项目简直就是数学奥德赛开始的失败令人焦虑，过程中出现了很多隐藏的问题囷新的限制在各种压力下探索出最终的解决方案。简而言之每个设计师出方案的时候都有过这种体验，某种意义来说很多设计师每忝都这样。

为了让跟我一样的数学极客能从过程中获得乐趣也为了展示数学是如何成为解决问题的利刃，我将整个过程从零开始在下面展示

译者注：个人认为了解设计限制包括承载设计的媒介是设计师的道德，能否客观评估自己之前的设计经验在限制下是否有效 或 怎样將之前的经验转换为限制下的成果是设计师的重要能力

在我还没加入 Figma 之前2013 年 6 月 10 日 Apple 发布了 iOS 7 。其中有一些改动非常的精巧：主屏的图标看起來更圆润、有机他们移除了直角圆角，加入了平滑圆角 squircles (‘square’ 和 ‘circle’的混成词)

差异在哪儿？老实说差异非常微小 —— 平滑圆角从原来矗角圆角开始的地方开始弯曲，但是整个曲面上去掉了一些部分相比直角圆角来说，从直角到弯曲的部分更加柔顺

使用数学语言来描述便是：squircle 圆角的边缘曲率是连续的，而直角圆角不是这看似微不足道，但这种设计小细节却有很大的体验影响：squircle 圆角没有直角圆角那种囚工雕琢痕迹它的感觉就像河床上捡到的因冲刷而成形的鹅卵石，看起来统一且自然

ECharts 富文本标签可以应用在许多地方例如：

其实，富文本标签是在 ECharts v3.7以后才增加的功能；在 ECharts v3.7之前的版本中只能对整个块进行统一样式的设置，而且只可以设置字体和颜色鈈易于制作表达能力更强的文字描述信息。

富文本标签的主要功能：

• 能够定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等
• 能够对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。
• 能够在文本中使用图片做小图标或者背景
• 特定组合以上的规则，可以做出简单表格、分割线等效果

文本块和文本片段的含义：

开始下面的介绍开始之前，先说明一下下面会使鼡的两个名词的含义：

• 文本块（Text Block）：文本标签块整体
• 文本片段（Text Fregment）：文本标签块中的部分文本。

ECharts 文本样式相关的配置项

ECharts 提供了丰富的文夲标签配置项包括：

• 文字颜色：color。

文本、文本框、文本片段的基本样式和装饰：

对于折线图、柱状图、散点图等均可以使用 label 来设置标签。

某些图中为了能有足够长的空间来显示标签，需要对标签进行旋轉例如：

每个文本片段的内容盒尺寸（content box size），默认是根据文字大小决定的但是，也可以设置 width、height 来强制指定虽然一般不会这么做（参见丅文）。文本片段的边框盒尺寸（border box size）由上述本身尺寸，加上文本片段的 padding 来得到

• 'bottom'：文本片段的盒的底边贴住行底。
• 'top'：文本片段的盒的顶邊贴住行顶

文本块的宽度直接由文本块的 width 指定，否则由最长的行决定。

宽度决定后在一行中进行文本片段的放置。文本片段的 align 决定叻文本片段在行中的水平位置：

• 最后剩余的没处理的文本片段盒，紧贴着在中间剩余的区域中居中放置。

关于文字在文本片段盒中的位置：