iOS 畫虛線方法總結(jié)

前言

好幾天都沒有寫簡(jiǎn)書了匕荸,主要是最近一直在做原型圖车摄,六天的時(shí)間出了兩個(gè)項(xiàng)目的原型(PC+手機(jī))粟誓,結(jié)果累成狗奏寨,發(fā)現(xiàn)自己真有點(diǎn)像超人了。昨天寫了一個(gè)時(shí)間軸的小功能鹰服。在這里給大家分享一下病瞳,畫虛線的兩種方法,順便也幫助自己做一下記憶悲酷。

重寫drawRect方法
- (void)drawRect:(CGRect)rect{
     [super drawRect:rect];
     CGContextRef currentContext = UIGraphicsGetCurrentContext();
     //設(shè)置虛線顏色 
     CGContextSetStrokeColorWithColor(currentContext, [UIColor BlackColor].CGColor); 
     //設(shè)置虛線寬度 
     CGContextSetLineWidth(currentContext, 1); 
     //設(shè)置虛線繪制起點(diǎn) 
     CGContextMoveToPoint(currentContext, 0, 0); 
     //設(shè)置虛線繪制終點(diǎn)
     CGContextAddLineToPoint(currentContext, self.frame.origin.x + self.frame.size.width, 0);
     //設(shè)置虛線排列的寬度間隔:下面的arr中的數(shù)字表示先繪制3個(gè)點(diǎn)再繪制1個(gè)點(diǎn)
     CGFloat arr[] = {3,1}; 
     //下面最后一個(gè)參數(shù)“2”代表排列的個(gè)數(shù)套菜。   
     CGContextSetLineDash(currentContext, 0, arr, 2); 
     CGContextDrawPath(currentContext, kCGPathStroke); 
}

看著這些代碼肯定有一部分人頭疼,因?yàn)橐话汩_發(fā)繪圖部分用的比較少设易,特別是很少接觸這些東西的人逗柴,甚至對(duì)繪圖這部分的只是已經(jīng)忘光了,所以在這里自己也腦補(bǔ)一下顿肺。
以下來(lái)自轉(zhuǎn)載

iOS的繪圖操作是在UIView類的drawRect方法中完成的戏溺,所以如果我們要想在一個(gè)UIView中繪圖渣蜗,需要寫一個(gè)擴(kuò)展UIView 的類,并重寫drawRect方法于购,在這里進(jìn)行繪圖操作袍睡,程序會(huì)自動(dòng)調(diào)用此方法進(jìn)行繪圖。下面先說明一下繪圖肋僧,比如斑胜,你想繪制一個(gè)方塊,你需要寫一個(gè)類來(lái)擴(kuò)展UIView并在drawRect方法中填入如下代碼:

- (void)drawRect:(CGRect)rect {      
    // Drawing code.      
    //獲得處理的上下文        
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    //設(shè)置線條樣式        
    CGContextSetLineCap(context, kCGLineCapSquare); 
    //設(shè)置線條粗細(xì)寬度        
    CGContextSetLineWidth(context, 1.0);             
    //設(shè)置顏色        
    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
    //開始一個(gè)起始路徑        
    CGContextBeginPath(context);         
    //起始點(diǎn)設(shè)置為(0,0):注意這是上下文對(duì)應(yīng)區(qū)域中的相對(duì)坐標(biāo)
    CGContextMoveToPoint(context, 0, 0);         
    //設(shè)置下一個(gè)坐標(biāo)點(diǎn) 
    CGContextAddLineToPoint(context, 100, 100);         
    //設(shè)置下一個(gè)坐標(biāo)點(diǎn)
    CGContextAddLineToPoint(context, 0, 150);       
    //設(shè)置下一個(gè)坐標(biāo)點(diǎn)        
    CGContextAddLineToPoint(context, 50, 180);        
    //連接上面定義的坐標(biāo)點(diǎn) 
    CGContextStrokePath(context);  
 }  

再說明一下重繪嫌吠,重繪操作仍然在drawRect方法中完成止潘,但是蘋果不建議直接調(diào)用drawRect方法,當(dāng)然如果你強(qiáng)直直接調(diào)用此方法辫诅,當(dāng)然是沒有效果的凭戴。蘋果要求我們調(diào)用UIView類中的setNeedsDisplay方法,則程序會(huì)自動(dòng)調(diào)用drawRect方法進(jìn)行重繪(調(diào)用setNeedsDisplay會(huì)自動(dòng)調(diào)用drawRect)炕矮。
在UIView中,重寫drawRect: (CGRect) aRect方法,可以自己定義想要畫的圖案.且此方法一般情況下只會(huì)畫一次.也就是說這個(gè)drawRect方法一般情況下只會(huì)被掉用一次. 當(dāng)某些情況下想要手動(dòng)重畫這個(gè)View,只需要掉用[self setNeedsDisplay]方法即可.

drawRect的執(zhí)行順序及注意

drawRect調(diào)是在Controller->loadView, Controller->viewDidLoad 兩方法之后掉用的.

  1. 如果在UIView初始化時(shí)沒有設(shè)置rect大小么夫,將直接導(dǎo)致drawRect不被自動(dòng)調(diào)用。

  2. 該方法在調(diào)用sizeThatFits后被調(diào)用肤视,所以可以先調(diào)用sizeToFit計(jì)算出size档痪。然后系統(tǒng)自動(dòng)調(diào)用drawRect:方法。

  3. 通過設(shè)置contentMode屬性值為UIViewContentModeRedraw邢滑。那么將在每次設(shè)置或更改frame的時(shí)候自動(dòng)調(diào)用drawRect:腐螟。

  4. 直接調(diào)用setNeedsDisplay,或者setNeedsDisplayInRect:觸發(fā)drawRect:困后,但是有個(gè)前提條件是rect不能為0.

以上1,2推薦乐纸;而3,4不提倡

  1. 若使用UIView繪圖,只能在drawRect:方法中獲取相應(yīng)的contextRef并繪圖摇予。如果在其他方法中獲取將獲取到一個(gè)invalidate的ref并且不能用于畫圖汽绢。drawRect:方法不能手動(dòng)顯示調(diào)用,必須通過調(diào)用setNeedsDisplay 或者 setNeedsDisplayInRect 侧戴,讓系統(tǒng)自動(dòng)調(diào)該方法宁昭。
  2. 若使用calayer繪圖,只能在drawInContext: 中(類似魚drawRect)繪制救鲤,或者在delegate中的相應(yīng)方法繪制久窟。同樣也是調(diào)用setNeedDisplay等間接調(diào)用以上方法。
  3. 若要實(shí)時(shí)畫圖本缠,不能使用gestureRecognizer斥扛,只能使用touchbegan等方法來(lái)掉用setNeedsDisplay實(shí)時(shí)刷新屏幕
    轉(zhuǎn)載地址:
    http://blog.csdn.net/fww330666557/article/details/8647608
通過UIImage的繪圖方法來(lái)繪制
// 畫虛線
// 創(chuàng)建一個(gè)imageView 高度是你想要的虛線的高度 一般設(shè)為2
 _lineImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 20, kScreenWidth, 2)]; 
// 調(diào)用方法 返回的iamge就是虛線 
_lineImg.image = [self drawLineByImageView:_lineImg]; 
// 添加到控制器的view上 
[self.view addSubview:_lineImg];


// 返回虛線image的方法
- (UIImage *)drawLineByImageView:(UIImageView *)imageView{ 
      UIGraphicsBeginImageContext(imageView.frame.size); //開始畫線 劃線的frame 
      [imageView.image drawInRect:CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height)]; 
      //設(shè)置線條終點(diǎn)形狀 
      CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound); 
      // 5是每個(gè)虛線的長(zhǎng)度 1是高度 
      float lengths[] = {5,1}; 
      CGContextRef line = UIGraphicsGetCurrentContext(); 
      // 設(shè)置顏色 
      CGContextSetStrokeColorWithColor(line, [UIColor colorWithWhite:0.408 alpha:1.000].CGColor); 
      CGContextSetLineDash(line, 0, lengths, 2); //畫虛線
      CGContextMoveToPoint(line, 0.0, 2.0); //開始畫線
      CGContextAddLineToPoint(line, kScreenWidth - 10, 2.0);       

      CGContextStrokePath(line); 
      // UIGraphicsGetImageFromCurrentImageContext()返回的就是image 
      return UIGraphicsGetImageFromCurrentImageContext();
  }
通過CAShapeLayer方式繪制虛線
/**
  ** lineView:       需要繪制成虛線的view
  ** lineLength:     虛線的寬度
  ** lineSpacing:    虛線的間距 
  ** lineColor:      虛線的顏色
  **/
+ (void)drawDashLine:(UIView *)lineView lineLength:(int)lineLength lineSpacing:(int)lineSpacing lineColor:(UIColor *)lineColor
{    
      CAShapeLayer *shapeLayer = [CAShapeLayer layer];
      [shapeLayer setBounds:lineView.bounds];
      [shapeLayer setPosition:CGPointMake(CGRectGetWidth(lineView.frame) / 2, CGRectGetHeight(lineView.frame))];   
      [shapeLayer setFillColor:[UIColor clearColor].CGColor];  
      //  設(shè)置虛線顏色為blackColor    
      [shapeLayer setStrokeColor:lineColor.CGColor];   
      //  設(shè)置虛線寬度   
      [shapeLayer setLineWidth:CGRectGetHeight(lineView.frame)];    
      [shapeLayer setLineJoin:kCALineJoinRound];    
      //  設(shè)置線寬,線間距
      [shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:lineLength], [NSNumber numberWithInt:lineSpacing], nil]];   
      //  設(shè)置路徑    
      CGMutablePathRef path = CGPathCreateMutable();   
      CGPathMoveToPoint(path, NULL, 0, 0);  
      CGPathAddLineToPoint(path, NULL,CGRectGetWidth(lineView.frame), 0);
      [shapeLayer setPath:path];    
      CGPathRelease(path);   
      //  把繪制好的虛線添加上來(lái)   
      [lineView.layer addSublayer:shapeLayer];
  }

這部分代碼,有一個(gè)注意點(diǎn):就是position和anchorPoint的區(qū)別稀颁,這點(diǎn)有興趣的可以去腦補(bǔ)一下芬失。當(dāng)然layer上的繪圖,我也感覺自己很low了匾灶,因?yàn)樾问經(jīng)]用過棱烂,所以基本上快忘光了,所以自己也需要花時(shí)間去腦補(bǔ)一下阶女。
鏈接:http://wonderffee.github.io/blog/2013/10/13/understand-anchorpoint-and-position/

圖片平鋪(簡(jiǎn)單暴力)
UIImageView *imgDashLineView =[[UIImageView alloc] initWithFrame:CGRectMake(15, 200, self.view.frame.size.width - 30, 1)];
[imgDashLineView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"xuxian.png"]]];
[self.view addSubview:imgDashLineView];

寫完這篇博客颊糜,感覺自己現(xiàn)在繪圖基本忘光了,突然感覺好low的樣子……

歡迎關(guān)注我的個(gè)人微信公眾號(hào)秃踩,免費(fèi)送計(jì)算機(jī)各種最新視頻資源衬鱼!你想象不到的精彩!


0.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末憔杨,一起剝皮案震驚了整個(gè)濱河市鸟赫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌消别,老刑警劉巖抛蚤,帶你破解...
    沈念sama閱讀 210,914評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異寻狂,居然都是意外死亡岁经,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評(píng)論 2 383
  • 文/潘曉璐 我一進(jìn)店門荆虱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蒿偎,“玉大人朽们,你說我怎么就攤上這事怀读。” “怎么了骑脱?”我有些...
    開封第一講書人閱讀 156,531評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵菜枷,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我叁丧,道長(zhǎng)啤誊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評(píng)論 1 282
  • 正文 為了忘掉前任拥娄,我火速辦了婚禮蚊锹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘稚瘾。我一直安慰自己牡昆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,381評(píng)論 5 384
  • 文/花漫 我一把揭開白布摊欠。 她就那樣靜靜地躺著丢烘,像睡著了一般柱宦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上播瞳,一...
    開封第一講書人閱讀 49,730評(píng)論 1 289
  • 那天掸刊,我揣著相機(jī)與錄音,去河邊找鬼赢乓。 笑死忧侧,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的牌芋。 我是一名探鬼主播苍柏,決...
    沈念sama閱讀 38,882評(píng)論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼姜贡!你這毒婦竟也來(lái)了试吁?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,643評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤楼咳,失蹤者是張志新(化名)和其女友劉穎熄捍,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體母怜,經(jīng)...
    沈念sama閱讀 44,095評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡余耽,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,448評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了苹熏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碟贾。...
    茶點(diǎn)故事閱讀 38,566評(píng)論 1 339
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖轨域,靈堂內(nèi)的尸體忽然破棺而出袱耽,到底是詐尸還是另有隱情,我是刑警寧澤干发,帶...
    沈念sama閱讀 34,253評(píng)論 4 328
  • 正文 年R本政府宣布朱巨,位于F島的核電站,受9級(jí)特大地震影響枉长,放射性物質(zhì)發(fā)生泄漏冀续。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,829評(píng)論 3 312
  • 文/蒙蒙 一必峰、第九天 我趴在偏房一處隱蔽的房頂上張望洪唐。 院中可真熱鬧,春花似錦吼蚁、人聲如沸凭需。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)功炮。三九已至溅潜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間薪伏,已是汗流浹背滚澜。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫁怀,地道東北人设捐。 一個(gè)月前我還...
    沈念sama閱讀 46,248評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像塘淑,于是被迫代替她去往敵國(guó)和親萝招。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,440評(píng)論 2 348

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

  • Core Graphics Framework是一套基于C的API框架存捺,使用了Quartz作為繪圖引擎槐沼。它提供了低...
    ShanJiJi閱讀 1,516評(píng)論 0 20
  • 轉(zhuǎn)載:http://www.reibang.com/p/32fcadd12108 每個(gè)UIView有一個(gè)伙伴稱為l...
    F麥子閱讀 6,167評(píng)論 0 13
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜捌治,今天將帶大家一窺ios動(dòng)畫全貌岗钩。在這里你可以看...
    每天刷兩次牙閱讀 8,469評(píng)論 6 30
  • 每個(gè)UIView有一個(gè)伙伴稱為layer,一個(gè)CALayer肖油。UIView實(shí)際上并沒有把自己畫到屏幕上;它繪制本身...
    shenzhenboy閱讀 3,088評(píng)論 0 17
  • WenryXu閱讀 2,264評(píng)論 0 1