畫五角星做啥?比如評價:"★ ★ ★ ★ ★"
你這不是用符號打出來了么?還寫它干啥?

思路:
- 計算五個頂點
- UIBezierPath連接
- 繪制到CAShapeLayer上
為了便于計算,以綠色視圖左上角為坐標原點計算各個點,最后顯示到黃色的視圖上(綠色視圖origin為黃色視圖的中心點),如下圖:

計算五個頂點
五角星中心即為外接圓的中心,假定圓的半徑為 r ,可依次獲得頂點 A B C D E 的坐標:
| 點 | 坐標值 |
|---|---|
| A | (0, -r) |
| B | (r*cos(18), -r*sin(18)) |
| C | (r*cos(54), -r*sin(54)) |
| D | (-r*sin(36), r*cos(36) |
| E | (-r*cos(18), -r*sin(18)) |
UIBezierPath連接
move 到起點,addLine 連接各個點。連接順序依次按照 A->C->E->B->D 一筆畫五角星的順序 去連接,D->A 閉合可以使用貝塞爾曲線的 close 方法(實測也可以不用調(diào)用),如下圖:

繪制到CAShapeLayer上
創(chuàng)建一個 shapeLayer,圖二中綠色的繪制layer。
1、 shapeLayer 的 frame 原點要設(shè)置到中心即可,為了便于計算,星星的頂點一部分繪制到外部,這個layer原點放到中心即可保證星星正常顯示。
2、shapeLayer 的 fillRule 要設(shè)置為:
OC: kCAFillRuleNonZero 、Swift: .nonZero
layer的復用
這里在繪制的時候存了所有的layer,每次只改變顏色,避免反復創(chuàng)建。
if (index > (int)(self.shapeLayers.count) - 1) {
//如果缺少layer,就創(chuàng)建
}else{
//取出來更改顏色
}
期間還碰到一個問題: 在 OC 中用數(shù)組長度-1的問題,那就是長度 count 是 NSUInteger 類型的,-1就……就不是你想要的結(jié)果了,在 Swift 里是沒有問題的。
打分
開啟打分選項,就可以進行打分交互了
/** 是否可選擇 默認NO */
@property (nonatomic) BOOL canSelect;
感謝您閱讀完畢,如有疑問,歡迎添加QQ:714387953(蝸牛上高速)。
github:https://github.com/yhl714387953/DrawStar
如果有錯誤,歡迎指正,一起切磋,共同進步
如果喜歡可以Follow、Star、Fork,都是給我最大的鼓勵。