詳解iOS App中圖片的線段涂鴉功能的添加方法
接下來(lái)我們要講圖片的涂鴉,我們分開(kāi)一點(diǎn)一點(diǎn)拓展,先給圖片上劃線
創(chuàng)建項(xiàng)目 起名testAddLine
接下來(lái)我們?cè)谀J(rèn)生成的ViewController中添加一張圖片 待用
同時(shí)添加一個(gè)按鈕
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UIImageView *imageV = [[UIImageView alloc]initWithFrame:CGRectMake(10, 120, screen_Width-20, screen_Height-150)];
imageV.image = [UIImage imageNamed:@"640-960-1.jpg"];
[self.view addSubview:imageV];
UIButton *testBtn = [[UIButton alloc]initWithFrame:CGRectMake(screen_Width/2.0-60, 60, 120, 36)];
[testBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[testBtn setTitle:@"添加直線" forState:UIControlStateNormal];
[testBtn addTarget:self action:@selector(addLineAct:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:testBtn];
}
- (void)addLineAct:(id)sender{
NSLog(@"測(cè)試按鈕");
}
接下來(lái)我們創(chuàng)建一個(gè)UIView 用來(lái)添加直線 起名:DrawLine
創(chuàng)建幾個(gè)變量
@property(nonatomic,strong) NSMutableArray * completeLines; //已經(jīng)畫(huà)好的線條 存入數(shù)組
@property(nonatomic,strong) NSMutableDictionary* LinesInProscess; //正在畫(huà)的線條 存入字典
@property(nonatomic,strong) UIColor *lineColor;//線條顏色
@property (nonatomic)float lineWidth;//線條的粗細(xì)
初始化DrawLine
//初始化
- (id)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
//初始化變量
_completeLines = [[NSMutableArray alloc]init];
_LinesInProscess = [[NSMutableDictionary alloc]init];
//設(shè)置透明背景
self.backgroundColor = [UIColor clearColor];
}
return self;
}
我們把線條單獨(dú)抽象出來(lái) 創(chuàng)建一個(gè)類(lèi) 創(chuàng)建對(duì)象 起名 Line
線條 兩個(gè)屬性 起始點(diǎn) 結(jié)束點(diǎn)(這就是數(shù)學(xué)中的兩點(diǎn)確定一條直線)
給Line 類(lèi)創(chuàng)建兩個(gè)屬性
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface Line : NSObject
@property(nonatomic)CGPoint begin; //線條開(kāi)始點(diǎn)
@property(nonatomic)CGPoint end; //線條結(jié)束點(diǎn)
@end
接下來(lái) 我們重寫(xiě)DrawLine 的 drawRect 方法 繪制線條
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
//獲取上下文
CGContextRef cgt=UIGraphicsGetCurrentContext();
//設(shè)置線條寬度
CGContextSetLineWidth(cgt, self.lineWidth);
//設(shè)置線條兩端形狀為圓角
CGContextSetLineCap(cgt, kCGLineCapRound);
//設(shè)置顏色
[self.lineColor set];
//繪制已經(jīng)完成的線段
for (Line *line in _completeLines){
CGContextMoveToPoint(cgt, [line begin].x, [line begin].y);
CGContextAddLineToPoint(cgt, [line end].x, [line end].y );
CGContextStrokePath(cgt);
}
//繪制正在畫(huà)的線段
for (NSArray *v in _LinesInProscess) {
Line *line =[_LinesInProscess objectForKey:v];
CGContextMoveToPoint(cgt, [line begin].x, [line begin].y);
CGContextAddLineToPoint(cgt, [line end].x, [line end].y );
CGContextStrokePath(cgt);
}
}
實(shí)現(xiàn)幾個(gè)手指滑動(dòng)方法 用來(lái)接受手指的位置畫(huà)線
//清空畫(huà)板
-(void)clearAll
{
[_completeLines removeLastObject];
[_LinesInProscess removeAllObjects];
[self setNeedsDisplay];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//判斷是否連按
for (UITouch *t in touches) {
if ([t tapCount]>1) {
//第二次畫(huà)線時(shí)第一條線還未完成時(shí)結(jié)束畫(huà)線
[self clearAll];
return;
}
//NSValue 作為鍵使用
NSValue *key=[NSValue valueWithNonretainedObject:t];
// 根據(jù)觸摸位置創(chuàng)建Line對(duì)象
CGPoint loc=[t locationInView:self];
Line *newLine=[[Line alloc]init ];
newLine.begin=loc;
newLine.end=loc;
//將當(dāng)前正在畫(huà)的線存入字典
[_LinesInProscess setObject:newLine forKey:key];
}
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//手指移動(dòng)過(guò)程中按照當(dāng)前手指的位置動(dòng)態(tài)更新線條
for (UITouch * t in touches) {
NSValue *key=[NSValue valueWithNonretainedObject:t];
// 找對(duì)象當(dāng)前UITouch對(duì)象的Line對(duì)象
Line *line =[_LinesInProscess objectForKey:key];
CGPoint loc=[t locationInView:self];
line.end=loc;
}
[self setNeedsDisplay];
}
-(void)endTouches:(NSSet *) touches
{
//畫(huà)線完成之后將當(dāng)前線條加入_completeLines 數(shù)組中 同時(shí)刪除字典_LinesInProscess里的線條
for (UITouch *t in touches) {
NSValue *key=[NSValue valueWithNonretainedObject:t];
Line *line =[_LinesInProscess objectForKey:key];
if (line) {
[_completeLines addObject:line];
[_LinesInProscess removeObjectForKey:key];
}
}
[self setNeedsDisplay];
}
-(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
[self endTouches:touches];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[self endTouches:touches];
}
回到 ViewController中 給按鈕點(diǎn)擊事件中 添加DrawLine到ImageView上
- (void)addLineAct:(id)sender{
NSLog(@"測(cè)試按鈕");
DrawLine *touchdrawView = [[DrawLine alloc]initWithFrame:imageV.frame];
touchdrawView.lineColor = [UIColor yellowColor];
touchdrawView.lineWidth = 5.0;
touchdrawView.tag = 902;
[self.view addSubview:touchdrawView];
}
好了 運(yùn)行程序試試
點(diǎn)擊 添加直線 按鈕之后 試試在圖片上畫(huà)線
帶剪頭的線條
在上面例子的基礎(chǔ)上稍微拓展一下,給線段末尾加上一個(gè)箭頭
給DrawLine 類(lèi)中添的方法 drawRect 中添加一段代碼
//添加剪頭
double r = sqrt((line.end.x-line.begin.x)*(line.end.x-line.begin.x)+(line.begin.y-line.end.y)*(line.begin.y-line.end.y));//線條長(zhǎng)度
CGContextMoveToPoint(cgt,line.end.x,line.end.y);
//P1
CGContextAddLineToPoint(cgt,line.end.x-(10*(line.begin.y-line.end.y)/r),line.end.y-(10*(line.end.x-line.begin.x)/r));
//P3
CGContextAddLineToPoint(cgt,line.end.x+(20*(line.end.x-line.begin.x)/r), line.end.y-(20*(line.begin.y-line.end.y)/r));
//P2
CGContextAddLineToPoint(cgt,line.end.x+(10*(line.begin.y-line.end.y)/r),line.end.y+(10*(line.end.x-line.begin.x)/r));
CGContextAddLineToPoint(cgt, line.end.x,line.end.y);
CGContextDrawPath(cgt,kCGPathFillStroke);
CGContextStrokePath(cgt);
以上方法的思路 就是在線段畫(huà)完之后 確定三個(gè)點(diǎn) 畫(huà)一個(gè)三角形作為箭頭形狀
相關(guān)文章
iOS CoreMotion實(shí)現(xiàn)設(shè)備運(yùn)動(dòng)加速度計(jì)陀螺儀
這篇文章主要介紹了iOS CoreMotion實(shí)現(xiàn)設(shè)備運(yùn)動(dòng)加速度計(jì)陀螺儀,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12詳解IOS 利用storyboard修改UITextField的placeholder文字顏色
這篇文章主要介紹了詳解IOS 利用storyboard修改UITextField的placeholder文字顏色的相關(guān)資料,希望通過(guò)本文能實(shí)現(xiàn)這樣類(lèi)似的功能,需要的朋友可以參考下2017-08-08iOS開(kāi)發(fā)中使app獲取本機(jī)通訊錄的實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了iOS開(kāi)發(fā)中使app獲取本機(jī)通訊錄的實(shí)現(xiàn)代碼實(shí)例,主要用到了AddressBook.framework和AddressBookUI.framework,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-01-01iOS程序開(kāi)發(fā)之使用PlaceholderImageView實(shí)現(xiàn)優(yōu)雅的圖片加載效果
這篇文章主要介紹了ioS程序開(kāi)發(fā)之使用PlaceholderImageView實(shí)現(xiàn)優(yōu)雅的圖片加載效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09iOS開(kāi)發(fā)系列--詳細(xì)講解C語(yǔ)言之存儲(chǔ)方式和作用域
本篇文章主要介紹了iOS開(kāi)發(fā)系列--詳細(xì)講解C語(yǔ)言之存儲(chǔ)方式和作用域,具有一定的參考價(jià)值,有需要的可以了解一下。2016-11-11ios開(kāi)發(fā)Flutter構(gòu)建todo?list應(yīng)用
這篇文章主要為大家介紹了ios開(kāi)發(fā)Flutter構(gòu)建todo?list應(yīng)用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09詳解ios中的SQL數(shù)據(jù)庫(kù)文件加密 (使用sqlcipher)
本篇文章主要介紹了ios中的SQL數(shù)據(jù)庫(kù)文件加密 (使用sqlcipher),具有一定的參考價(jià)值,這里整理了詳細(xì)的代碼,感興趣的小伙伴們可以參考一下。2016-12-12實(shí)例講解iOS中的UIPageViewController翻頁(yè)視圖控制器
UIPageViewController更像是一個(gè)視圖容器,將每頁(yè)不同的ViewController整合,這里我們將以實(shí)例講解iOS中的UIPageViewController翻頁(yè)視圖控制器:2016-06-06iOS對(duì)數(shù)組進(jìn)行排序的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家講解了ios對(duì)數(shù)組進(jìn)行排序的實(shí)例方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-08-08