Core Graphic 是在 iOS 中做圖形處理時不可做缺的好幫手,它基於 Quartz 引擎,提供許多不同的繪圖函式,下列文章是針對使用 Core Graphic 在繪製線段時的一些基本技巧,您可以參考 Core Graphics 的基本繪圖方式ㄧ文來設定你的環境。
一般線段
一般線段的繪製,就是給予線段的粗細、顏色、兩點座標等參數來作繪製,可以先將繪製點使用 CGContextMoveToPoint 移至假想座標,之後再以 CGContextAddLineToPoint,畫出線段。
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
CGContextMoveToPoint(context, 20.0, 200.0);
CGContextAddLineToPoint(context, 300.0, 200.0);
CGContextStrokePath(context);
用陣列做設定
如果是一個有轉折的線段,就可以利用陣列方式來設定這些轉折點,另外你也可以使用陣列的方式來設定線段的顏色。
CGContextSetLineWidth(context, 6.0);
CGFloat color[4] = {0.5f, 0.7f, 0.2f, 1.0f};
CGContextSetStrokeColor(context, color);
CGPoint point[2] = {CGPointMake(20.0, 230.0), CGPointMake(300.0, 230.0)};
CGContextAddLines(context, point, 2);
CGContextStrokePath(context);
虛線
Core Graphic 同樣也有繪製虛線的能力,虛線的間隔則必須透過陣列的方式來作設定,下列範例的間隔設置為 {3, 10, 3},意思是繪製 3 個單位的線段,之後空出 10 格單位的間隔,接著再繪製 3 個單位的線段,接著又是 3 個單位的空格、10 個單位的線段、 3 個單位的空格...以此類推。最後在畫完線段之後,記得要將虛線的設定改回來,否則之後畫的線段同樣還是虛線。
CGContextSetLineWidth(context, 3.0);
CGContextSetStrokeColorWithColor(context, [UIColor purpleColor].CGColor);
float dash[3]={3 ,10, 3};
CGContextSetLineDash(context,0,dash,3);
CGContextMoveToPoint(context, 20.0, 260.0);
CGContextAddLineToPoint(context, 300.0, 260.0);
CGContextStrokePath(context);
float deDash[1]={1};
CGContextSetLineDash(context,0,deDash,0);
圖案樣式
線段同樣可以利用影像來作塗鴉,這個技巧在遊戲的製作上就很常被使用,利用 UIColor 的 colorWithPatternImage: 方法函式,將圖片設定成 UIColor 的顏色,關於更多這方面的資訊可以參考UIColor 設定為圖案的樣式的方法一文。
CGContextSetLineWidth(context, 15.0);
UIImage *image = [UIImage imageNamed:@"line.png"];
CGContextSetStrokeColorWithColor(context, [UIColor colorWithPatternImage:image].CGColor);
CGContextMoveToPoint(context, 20.0, 290.0);
CGContextAddLineToPoint(context, 300.0, 290.0);
CGContextStrokePath(context);
我一直在找畫折線圖的教學
回覆刪除但是找不到
不知道是否有建議的參考資源呢?
感謝ˇ感謝
Eric
iampetboy@gmail.com
Eric 你好
刪除你可以在索引式搜索頁面中使用"折線圖"關鍵字查詢,目前有關折線圖的文章只有"3PlotStrip 動態的 Plot Line"這篇,
不知道是否對您有幫助!
以下是該文章的網址:
http://furnacedigital.blogspot.com/2012/02/f3plotstrip-plot-line.html
請教下, 不是已經有UIBeizerPath可以用了嗎? 為什麼還需要CGContext系列的API呢?
回覆刪除奧利佛 您好:
刪除這是比 UIBeizerPath 還要在底層的東西,UIBeizerPath也是透過CGContext的方式來做繪圖,
當然這是需要看您的需要來決定你要使用哪一種東西,如果只是單單以畫線來說,使用 UIBeizerPath 就已經足夠,但是如果需要加上一些複雜的紋理或是自定縣段的變化,那磨還是要尋求更底層的東西才有辦法做到。