从设计稿出发的数学思考

记一次对设计稿的思考,涉及简单的数学问题。

设计稿 如上图所示,是我从设计师手中拿到的一小部分设计稿。它是一个时间选择组件,以每半个小时作为最小刻度的色块拼装而成的组件。色块从左到右分别代表“过期”、“禁用”、“选中”、“可选”。

这里,请关注最左边的颜色块,它代表的是已经过去的时间段,跟最右边的白色色块一样也是多个“半小时”色块左右拼接实现背景拼接的。这就让我产生了一个疑问:怎么样画等间距斜线可以实现多个“半小时”色块左右拼接时,线与线可以无缝重叠?

我用sketch画了个目标效果,右上方就是我要的效果。 目标效果

根据设计稿的尺寸和效果,我可以测量“半小时”色块的长和宽,斜线的斜率和间距,按照设计稿的数据进行绘制就可以绘制出想要的效果。

但我无法满足于这种具有的特殊的数值产生的结果。我需要从特殊到一般,使用数学模型描述这种规律。

在讨论了下面几个观点(未必正确):

1. 长方形与斜线构成的图形是中心对称图形。  
2. 斜线会等分长方形的对角线。(群友“Aliang”的观点)  
3. 平行并且垂直方向间距的整数倍等于h,水平整数倍等于w。(某条“98年的咸鱼”群友的观点)  
4. 如果某条线与长方形左侧的交点存在,则长方形右侧必有另外一条线与之相交,且高度位置跟左侧的交点一样。(群友“C”的观点)  
...

实际上观点4与我不谋而合。如果我把长方形与某一条线构成的图形作为一个独立单元看待。当我在右侧拼接这个另一个这样的单元时,左右这两个单元存在着一种平移关系。词穷描述不清楚,看下方的图片。为了达到左侧的效果,实际上可以从右侧向上平移。反过来思考,从左侧图形到右侧的图形隐约可以告诉我一种数学可描述的规律。

设想

所以我假设每个“半小时”色块长方形的宽为w、高为h。斜线的斜率是k(垂直于长方形垂直边的线不在考虑范围之内,它不存在所谓的线与线无缝重叠),线与线之间的间距为b。

在二维坐标系中,取相邻两个长方形拼接后的左下角为坐标原点。则长方形的右边x=w和x=2w与x轴留下了连个特殊的交点,分别为(w,0)和(2w,0)。

由于长方形左右拼接时线段可以无缝重叠。也就是说当有一条线l1与第一个长方形的右边x=w相交于点(w,C)时,必有另一条线l2与第二个长方形的右边x=2w相交于点(2w,c)。

如下图所示:

二维坐标下的模型

再一次假设l1与l2之间隔着i条线。则可以在二维坐标系中描述l1和l2如下图所示。其中l2在l1下方。

l1: y = kx + a  
l2: y = kx + a - (i+1)b  

其中a为l1的相位,即与y轴的交点纵坐标。

l1与x=w的交点纵坐标C=kw+a;l2与x=2w的交点纵坐标为C=2kw+a-(i+1)b

既有

kw + a = 2kw + a - (i+1)b  

约项得到我最终想要的规则:

k = (1+i)b/w  

对这个规则的解释是,对于给定的长方形宽度w,斜线间距b,以及控制密度的i,就可以确定斜线的走向。从而使得在长方形上画出的线可以另长方形左右拼接时可以无缝重叠。

ChardLau

继续阅读此作者的更多文章