第一章 - 點(diǎn)亮畫板

畫出自己的世界，讓想象和創(chuàng)造力翱翔于畫布之上。在iOS開發(fā)中，繪圖是一個(gè)強(qiáng)大而有趣的技能。本教程將帶你一步步學(xué)習(xí)如何在iOS應(yīng)用中實(shí)現(xiàn)繪圖功能。

第一節(jié) - 創(chuàng)建畫布

在你的iOS應(yīng)用中，創(chuàng)建一個(gè)畫布是第一步。我們將使用Core Graphics框架，它提供了豐富的繪圖功能。

import?UIKit



class?CanvasView:?UIView?{

?override?func?draw(_?rect:?CGRect)?{

??? ?super.draw(rect)

??? ?// 在這里實(shí)現(xiàn)繪圖邏輯

?}

}

創(chuàng)建一個(gè)名為CanvasView的自定義視圖，并在draw(_:)方法中實(shí)現(xiàn)繪圖邏輯?，F(xiàn)在，我們已經(jīng)準(zhǔn)備好了自己的畫布。

第二節(jié) - 繪制形狀

接下來，讓我們開始繪制一些基本的形狀，如線條、矩形和圓形。

1. 繪制線條

override?func?draw(_?rect:?CGRect)?{

?super.draw(rect)

?

?guard?let?context?=?UIGraphicsGetCurrentContext()?else?{?return?}

?

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

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

?context.setStrokeColor(UIColor.red.cgColor)

?context.setLineWidth(2)

?context.strokePath()

}

在draw(_:)方法中，我們通過UIGraphicsGetCurrentContext()獲取當(dāng)前的上下文。然后，我們使用move(to:)和addLine(to:)方法定義線條的起點(diǎn)和終點(diǎn)，并使用setStrokeColor(_:)設(shè)置線條的顏色，setLineWidth(_:)設(shè)置線條的寬度，最后使用strokePath()繪制線條。

2. 繪制矩形

override?func?draw(_?rect:?CGRect)?{

?super.draw(rect)

?

?guard?let?context?=?UIGraphicsGetCurrentContext()?else?{?return?}

?

?let?rectangle?=?CGRect(x:?50,?y:?50,?width:?150,?height:?100)

?context.addRect(rectangle)

?context.setFillColor(UIColor.blue.cgColor)

?context.fill(rectangle)

}

在繪制矩形時(shí)，我們使用addRect(_:)方法定義矩形的位置和大小，然后使用setFillColor(_:)設(shè)置填充顏色，最后使用fill(_:)填充矩形。

3. 繪制圓形

override?func?draw(_?rect:?CGRect)?{

?super.draw(rect)

?

?guard?let?context?=?UIGraphicsGetCurrentContext()?else?{?return?}

?

?let?center?=?CGPoint(x:?100,?y:?100)

?let?radius:?CGFloat?=?50

?context.addArc(center:?center,?radius:?radius,?startAngle:?0,?endAngle:?CGFloat.pi?*?2,?clockwise:?true)

?context.setFillColor(UIColor.green.cgColor)

?context.fillPath()

}

繪制圓形時(shí)，我們使用addArc(center:radius:startAngle:endAngle:clockwise:)方法定義圓心、半徑和起始角度、終止角度，然后使用setFillColor(_:)設(shè)置填充顏色，最后使用fillPath()填充圓形。

第三節(jié) - 繪制文本

在繪圖中，文字是傳遞信息和表達(dá)情感的重要元素。讓我們學(xué)習(xí)如何在畫布上繪制文本。

override?func?draw(_?rect:?CGRect)?{

?super.draw(rect)

?

?guard?let?context?=?UIGraphicsGetCurrentContext()?else?{?return?}

?

?let?text?=?"Hello, iOS Drawing!"

?let?font?=?UIFont.systemFont(ofSize:?20)

?let?attributes:?[NSAttributedString.Key:?Any]?=?[

??? ?.font:?font,

??? ?.foregroundColor:?UIColor.red

?]

?let?attributedText?=?NSAttributedString(string:?text,?attributes:?attributes)

?attributedText.draw(at:?CGPoint(x:?50,?y:?50))

}

在draw(_:)方法中，我們使用UIGraphicsGetCurrentContext()獲取當(dāng)前上下文。然后，我們創(chuàng)建一個(gè)文本字符串text和字體font，并使用NSAttributedString創(chuàng)建具有指定屬性的富文本。最后，使用draw(at:)方法將文本繪制到畫布上。

第四節(jié) - 添加交互

讓我們提升繪圖的樂趣，為畫布添加交互功能。讓用戶通過手勢或觸摸，在畫布上繪制圖形。

import?UIKit



class?CanvasView:?UIView?{

?var?lines:?[Line]?=?[]

?var?currentLine:?Line?

?

?override?func?draw(_?rect:?CGRect)?{

??? ?super.draw(rect)

??? ?

??? ?guard?let?context?=?UIGraphicsGetCurrentContext()?else?{?return?}

??? ?

??? ?for?line?in?lines?{

??? ? ?context.move(to:?line.start)

??? ? ?context.addLine(to:?line.end)

??? ? ?context.setStrokeColor(line.color.cgColor)

??? ? ?context.setLineWidth(line.width)

??? ? ?context.strokePath()

??? ?}

??? ?

??? ?if?let?line?=?currentLine?{

??? ? ?context.move(to:?line.start)

??? ? ?context.addLine(to:?line.end)

??? ? ?context.setStrokeColor(line.color.cgColor)

??? ? ?context.setLineWidth(line.width)

??? ? ?context.strokePath()

??? ?}

?}

?

?override?func?touchesBegan(_?touches:?Set<UITouch>,?with?event:?UIEvent?)?{

??? ?guard?let?touch?=?touches.first?else?{?return?}

??? ?let?location?=?touch.location(in:?self)

??? ?currentLine?=?Line(start:?location,?end:?location,?color:?UIColor.black,?width:?2)

?}

?

?override?func?touchesMoved(_?touches:?Set<UITouch>,?with?event:?UIEvent?)?{

??? ?guard?let?touch?=?touches.first?else?{?return?}

??? ?let?location?=?touch.location(in:?self)

??? ?currentLine?.end?=?location

??? ?setNeedsDisplay()

?}

?

?override?func?touchesEnded(_?touches:?Set<UITouch>,?with?event:?UIEvent?)?{

??? ?guard?let?line?=?currentLine?else?{?return?}

??? ?lines.append(line)

??? ?currentLine?=?nil

?}

}



struct?Line?{

?var?start:?CGPoint

?var?end:?CGPoint

?var?color:?UIColor

?var?width:?CGFloat

}

在CanvasView中，我們添加了一個(gè)lines數(shù)組來存儲(chǔ)已繪制的線條。在draw(_:)方法中，我們通過循環(huán)遍歷lines數(shù)組，并使用move(to:)和addLine(to:)方法繪制已保存的線條。

在touchesBegan(_:with:)方法中，我們?cè)谟|摸開始時(shí)獲取觸摸點(diǎn)的位置，并創(chuàng)建一個(gè)新的Line對(duì)象來表示當(dāng)前的線條。在touchesMoved(_:with:)方法中，我們更新當(dāng)前線條的結(jié)束點(diǎn)，并使用setNeedsDisplay()方法觸發(fā)視圖的重繪。在touchesEnded(_:with:)方法中，我們將當(dāng)前線條保存到lines數(shù)組中，并將currentLine設(shè)置為nil。

現(xiàn)在，你可以通過觸摸畫布，在畫布上繪制線條了。

第五節(jié) - 創(chuàng)造無限可能

現(xiàn)在，你已經(jīng)掌握了iOS繪圖的基本技巧。通過組合使用各種繪制方法，你可以創(chuàng)造出豐富多彩的圖形，實(shí)現(xiàn)自己的繪圖創(chuàng)意。

不僅如此，你還可以探索更多高級(jí)的繪圖技術(shù)，如漸變、陰影、圖片合成等，使你的繪圖更加精美和生動(dòng)。

繪圖是一門藝術(shù)，也是一門技術(shù)。通過不斷的練習(xí)和嘗試，你將不斷進(jìn)步，展現(xiàn)出你獨(dú)特的繪圖風(fēng)格和創(chuàng)造力。

愿你在iOS繪圖的世界中，創(chuàng)造出屬于自己的藝術(shù)之美！讓你的應(yīng)用煥發(fā)出色彩斑斕的光芒，為用戶帶來愉悅和驚喜。

無論是繪制簡單的幾何形狀，還是創(chuàng)作復(fù)雜的圖像，都將是你在iOS開發(fā)中的寶貴技能和創(chuàng)造力的體現(xiàn)。

繼續(xù)前行，探索更多繪圖的奧秘，讓你的應(yīng)用在畫布上綻放無限的可能！