前言
好幾天都沒有寫簡(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 兩方法之后掉用的.
如果在UIView初始化時(shí)沒有設(shè)置rect大小么夫,將直接導(dǎo)致drawRect不被自動(dòng)調(diào)用。
該方法在調(diào)用sizeThatFits后被調(diào)用肤视,所以可以先調(diào)用sizeToFit計(jì)算出size档痪。然后系統(tǒng)自動(dòng)調(diào)用drawRect:方法。
通過設(shè)置contentMode屬性值為UIViewContentModeRedraw邢滑。那么將在每次設(shè)置或更改frame的時(shí)候自動(dòng)調(diào)用drawRect:腐螟。
直接調(diào)用setNeedsDisplay,或者setNeedsDisplayInRect:觸發(fā)drawRect:困后,但是有個(gè)前提條件是rect不能為0.
以上1,2推薦乐纸;而3,4不提倡
- 若使用UIView繪圖,只能在drawRect:方法中獲取相應(yīng)的contextRef并繪圖摇予。如果在其他方法中獲取將獲取到一個(gè)invalidate的ref并且不能用于畫圖汽绢。drawRect:方法不能手動(dòng)顯示調(diào)用,必須通過調(diào)用setNeedsDisplay 或者 setNeedsDisplayInRect 侧戴,讓系統(tǒng)自動(dòng)調(diào)該方法宁昭。
- 若使用calayer繪圖,只能在drawInContext: 中(類似魚drawRect)繪制救鲤,或者在delegate中的相應(yīng)方法繪制久窟。同樣也是調(diào)用setNeedDisplay等間接調(diào)用以上方法。
- 若要實(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ī)各種最新視頻資源衬鱼!你想象不到的精彩!