用 Mac 的命令图标涂鸦

主要观点:

  • 介绍了 Mac 系统中命令键(⌘)的由来及与瑞典地图符号的关联,其形状在道路标志和键盘中仍可见。
  • 作者花费大量时间绘制类似命令图标形状,因该符号的旋转对称性在手绘中难以捕捉,所以尝试用 SVG 绘制。
  • 详细阐述了绘制命令图标及其变体的数学原理和 SVG 代码实现,包括直线、弧形的坐标计算及旋转对称等。
  • 基于此制作了一个可在线调整变量绘制形状的 Web 应用程序,展示了各种有趣的形状,包括类似外星版本、重叠、正负长度半径等情况。

关键信息:

  • 命令键(⌘)由 Susan Kare 从符号字典中选出,其形状在瑞典地图中已使用。
  • 绘制命令图标需考虑直线长度、弧形半径、边数等变量及相应的三角函数计算。
  • SVG 代码通过定义<path>元素和使用<use>及旋转变换来重复绘制形状。
  • 制作的 Web 应用程序[alexwlchan.net/fun-stuff/looped-squares/]可在线调整变量绘制形状。

重要细节:

  • 计算直线起点和终点坐标的公式:start = (centre_x - L/2, centre_y - h)end = (centre_x + L/2, centre_y - h),其中h = L / (2 * tan(θ/2))θ = 360° / 数的边数
  • 计算弧形相关参数的公式:ψ = 360° * (1 - 1 / 数的边数)s = r * tan(180° / 数的边数),弧形中心坐标(start of arc + s, start of loop_y - r),弧形起点和终点坐标分别为(centre of arc_x, centre of arc_y + r)(centre of arc_x + r * sinψ, centre of arc_y + r * cosψ)
  • SVG 中弧形的语法M {start_x} {start_y} A {r} {r} 0 1 0 {end_x} {end_y},其中0 1 0为 SVG 弧语法的部分参数。
  • Web 应用程序每次加载页面绘制随机形状,可手动调整值绘制指定形状,地址为[alexwlchan.net/fun-stuff/looped-squares/]。
阅读 11
0 条评论