代码实现引导页遮罩（1）---绘制箭头算法

引导页基本是每个项目都需要的，比如上个新功能需要引导用户点击某个按钮进入某个页面再点击某个按钮啥的。我们一般做法都是通过一组图片来完成这些的？我以前也是这样做的，但是总觉的不够好，1.每个分辨率要有一套图，而且这种图基本都是全屏图，如果宽高比不完全一致一点也不能将就的，每套图片都是不小。2.不是真实界面一些动态数据肯定会不那么一致。所以就想着用真实界面，在上面绘制遮罩引导。就有了下面的2个类了。一个是箭头，一个是绘制高亮可点击的那部分。

新建HJArrowView类，代码如下：

/*

画虚线箭头和实线箭头

传入参数（起点坐标，终点坐标，父view）

案例：

HJArrowView *arrowView=[[HJArrowView alloc]initWithFrame:_view.frame];

arrowView.startP=CGPointMake(180, 150);

arrowView.endP=CGPointMake(280, 50);

[arrowView drawLine:_view];

2016年3月1号jing

*/

#import

typedefNS_ENUM(NSInteger, HJArrowType)

{

HJArrowTypeDash,//虚线

HJArrowTypeLine//实线

};

@interfaceHJArrowView :UIView

@property(nonatomic,assign)CGPointstartP;//起点坐标

@property(nonatomic,assign)CGPointendP;//终点坐标

@property(nonatomic,assign)HJArrowTypearrowType;

-(void)drawDash:(UIView*)_subView;//画虚线

-(void)drawLine:(UIView*)_subView;//画实线

@property(nonatomic,assign)CGPointimgPoint;//图片坐标

@property(nonatomic,assign)UIImageOrientationorientation;//图片角度

-(void)imageArrow:(UIView*)_subView;//图片箭头

@end

#import"HJArrowView.h"

@interfaceHJArrowView()

@property(assign)CGPointleftPoint;

@property(assign)CGPointrightPoint;

@end

@implementationHJArrowView

#define pi3.14159265358979323846

#define degreesToRadian(x) (pi * x /180.0)

#define radiansToDegrees(x) (180.0* x / pi)

#define radian45//张开的角度

#define radius15//半径也就是箭头的长度

- (instancetype)initWithFrame:(CGRect)frame

{

self= [superinitWithFrame:frame];

if(self) {

[selfsetup];

}

returnself;

}

- (void)setup

{

self.backgroundColor= [UIColorclearColor];

[selfsetUserInteractionEnabled:NO];

}

-(void)dealloc{

NSLog(@"===HJArrowView===dealloc===");

}

// Only override drawRect: if you perform custom drawing.

// An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect {

// Drawing code

CGContextRefcontext =UIGraphicsGetCurrentContext();

if(context ==nil) {

return;

}

//[[[UIColor redColor] colorWithAlphaComponent:0.5f] setFill];

//UIRectFill(rect);

if(self.arrowType==HJArrowTypeDash){

CGContextBeginPath(context);

CGContextSetLineWidth(context,1.0);

CGContextSetStrokeColorWithColor(context, [UIColorwhiteColor].CGColor);

CGFloatlengths[] = {10,10};

CGContextSetLineDash(context,0, lengths,2);

CGContextMoveToPoint(context,self.startP.x,self.startP.y);

CGContextAddLineToPoint(context,self.endP.x,self.endP.y);

CGContextMoveToPoint(context,self.endP.x,self.endP.y);//起点坐标

CGContextAddLineToPoint(context,self.rightPoint.x,self.rightPoint.y);//终点坐标

CGContextMoveToPoint(context,self.endP.x,self.endP.y);//起点坐标

CGContextAddLineToPoint(context,self.leftPoint.x,self.leftPoint.y);//终点坐标

//CGContextStrokePath(context);

CGContextClosePath(context);

CGContextDrawPath(context,kCGPathFillStroke);

}elseif(self.arrowType==HJArrowTypeLine){

CGContextSetLineCap(context,kCGLineCapRound);

CGContextSetLineWidth(context,1.0);//线宽

CGContextSetAllowsAntialiasing(context,true);

CGContextSetStrokeColorWithColor(context,[UIColorwhiteColor].CGColor);//线的颜色

CGContextBeginPath(context);

CGContextMoveToPoint(context,self.startP.x,self.startP.y);//起点坐标

CGContextAddLineToPoint(context,self.endP.x,self.endP.y);//终点坐标

CGContextMoveToPoint(context,self.endP.x,self.endP.y);//起点坐标

CGContextAddLineToPoint(context,self.rightPoint.x,self.rightPoint.y);//终点坐标

CGContextMoveToPoint(context,self.endP.x,self.endP.y);//起点坐标

CGContextAddLineToPoint(context,self.leftPoint.x,self.leftPoint.y);//终点坐标

//CGContextStrokePath(context);

CGContextClosePath(context);

CGContextDrawPath(context,kCGPathFillStroke);

}

}

#pragma mark //坐标计算

-(CGPoint)getArrowLeftPoint:(CGFloat)_radian{

CGPointpoint=CGPointMake(self.endP.x+radius*cos(degreesToRadian(-(radian+_radian))),self.endP.y+radius*sin(degreesToRadian(-(radian+_radian))));

returnpoint;

}

-(CGPoint)getArrowRightPoint:(CGFloat)_radian{

CGPointpoint=CGPointMake(self.endP.x+radius*cos(degreesToRadian((radian-_radian))),self.endP.y+radius*sin(degreesToRadian((radian-_radian))));

returnpoint;

}

//计算角度

-(CGFloat)angleBetweenPoints{

CGFloatheight =self.endP.y-self.startP.y;

CGFloatwidth =self.startP.x-self.endP.x;

CGFloatrads =atan(height/width);

CGFloatradians=radiansToDegrees(rads);

if(self.startP.x

radians=180+radians;

}

returnradians;

//degs = degrees(atan((top - bottom)/(right - left)))

}

//获取箭头的左右点

-(void)getArrowPoint{

CGFloatloc_radian=[selfangleBetweenPoints];//计算线的角度

self.leftPoint=[selfgetArrowLeftPoint:loc_radian];

self.rightPoint=[selfgetArrowRightPoint:loc_radian];

}

#pragma mark //public

//画虚线

-(void)drawDash:(UIView*)_subView{

self.arrowType=HJArrowTypeDash;

[selfgetArrowPoint];

[_subViewaddSubview:self];

}

//画实线

-(void)drawLine:(UIView*)_subView{

self.arrowType=HJArrowTypeLine;

[selfgetArrowPoint];

[_subViewaddSubview:self];

}

//图片箭头

-(void)imageArrow:(UIView*)_subView{

UIImageView*loc_imgView=[[UIImageViewalloc]initWithFrame:CGRectMake(self.imgPoint.x,self.imgPoint.y,108,112)];

//UIImage *loc_image=[UIImage imageWithCGImage:[UIImage imageNamed:@"ydArrow"].CGImage scale:1 orientation:self.orientation];

[loc_imgViewsetImage:[UIImageimageNamed:@"ydArrow"]];

[selfaddSubview:loc_imgView];

[_subViewaddSubview:self];

//旋转角度

//loc_imgView.transform=CGAffineTransformMakeRotation();

//翻转

if(self.orientation==UIImageOrientationRight){

loc_imgView.transform=CGAffineTransformMakeScale(-1.0,1.0);

}elseif(self.orientation==UIImageOrientationLeft){

loc_imgView.transform=CGAffineTransformMakeScale(-1.0,-1.0);

}elseif(self.orientation==UIImageOrientationDown){

loc_imgView.transform=CGAffineTransformMakeScale(1.0,-1.0);

}

}

//UIImage旋转－－－－目前没有用

+ (UIImage*)image:(UIImage*)image rotation:(UIImageOrientation)orientation

{

longdoublerotate =0.0;

CGRectrect;

floattranslateX =0;

floattranslateY =0;

floatscaleX =1.0;

floatscaleY =1.0;

switch(orientation) {

caseUIImageOrientationLeft:

rotate =M_PI_2;

rect =CGRectMake(0,0, image.size.height, image.size.width);

translateX =0;

translateY = -rect.size.width;

scaleY = rect.size.width/rect.size.height;

scaleX = rect.size.height/rect.size.width;

break;

caseUIImageOrientationRight:

rotate =3*M_PI_2;

rect =CGRectMake(0,0, image.size.height, image.size.width);

translateX = -rect.size.height;

translateY =0;

scaleY = rect.size.width/rect.size.height;

scaleX = rect.size.height/rect.size.width;

break;

caseUIImageOrientationDown:

rotate =M_PI;

rect =CGRectMake(0,0, image.size.width, image.size.height);

translateX = -rect.size.width;

translateY = -rect.size.height;

break;

default:

rotate =0.0;

rect =CGRectMake(0,0, image.size.width, image.size.height);

translateX =0;

translateY =0;

break;

}

UIGraphicsBeginImageContext(rect.size);

CGContextRefcontext =UIGraphicsGetCurrentContext();

//做CTM变换

CGContextTranslateCTM(context,0.0, rect.size.height);

CGContextScaleCTM(context,1.0, -1.0);

CGContextRotateCTM(context, rotate);

CGContextTranslateCTM(context, translateX, translateY);

CGContextScaleCTM(context, scaleX, scaleY);

//绘制图片

CGContextDrawImage(context,CGRectMake(0,0, rect.size.width, rect.size.height), image.CGImage);

UIImage*newPic =UIGraphicsGetImageFromCurrentImageContext();

returnnewPic;

}

@end