1. 程式人生 > >使用CAShapeLayer的path屬性與UIBezierPath畫出掃描框

使用CAShapeLayer的path屬性與UIBezierPath畫出掃描框

</pre><pre code_snippet_id="1663153" snippet_file_name="blog_20160426_2_349623" name="code" class="objc">//
//  cameraView.m
//  bezierPath
//
//  Created by admin on 16/4/26.
//  Copyright © 2016年 tinghou. All rights reserved.
//
//顏色
#define Color [UIColor colorWithRed:237/255.0 green:82/255.0 blue:41/255.0 alpha:1]

#import "cameraView.h"
//#import "Tools.h"
@implementation cameraView

-(id)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    if (self) {
        
        // 中間空心洞的區域
        self.cutRect = CGRectMake(CGRectGetMidX(frame) - 115,
                                  CGRectGetMidY(frame) - 115 - 30,
                                  230,
                                  230);
       
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
 // 挖空心洞 顯示區域
        UIBezierPath *cutRectPath = [UIBezierPath bezierPathWithRect:self.cutRect];
//        將circlePath新增到path上
        [path appendPath:cutRectPath];
        path.usesEvenOddFillRule = YES;
        
        CAShapeLayer *fillLayer = [CAShapeLayer layer];
        fillLayer.path = path.CGPath;
        fillLayer.fillRule = kCAFillRuleEvenOdd;
        fillLayer.opacity = 0.5;//透明度
        fillLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
        [self.layer addSublayer:fillLayer];
        
        // 邊界校準線
        const CGFloat lineWidth = 2;
        UIBezierPath *linePath = [UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x - lineWidth,
                                                                             self.cutRect.origin.y - lineWidth,
                                                                             self.cutRect.size.width / 4.0,
                                                                             lineWidth)];
//        追加路徑
        [linePath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x - lineWidth,
                                                                         self.cutRect.origin.y - lineWidth,
                                                                         lineWidth,
                                                                         self.cutRect.size.height / 4.0)]];
        
        [linePath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x + 230 - self.cutRect.size.width / 4.0 + lineWidth,
                                                                         self.cutRect.origin.y - lineWidth,
                                                                         self.cutRect.size.width / 4.0,
                                                                         lineWidth)]];
        [linePath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x + 230 ,
                                                                         self.cutRect.origin.y - lineWidth,
                                                                         lineWidth,
                                                                         self.cutRect.size.height / 4.0)]];
        
        [linePath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x - lineWidth,
                                                                         self.cutRect.origin.y + 230 - self.cutRect.size.height / 4.0 + lineWidth,
                                                                         lineWidth,
                                                                         self.cutRect.size.height / 4.0)]];
        [linePath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x - lineWidth,
                                                                         self.cutRect.origin.y + 230,
                                                                         self.cutRect.size.width / 4.0,
                                                                         lineWidth)]];
        
        [linePath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x + 230,
                                                                         self.cutRect.origin.y + 230 - self.cutRect.size.height / 4.0 + lineWidth,
                                                                         lineWidth,
                                                                         self.cutRect.size.height / 4.0)]];
        [linePath appendPath:[UIBezierPath bezierPathWithRect:CGRectMake(self.cutRect.origin.x + 230 - self.cutRect.size.width / 4.0 + lineWidth,
                                                                         self.cutRect.origin.y + 230,
                                                                         self.cutRect.size.width / 4.0,
                                                                                                      lineWidth)]];
        
        CAShapeLayer *pathLayer = [CAShapeLayer layer];
        pathLayer.path = linePath.CGPath;// 從貝塞爾曲線獲取到形狀
        pathLayer.fillColor = Color.CGColor; // 閉環填充的顏色
//        pathLayer.lineCap       = kCALineCapSquare;               // 邊緣線的型別
//        pathLayer.strokeColor = [UIColor blueColor].CGColor; // 邊緣線的顏色
//        pathLayer.lineWidth     = 4.0f;                           // 線條寬度
        [self.layer addSublayer:pathLayer];
        
//        掃描條動畫
        UIImageView *line = [[UIImageView alloc] initWithFrame:CGRectMake(self.cutRect.origin.x,
                                                                          self.cutRect.origin.y,
                                                                          self.cutRect.size.width,
                                                                          lineWidth)];
        line.image = [[UIImage imageNamed:@"line"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
        line.tintColor = Color;
        [self addSubview:line];
        
        // 上下游走動畫
        CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
        animation.fromValue = @0;
        animation.toValue = [NSNumber numberWithFloat:self.cutRect.size.height];
        animation.autoreverses = YES;
        animation.duration = 3;
        animation.repeatCount = FLT_MAX;
        [line.layer addAnimation:animation forKey:nil];


4.效果