6D25F009-D4BA-4910-B37C-EAB07C4D11F4.png
我們想要在畫布上面畫東西擂煞,需要???吧,來煤辨,我們看看我們的畫筆
設(shè)置繪制直線沦偎、邊框時的線條寬度
1.void CGContextSetLineWidth(CGContextRef__nullable c, CGFloat width)
有畫筆了,我不能只用一個畫筆吧吹缔,應(yīng)該有很多畫筆讓我選吧商佑,快給我拿不同顏色的
2.CGContextSetRGBStrokeColor(context,1,1,1,1.0);//畫筆線的顏色
都選好了,該我畫了厢塘,我先來畫條直線玩玩吧茶没,我在那個地方畫呢
3.CGContextAddLines(ctx, point, 2);
point是什么玩意,它就是我們需要畫的位置俗冻,好了一切都準備好了礁叔,我要開始畫了,不對我畫在那個地方
4.CGContextRef ctx =UIGraphicsGetCurrentContext();
好像這次真的可以開工了
CGContextRef ctx =UIGraphicsGetCurrentContext();
CGContextSetLineWidth(ctx, 2.f);
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGPoint point[2];
point[0] =CGPointMake(10, 80);
point[1] =CGPointMake(100, 80);
CGContextAddLines(ctx, point, 2);
怎么搞的我都弄好了迄薄,怎么沒有線呢琅关,是不是筆沒有墨水啊,沒寫上去啊
5.CGContextDrawPath(ctx, kCGPathStroke); //根據(jù)坐標繪制路徑
這次果然有了讥蔽,伊涣易,kCGPathStroke這個是什么鬼,我把它拿出來瞅瞅
6.typedef CF_ENUM (int32_t, CGPathDrawingMode) {
kCGPathFill,//只有填充(非零纏繞數(shù)填充)冶伞,不繪制邊框 如圖1
kCGPathEOFill,//奇偶規(guī)則填充(多條路徑交叉時新症,奇數(shù)交叉填充,偶交叉不填充)如圖2
kCGPathStroke, // 只有邊框 如圖3
kCGPathFillStroke, // 既有邊框又有填充 如圖4
kCGPathEOFillStroke // 奇偶填充并繪制邊框 如圖5
};
這個不錯响禽,我畫好了還能幫我自動給我上色徒爹,我準備了那么多就讓我畫一個直線?來我要先畫個圓玩玩芋类,我要想想我要多大的圓隆嗅,畫在那個位置,開始畫圓吧
7.CGContextAddArc(CGContextRef cg_nullable c, CGFloat x, CGFloat y,
CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
// x,y為圓點坐標侯繁,radius半徑胖喳,startAngle為開始的弧度,endAngle為 結(jié)束的弧度贮竟,clockwise 0為順時針丽焊,1為逆時針。
CGContextAddArc(ctx, 30, 30, 20, 0, 2 *M_PI, 0);
CGContextDrawPath(ctx, kCGPathEOFillStroke); //根據(jù)坐標繪制路徑
呦呵咕别,為什么中間的一坨是黑色啊技健,忘了準備給它上的色選色了
8.CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
這樣一個很帥的圓就出現(xiàn)了,我想來個扇形玩玩惰拱,
CGContextAddArc(ctx, 80, 80, 30, 0, M_PI_2, 1);
CGContextDrawPath(ctx, kCGPathEOFillStroke); //根據(jù)坐標繪制路徑
一個方法而已雌贱,不好玩,來點有意思的好不好,畫個三角玩玩
9.CGPoint point3[3];
point3[0] =CGPointMake(10, 120);
point3[1] =CGPointMake(10, 150);
point3[2] =CGPointMake(40, 120);
CGContextAddLines(ctx, point3, 3);
CGContextClosePath(ctx);把幾個點封閉起來
CGContextSetLineCap(ctx, kCGLineCapSquare);設(shè)置線段端點的繪制形狀
CGContextSetLineJoin(ctx, kCGLineJoinBevel);設(shè)置線條連接點的風格
CGContextDrawPath(ctx, kCGPathStroke);
我以為有什么神奇的呢帽芽,這不就是上面的方法嘛,不行來個矩形翔冀,
10.CGContextFillRect(ctx, CGRectMake(50, 150, 30, 30));//填充顏色矩形导街,設(shè)置model是無效的
CGContextStrokeRect(CGContextRef cg_nullable c, CGRect rect)//填充邊框,設(shè)置model是無效的
CGContextAddRect(ctx, CGRectMake(90, 150, 40, 40));//這個是都有效的
你還別說纤子,這分類分的還挺好搬瑰,都給我們準備好樣式了,這樣的填充沒意思控硼,有沒有漸變式的顏色填充呢泽论?
11.CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)
gradient漸變顏色,startPoint開始漸變的起始位置,endPoint結(jié)束坐標,options開始坐標之前or開始之后開始漸變
一臉懵逼,都是些什么參數(shù)啊卡乾,CGGradientRef按CGContextRef的思路翼悴,需要獲取吧,問題是我們還沒創(chuàng)建去哪獲取啊幔妨,來創(chuàng)建一個再說
12.CGGradientRef gradient =CGGradientCreateWithColorComponents(rgb, color, NULL, sizeof(color)/(sizeof(color[0])*4));
rbb是什么鬼鹦赎,又沒創(chuàng)建
13.CGColorSpaceRef rgb =CGColorSpaceCreateDeviceRGB();這一下沒有要創(chuàng)建的了吧,搞個漸變那么費勁误堡,不爽吧
CGColorSpaceRef rgb =CGColorSpaceCreateDeviceRGB();
CGFloat color[] ={
1,1,1, 1.00,
1,1,0, 1.00,
1,0,0, 1.00,
1,0,1, 1.00,
0,1,1, 1.00,
0,1,0, 1.00,
0,0,1, 1.00,
0,0,0, 1.00,
};
CGGradientRef gradient =CGGradientCreateWithColorComponents(rgb, color, NULL, sizeof(color)/(sizeof(color[0])*4));
CGColorSpaceRelease(rgb);
CGContextSaveGState(ctx);
CGContextMoveToPoint(ctx, 220, 90);
CGContextAddLineToPoint(ctx, 240, 90);
CGContextAddLineToPoint(ctx, 240, 110);
CGContextAddLineToPoint(ctx, 220, 110);
CGContextClip(ctx);//context裁剪路徑,后續(xù)操作的路徑
CGContextDrawLinearGradient(ctx, gradient,CGPointMake
(220,90) ,CGPointMake(240,110),
kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(ctx);// 恢復(fù)到之前的context
14. CGContextSaveGState(ctx)古话,CGContextRestoreGState(ctx);// 恢復(fù)到之前的context這個又是什么鬼,聽我慢慢絮叨锁施,這個主要用于保存剪切的前后陪踩,剪切以后為了恢復(fù)原來的狀態(tài)
// 需要說明的是,CGContextSaveGState()函數(shù)保存的繪圖狀態(tài)悉抵,不僅包括當前坐標系統(tǒng)的狀態(tài)肩狂,也包括當前設(shè)置的填充風格、線條風格基跑、陰影風格等各種繪圖狀態(tài)婚温。但 CGContextSaveGState()函數(shù)不會保存當前繪制的圖形
這個玩意條件限制真不少,費了那么大的勁媳否,就讓我弄個矩形栅螟,不甘心,來再弄個圓形玩玩
15. CGContextDrawRadialGradient(ctx, gradient, CGPointMake(200, 200), 0.0, CGPointMake(200, 200), 40, kCGGradientDrawsBeforeStartLocation);
這個圓畫的還不錯篱竭,來個橢圓玩玩可好
16. CGContextAddEllipseInRect(ctx, CGRectMake(160, 180, 60, 30));
CGContextDrawPath(ctx, kCGPathFillStroke);
和圓幾乎差不多哦力图,突然感覺累了,再來倆個曲線結(jié)束
17.畫貝塞爾曲線
二次曲線
CGContextMoveToPoint(ctx, 120, 300);//設(shè)置Path的起點
CGContextAddQuadCurveToPoint(ctx,190, 310, 120, 390);//設(shè)置貝塞爾曲線的控制點坐標和終點坐標
CGContextDrawPath(ctx, kCGPathFillStroke);
18.三次曲線函數(shù)
CGContextMoveToPoint(ctx, 200, 300);//設(shè)置Path的起點
CGContextAddCurveToPoint(ctx,250, 280, 250, 400, 280, 300);//設(shè)置貝塞爾曲線的控制點坐標和控制點坐標終點坐標
CGContextDrawPath(ctx, kCGPathFillStroke);
來個??玩玩
EDE01ABB-12FB-4E60-8D38-8955CFC5F05E.png
CGContextRef ctx =UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGContextSetLineWidth(ctx, 3);
CGFloat lengths[] ={6,3};
CGContextSetLineDash(ctx, 0,lengths, 2);
CGContextSetStrokeColorWithColor(ctx, [UIColor yellowColor].CGColor);
CGContextSetFillColorWithColor(ctx, [UIColor grayColor].CGColor);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
// CGContextSetFlatness(ctx, 2);
// CGContextSetLineCap(ctx, kCGLineCapRound);
// CGContextSetMiterLimit(ctx, 0);
CGPoint point[3];
point[0]=CGPointMake(40, 100);
point[1]=CGPointMake(120, 100);
point[2]=CGPointMake(80, 130);
CGContextAddLines(ctx, point, 3);
CGContextClosePath(ctx);
CGPoint point1[4];
point1[0] =CGPointMake(56, 148);
point1[1] =CGPointMake(80, 100-20*sqrt(2));
point1[2] =CGPointMake(104, 148);
point1[3] =CGPointMake(80, 130);
CGContextAddLines(ctx, point1, 4);
CGContextClosePath(ctx);
// CGContextStrokePath(ctx);
// CGFloat color[] ={
// 1,1,1, 1.00,
// 1,1,0, 1.00,
// };
// CGFloat color[12]={
// 248.0/255.0,86.0/255.0,86.0/255.0,1,
// 249.0/255.0,127.0/255.0,127.0/255.0,1,
// 1.0,1.0,1.0,1.0
// };
CGFloat color[] ={
// 1,0,0,1,//紅
0,1,0,1,//綠
1,1,1,1};//藍
CGColorSpaceRef rgb =CGColorSpaceCreateDeviceRGB();
CGFloat locations[2] = {0,1};
CGGradientRef gradient =CGGradientCreateWithColorComponents(rgb, color, locations, 2);
CGColorSpaceRelease(rgb);
CGContextClip(ctx);
CGContextDrawLinearGradient(ctx, gradient, CGPointMake(40, 100), CGPointMake(120, 100), kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(ctx);
下面是關(guān)于果凍的動畫的鏈接
果凍鏈接