en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

1.16.2012

Core Graphics 劃線的基本技巧


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);






4 則留言:

  1. 匿名4/24/2012

    我一直在找畫折線圖的教學
    但是找不到
    不知道是否有建議的參考資源呢?
    感謝ˇ感謝

    Eric
    iampetboy@gmail.com

    回覆刪除
    回覆
    1. Eric 你好
      你可以在索引式搜索頁面中使用"折線圖"關鍵字查詢,目前有關折線圖的文章只有"3PlotStrip 動態的 Plot Line"這篇,
      不知道是否對您有幫助!

      以下是該文章的網址:
      http://furnacedigital.blogspot.com/2012/02/f3plotstrip-plot-line.html

      刪除
  2. 請教下, 不是已經有UIBeizerPath可以用了嗎? 為什麼還需要CGContext系列的API呢?

    回覆刪除
    回覆
    1. 奧利佛 您好:

      這是比 UIBeizerPath 還要在底層的東西,UIBeizerPath也是透過CGContext的方式來做繪圖,

      當然這是需要看您的需要來決定你要使用哪一種東西,如果只是單單以畫線來說,使用 UIBeizerPath 就已經足夠,但是如果需要加上一些複雜的紋理或是自定縣段的變化,那磨還是要尋求更底層的東西才有辦法做到。

      刪除