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