利用CGContext繪圖和CAShapeLayer畫線

用CGContext繪圖

創(chuàng)建CGContext上下文

var context: CGContext?

制造CGContext環(huán)境

通過(guò)UIView的子類的drawRect:在上下文中繪制及刻,該方法系統(tǒng)已準(zhǔn)備好一個(gè)cgcontext抒抬,并放置在上下文棧頂早芭,rect形參就是context的尺寸大小

override func draw(_ rect: CGRect) {

????????????//獲取上下文

????????????context = UIGraphicsGetCurrentContext()

????????????//設(shè)置背景透明

????????????context?.setFillColor((backgroundColor?.cgColor)!)

????????????//填充大小

????????????context?.fill(rect)

????????????//繪制刻度

????????????setLineMark()

}

繪圖

func setLineMark() {

????????????//給刻度標(biāo)記繪制不同的顏色

????????????context?.setStrokeColor(UIColor(red: 1, green: 0, blue: 0, alpha: ????????????0.8).cgColor)

????????????context?.setLineCap(.square)

????????????context?.setLineWidth(3)

????????????context?.strokePath()

????????????context?.move(to: CGPoint(x: 0 , y: 0))

????????????context?.addLine(to: CGPoint(x: 100, y: 100))

}

CAShapeLayer畫線

創(chuàng)建CAShapeLayer

var eyelinerLayer = CAShapeLayer()

eyelinerLayer.lineWidth = 1 // 線寬

eyelinerLayer.strokeColor = UIColor.red.cgColor //線色

eyelinerLayer.fillColor = UIColor.clear.cgColor //填充色

繪制路徑

let path = UIBezierPath()

let pi = CGFloat(M_PI)

path.addArc(withCenter: CGPoint(x: frame.width/2, y: frame.height), radius: 0, startAngle: -pi * ((pi - angle)/pi), endAngle: -pi * (angle/pi), clockwise: true)

path.addArc(withCenter: CGPoint(x: frame.width/2, y: 0), radius: 0, startAngle: pi * (angle/pi), endAngle: pi * ((pi - angle)/pi), clockwise: true)

eyelinerLayer.path = path.cgPath

layer.addSublayer(eyelinerLayer)

效果圖:

這里需要注意一點(diǎn)轩缤,如果將第二個(gè)addArc的startAngle和endAngle兌換:

path.addArc(withCenter: center2!, radius: 0, startAngle: pi * ((pi - angle)/pi), endAngle: pi * (angle/pi), clockwise: true)

效果圖:


若將clockwise置為false

path.addArc(withCenter: center2!, radius: 0, startAngle: pi * (angle/pi), endAngle: pi * ((pi - angle)/pi), clockwise: false)

效果圖:

兌換的同時(shí)呜象,將clockwise置為false:

path.addArc(withCenter: center2!, radius: 0, startAngle: pi * ((pi - angle)/pi), endAngle: pi * (angle/pi), clockwise: false)

效果圖:

addArc是添加圓弧曲線的滓彰,startAngle和endAngle是起始位置,clockwise為是否是順時(shí)針,而且可以通過(guò)上面幾個(gè)圖可以看出看尼,一個(gè)path畫出來(lái)的線是一筆完成的递鹉。

除此之外,畫線方式還有很多藏斩,兩點(diǎn)之點(diǎn)畫線:

path.move(to: CGPoint(x: 0 , y: 0)) //起始位置

path.addLine(to: CGPoint(x: 100 , y: 100))

創(chuàng)建三次貝爾曲線:

open func addCurve(to endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)

參數(shù):endPoint->終點(diǎn)

controlPoint1->控制點(diǎn)1

controlPoint2->控制點(diǎn)2

創(chuàng)建二次貝爾曲線:

open func addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)

虛線:

open func setLineDash(_ pattern: UnsafePointer?, count: Int, phase: CGFloat)

添加動(dòng)畫

創(chuàng)建動(dòng)畫:

let animation = CABasicAnimation(keyPath: "strokeEnd")

animation.fromValue = 0

animation.toValue = 1

animation.duration = 2.0

animation.isRemovedOnCompletion = true

animation.fillMode = kCAFillModeForwards

eyelinerLayer.add(animation, forKey: "kClockAnimation")

如果想要在動(dòng)畫結(jié)束后做些什么躏结,需要用到CAAnimationDelegate:

animation.delegate = self

動(dòng)畫結(jié)束的回調(diào):

func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {

????????????//flag動(dòng)畫是否完成

????????????if flag {

????????????eyelinerLayer.fillColor = UIColor.white.cgColor

????????????}

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市狰域,隨后出現(xiàn)的幾起案子媳拴,更是在濱河造成了極大的恐慌,老刑警劉巖兆览,帶你破解...
    沈念sama閱讀 216,997評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屈溉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡抬探,警方通過(guò)查閱死者的電腦和手機(jī)语婴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)驶睦,“玉大人,你說(shuō)我怎么就攤上這事匿醒〕『剑” “怎么了?”我有些...
    開封第一講書人閱讀 163,359評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵廉羔,是天一觀的道長(zhǎng)溉痢。 經(jīng)常有香客問(wèn)我,道長(zhǎng)憋他,這世上最難降的妖魔是什么孩饼? 我笑而不...
    開封第一講書人閱讀 58,309評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮竹挡,結(jié)果婚禮上镀娶,老公的妹妹穿的比我還像新娘。我一直安慰自己揪罕,他們只是感情好梯码,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,346評(píng)論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著好啰,像睡著了一般轩娶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上框往,一...
    開封第一講書人閱讀 51,258評(píng)論 1 300
  • 那天鳄抒,我揣著相機(jī)與錄音,去河邊找鬼。 笑死许溅,一個(gè)胖子當(dāng)著我的面吹牛瓤鼻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播闹司,決...
    沈念sama閱讀 40,122評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼娱仔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了游桩?” 一聲冷哼從身側(cè)響起牲迫,我...
    開封第一講書人閱讀 38,970評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎借卧,沒(méi)想到半個(gè)月后盹憎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,403評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡铐刘,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,596評(píng)論 3 334
  • 正文 我和宋清朗相戀三年陪每,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片镰吵。...
    茶點(diǎn)故事閱讀 39,769評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡檩禾,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出疤祭,到底是詐尸還是另有隱情盼产,我是刑警寧澤,帶...
    沈念sama閱讀 35,464評(píng)論 5 344
  • 正文 年R本政府宣布勺馆,位于F島的核電站戏售,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏草穆。R本人自食惡果不足惜灌灾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,075評(píng)論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望悲柱。 院中可真熱鬧锋喜,春花似錦、人聲如沸豌鸡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)直颅。三九已至博个,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間功偿,已是汗流浹背盆佣。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工往堡, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人共耍。 一個(gè)月前我還...
    沈念sama閱讀 47,831評(píng)論 2 370
  • 正文 我出身青樓虑灰,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親痹兜。 傳聞我的和親對(duì)象是個(gè)殘疾皇子穆咐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,678評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容