新版本的UI需求中有一條是圖1中紅框中的傾斜效果死嗦。
要實現(xiàn)這個效果，開始有兩種思路节腐，第一種是在UILabel中把文字傾斜摘盆，然后把左邊、中間孩擂、右邊的傾斜部分單獨切圖，拼出這個效果狈邑。第二種是先實現(xiàn)不傾斜的版本蚤认，然后對整體進行一個傾斜的變換。顯然第二種辦法通用性更強砰琢，所以選擇了第二種良瞧。
圖1
第一步實現(xiàn)不傾斜的版本很簡單训唱，左右各用一個UILabel，分別使用不同的字體顏色赞庶、背景顏色和邊框顏色巡通。
第二步對兩個label進行剪切變換，讓其傾斜相同的角度宴凉。
直接上代碼
let transform = CGAffineTransform(a: 1, b: 0, c: -0.104911, d: 1, tx: 0, ty: 0)
label.transform = transform // 對label設(shè)置變換
label.layer.shouldRasterize = true //去鋸齒
代碼中CGAffineTransform是做仿射變換的矩陣，本文用到的剪切變換是仿射變換的一種丧靡。參數(shù)b決定了垂直方向的傾斜度籽暇，參數(shù)c決定了水平方向的傾斜度。計算b和c可以用這個網(wǎng)址戒悠，將傾斜的角度輸入，然后將計算出的正弦雙曲函數(shù)結(jié)果作為這里的參數(shù)c卤恳，余弦雙曲函數(shù)結(jié)果作為參數(shù)b寒矿。在本文的需求中，label在水平方向傾斜6度符相，在垂直方向沒有傾斜(0度)，只要將b和c分別算出來即可镜豹。圖2為計算參數(shù)c的取值蓝牲。如果角度正負號搞不清楚，可以多試兩次搞旭。剩下的參數(shù)a，d肄渗，tx，ty在仿射變換中都有對應(yīng)的用途欠动，在本例的剪切變換中保持為固定值即可惑申。
圖2
