記一次對設(shè)計稿的思考，涉及簡單的數(shù)學(xué)問題。
如上圖所示，是我從設(shè)計師手中拿到的一小部分設(shè)計稿。它是一個時間選擇組件，以每半個小時作為最小刻度的色塊拼裝而成的組件。色塊從左到右分別代表“過期”、“禁用”、“選中”、“可選”。
這里，請關(guān)注最左邊的顏色塊，它代表的是已經(jīng)過去的時間段，跟最右邊的白色色塊一樣也是多個“半小時”色塊左右拼接實現(xiàn)背景拼接的。這就讓我產(chǎn)生了一個疑問：怎么樣畫等間距斜線可以實現(xiàn)多個“半小時”色塊左右拼接時，線與線可以無縫重疊？
我用sketch畫了個目標(biāo)效果，右上方就是我要的效果。
根據(jù)設(shè)計稿的尺寸和效果，我可以測量“半小時”色塊的長和寬，斜線的斜率和間距，按照設(shè)計稿的數(shù)據(jù)進行繪制就可以繪制出想要的效果。
但我無法滿足于這種具有的特殊的數(shù)值產(chǎn)生的結(jié)果。我需要從特殊到一般，使用數(shù)學(xué)模型描述這種規(guī)律。
在討論了下面幾個觀點（未必正確）：
- 長方形與斜線構(gòu)成的圖形是中心對稱圖形。
- 斜線會等分長方形的對角線。（群友“Aliang”的觀點）
- 平行并且垂直方向間距的整數(shù)倍等于h，水平整數(shù)倍等于w。（某條“98年的咸魚”群友的觀點）
- 如果某條線與長方形左側(cè)的交點存在，則長方形右側(cè)必有另外一條線與之相交，且高度位置跟左側(cè)的交點一樣。（群友“C”的觀點）
...
實際上觀點4與我不謀而合。如果我把長方形與某一條線構(gòu)成的圖形作為一個獨立單元看待。當(dāng)我在右側(cè)拼接這個另一個這樣的單元時，左右這兩個單元存在著一種平移關(guān)系。詞窮描述不清楚，看下方的圖片。為了達到左側(cè)的效果，實際上可以從右側(cè)向上平移。反過來思考，從左側(cè)圖形到右側(cè)的圖形隱約可以告訴我一種數(shù)學(xué)可描述的規(guī)律。
所以我假設(shè)每個“半小時”色塊長方形的寬為w、高為h。斜線的斜率是k（垂直于長方形垂直邊的線不在考慮范圍之內(nèi)，它不存在所謂的線與線無縫重疊），線與線之間的間距為b。
在二維坐標(biāo)系中，取相鄰兩個長方形拼接后的左下角為坐標(biāo)原點。則長方形的右邊x=w和x=2w與x軸留下了連個特殊的交點，分別為(w,0)和(2w,0)。
由于長方形左右拼接時線段可以無縫重疊。也就是說當(dāng)有一條線l1與第一個長方形的右邊x=w相交于點(w,C)時，必有另一條線l2與第二個長方形的右邊x=2w相交于點(2w,c)。
如下圖所示：
再一次假設(shè)l1與l2之間隔著i條線。則可以在二維坐標(biāo)系中描述l1和l2如下圖所示。其中l(wèi)2在l1下方。
l1: y = kx + a
l2: y = kx + a - (i+1)b
其中a為l1的相位，即與y軸的交點縱坐標(biāo)。
l1與x=w的交點縱坐標(biāo)C=kw+a；l2與x=2w的交點縱坐標(biāo)為C=2kw+a-(i+1)b
既有
kw + a = 2kw + a - (i+1)b
約項得到我最終想要的規(guī)則：
k = (1+i)b/w
對這個規(guī)則的解釋是，對于給定的長方形寬度w，斜線間距b，以及控制密度的i，就可以確定斜線的走向。從而使得在長方形上畫出的線可以另長方形左右拼接時可以無縫重疊。
