跟着鼠標的移動連續畫線,可以根據選擇畫筆顏色,畫出多彩的線條
效果圖
根據按鈕顏色選擇畫筆顏色,畫出多彩圖形。
一、思路分析:連續畫線,最終的圖形是有多條間隔畫出的線條組成的,每條線又有不同的顏色。採用什麼樣的數據結構呢?
1.單個線條是由一個個的點和線條的顏色組成的,每個線條都一樣。可以將點存在一個可變數組中,移動的時候將走過的點加入數組中,整個線條存入一個字典中,字典中可以放點數組和顏色。
2.圖形由相同數據結構的線條組成,可將所有線條存入一個大的可變數組中
3.重繪圖形
二、實現:
.h中
1.一個可變數組存所有的線條,一個UIColor變量存選擇的顏色
{
NSMutableArray *lineArr;//線條數組
UIColor *colour;//選擇的顏色顏色
}
.m中
2.創建button及點擊事件
//點擊事件主要是改換畫筆的顏色,改換爲按鈕的背景色,取消按鈕的作用是將上一次畫的線刪除掉(從線數組中移除,然後重繪)
-(void)createButton
{
[_btnRedsetBackgroundColor:[UIColorredColor] ];
[_btnGreensetBackgroundColor:[UIColorgreenColor]];
[_btnOrangesetBackgroundColor:[UIColororangeColor]];
[_btnCancelsetTitle:@"取消"forState:UIControlStateNormal];
[_btnCancelsetBackgroundColor:[UIColorgrayColor]];
[_btnCancelsetTitleColor:[UIColorredColor] forState:UIControlStateNormal];
[_btnRedaddTarget:selfaction:@selector(btnColorAction:)forControlEvents:UIControlEventTouchUpInside];
[_btnGreenaddTarget:selfaction:@selector(btnColorAction:)forControlEvents:UIControlEventTouchUpInside];
[_btnOrangeaddTarget:selfaction:@selector(btnColorAction:)forControlEvents:UIControlEventTouchUpInside];
[_btnCanceladdTarget:selfaction:@selector(btnCancelAction)forControlEvents:UIControlEventTouchUpInside];
}
-(void)btnColorAction: (UIButton *)btn
{
//將線條顏色設爲按鈕的背景色
colour=btn.backgroundColor;
}
-(void)btnCancelAction
{
//從線條數組中移除最近繪製的線條,並重繪
[lineArrremoveLastObject];
[selfsetNeedsDisplay];
}
3.每次觸摸開始的時候獲得起始點,創建點數組,獲得選取的顏色,將點數組和顏色存入線字典當中- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch=[touches anyObject];
CGPoint beginPoint= [touch locationInView:self];//獲得起始點
NSValue *value=[NSValuevalueWithCGPoint:beginPoint];//轉化爲對象類型 ,這樣做是因爲點數組中存的是對象,而CGPoint是結構體類型,需要轉化後存入
NSMutableArray *pointArr=[NSMutableArrayarray];//創建線
[pointArr addObject:value];//存如當前線起點
NSDictionary *dic=[NSDictionarydictionaryWithObjectsAndKeys:pointArr, @"pointArr",colour,@"penColor",nil];//創建線字典
[lineArr addObject:dic];//當前線加入線數組
}
4.移動的時候,得到當前的線字典,從線字典中得到點數組,將經過的點存入點數組,重繪刷新
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch= [touches anyObject];
CGPoint movePoint= [touch locationInView:self];
NSValue *value= [NSValuevalueWithCGPoint:movePoint];
NSDictionary *lineDic=[lineArrlastObject];//獲得本線條字典
NSMutableArray *pointArr=[lineDic objectForKey:@"pointArr"];//獲得點數組
[pointArr addObject:value];//添加點
[selfsetNeedsDisplay];//重繪刷新
}
5.繪圖階段,依據線數組,得到每條線的點數組和相應的顏色,然後繪製路徑
-(void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context,3);
for (NSDictionary *lineDicin lineArr)//獲得線條
{
NSArray *pointArr=[lineDic objectForKey:@"pointArr"];//得到點數組
NSValue *firstObject= [pointArr firstObject];
CGPoint begintPoint=[firstObject CGPointValue];//獲得第一個點
CGContextMoveToPoint(context, begintPoint.x, begintPoint.y);
UIColor *lineColor=[lineDic objectForKey:@"penColor"];//獲得顏色
CGContextSetStrokeColorWithColor(context, lineColor.CGColor);//設置畫筆顏色
for (NSValue * valuein pointArr)
{
CGPoint point = [value CGPointValue];
CGContextAddLineToPoint(context, point.x, point.y);
}
CGContextStrokePath(context);
}
}