iOS貝塞爾曲線、ShapeLayer繪制五角星,星星打分

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

思路:

  • 計算五個頂點
  • 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、 shapeLayerframe 原點要設(shè)置到中心即可,為了便于計算,星星的頂點一部分繪制到外部,這個layer原點放到中心即可保證星星正常顯示。

2、shapeLayerfillRule 要設(shè)置為:
OC: kCAFillRuleNonZero 、Swift: .nonZero

layer的復用

這里在繪制的時候存了所有的layer,每次只改變顏色,避免反復創(chuàng)建。

if (index > (int)(self.shapeLayers.count) - 1) {
    //如果缺少layer,就創(chuàng)建
}else{
    //取出來更改顏色
}

期間還碰到一個問題: 在 OC 中用數(shù)組長度-1的問題,那就是長度 countNSUInteger 類型的,-1就……就不是你想要的結(jié)果了,在 Swift 里是沒有問題的。

打分

開啟打分選項,就可以進行打分交互了

/** 是否可選擇 默認NO */
@property (nonatomic) BOOL canSelect;

感謝您閱讀完畢,如有疑問,歡迎添加QQ:714387953(蝸牛上高速)。
github:https://github.com/yhl714387953/DrawStar
如果有錯誤,歡迎指正,一起切磋,共同進步
如果喜歡可以Follow、Star、Fork,都是給我最大的鼓勵。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容