簡單繪圖(二)

跟着鼠標的移動連續畫線,可以根據選擇畫筆顏色,畫出多彩的線條

效果圖




根據按鈕顏色選擇畫筆顏色,畫出多彩圖形。

一、思路分析:連續畫線,最終的圖形是有多條間隔畫出的線條組成的,每條線又有不同的顏色。採用什麼樣的數據結構呢?

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

    }

}



發佈了11 篇原創文章 · 獲贊 3 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章