新版本的UI需求中有一條是圖1中紅框中的傾斜效果。

要實(shí)現(xiàn)這個(gè)效果，開始有兩種思路，第一種是在UILabel中把文字傾斜，然后把左邊、中間、右邊的傾斜部分單獨(dú)切圖，拼出這個(gè)效果。第二種是先實(shí)現(xiàn)不傾斜的版本，然后對(duì)整體進(jìn)行一個(gè)傾斜的變換。顯然第二種辦法通用性更強(qiáng)，所以選擇了第二種。

圖1

第一步實(shí)現(xiàn)不傾斜的版本很簡(jiǎn)單，左右各用一個(gè)UILabel，分別使用不同的字體顏色、背景顏色和邊框顏色。

第二步對(duì)兩個(gè)label進(jìn)行剪切變換，讓其傾斜相同的角度。

直接上代碼

let transform = CGAffineTransform(a: 1, b: 0, c: -0.104911, d: 1, tx: 0, ty: 0)
label.transform = transform    // 對(duì)label設(shè)置變換
label.layer.shouldRasterize = true  //去鋸齒

代碼中CGAffineTransform是做仿射變換的矩陣，本文用到的剪切變換是仿射變換的一種。參數(shù)b決定了垂直方向的傾斜度，參數(shù)c決定了水平方向的傾斜度。計(jì)算b和c可以用這個(gè)網(wǎng)址，將傾斜的角度輸入，然后將計(jì)算出的正弦雙曲函數(shù)結(jié)果作為這里的參數(shù)c，余弦雙曲函數(shù)結(jié)果作為參數(shù)b。在本文的需求中，label在水平方向傾斜6度，在垂直方向沒有傾斜(0度)，只要將b和c分別算出來(lái)即可。圖2為計(jì)算參數(shù)c的取值。如果角度正負(fù)號(hào)搞不清楚，可以多試兩次。剩下的參數(shù)a，d，tx，ty在仿射變換中都有對(duì)應(yīng)的用途，在本例的剪切變換中保持為固定值即可。

圖2