自定义截图控件

来源:转载


有时候项目里可能会有图片裁剪的需求,比如美图秀秀,就有这个功能:



美图秀秀.jpg

根据这个功能,我写了一个自定义控件,效果如下:



自定义截图控件.png

可设置截图框的最小宽度和高度,每当裁剪框拖动结束后都会回调代理方法,传递裁剪框的frame,当然你也可以自己添加一个block来回调。


创建自定义控件的思路

使用- (instancetype)initWithFrame:(CGRect)frame pictureFrame:(CGRect)picFrame方法初始化这个控件,其中frame是控件的大小,picFrame是剪切框的大小。建议使用时把frame设置为被截图片的bounds,这样能够保证截图框不会超出图片范围。


初始化完成之后,开始绘制控件。


- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 黑色半透明底色和透明截图框
[[UIColor colorWithWhite:0.0 alpha:0.5] setFill];
CGContextFillRect(ctx, self.bounds);
CGContextClearRect(ctx, self.cutFrame);
// 红色边框
[[UIColor redColor] setStroke];
CGContextAddRect(ctx, self.cutFrame);
CGContextStrokePath(ctx);
// 四个圆点
[[UIColor greenColor] set];
CGContextAddArc(ctx, cornerPoint.TopLeftPoint.x, cornerPoint.TopLeftPoint.y, 8.0, 0, 2*M_PI, 0);
CGContextDrawPath(ctx, kCGPathFillStroke);
CGContextAddArc(ctx, cornerPoint.TopRightPoint.x, cornerPoint.TopRightPoint.y, 8.0, 0, 2*M_PI, 0);
CGContextDrawPath(ctx, kCGPathFillStroke);
CGContextAddArc(ctx, cornerPoint.BottomLeftPoint.x, cornerPoint.BottomLeftPoint.y, 8.0, 0, 2*M_PI, 0);
CGContextDrawPath(ctx, kCGPathFillStroke);
CGContextAddArc(ctx, cornerPoint.BottomRightPoint.x, cornerPoint.BottomRightPoint.y, 8.0, 0, 2*M_PI, 0);
CGContextDrawPath(ctx, kCGPathFillStroke);
}

这段代码就把创建的自定义控件画出来了,只是还不能用。想要使用它,就得重写“触摸”的方法,有以下三个“触摸”方法:
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event


自定义控件之所以能够与用户交互,就是因为这三个方法,这三个方法能够获取用户在屏幕上触摸和移动时的坐标。创建一些成员变量,记录这些坐标,在drawRect方法中根据这些坐标重绘控件。


至于这三个“触摸”方法中写什么代码,要根据具体需求来考虑,每个自定义控件都不相同。创建的自定义控件用起来是否自然流畅,大多都是看着三个方法里的代码的。


这个自定义截图控件中,我在- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event里判断用户是拉伸截图框还是移动截图框;在- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event里计算拉伸或移动的距离,用成员变量记录下必要的参数,然后用[self setNeedsDisplay]调用drawRect方法重绘控件;在- (void)endTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event里回调代理方法,传递截图框的frame。


还有一些小的算法函数,这里就不一一介绍了,毕竟是自己写的渣算法。
完整的代码链接:https://github.com/JiaoYingBo/CustomView




分享给朋友:
您可能感兴趣的文章:
随机阅读: