圆角矩形:Sketch 绘制非典型圆角矩形

Arely 坐标: 117556 目录:婚姻家庭

做为 Sketch 初学者,在这里也分享下自己的一点小经验,关于如何绘制非典型圆角矩形,大神勿喷。

废话不多说,先画一个圆形备用,Sketch 中按住 Shift 再拖动鼠标可以画圆或者其他正多边形。

参考文章中提到的方案是:调整圆形中锚点宽度或者高度。这时候问题来了,Sketch 是不能直接设置锚点的拉伸长度或者高度的,只了坐标值的设置。

譬如现在需要设置锚点的宽度为圆形直径的 67%(参考文章中提到 67% 是比较完美的设置数值),应该如何实现呢?

选中圆形按 Enter 键或者双击图形,进入编辑模式,这时候会出现上、下、左、右四个锚点,锚点宽度指的是红色矩形框内三个锚点连成的直线的长度,高度就不用赘述了吧。

好了,既然明确了目标就好办了,锚点 2 保持不动,调整锚点 1 和锚点 3 的 x 轴的位置即可,那么显然 1-2 的距离必须是 0.67 / 2 * R ( 直径 ) ,也就是 67% 的半径长度。

下面就动手调整,选中锚点 2 看下 x 轴的坐标,复制下来,比如我这里的是 508.5,同时记下圆形直径,比如我这里是 321 ,刚才说了,需要调整锚点 1 的 x 轴坐标,这时候选中锚点 1,在 x 轴输入框内输入,508.5 - 0.67 / 2 * 321,对!Sketch 中输入框支持四则运算,同样的选中锚点 3,输入 508.5 + 0.67 / 2 * 321,这样底部的就算调整好了。

顶端的锚点只需要复制刚才得到的 x 坐标值设置进去即可,关于左右两侧的锚点设置,需要调整的就是 y 轴了,把 x 轴的值替换为 y 轴的值计算即可。

最后分享一个小技巧,如何快速关闭和打开所有图层分组,按住 option 键,再点击需要关闭或者打开的上层文件或文件夹。比如按住 option 键,点击 Artboard,那么这个 Artboard 拥有的分组都会被关闭或者打开,无论有多少层嵌套。

专题栏目
最新