天天看點

iOS 放大鏡效果

生活中能夠遇到很多應用有放大鏡效果,那我們如何完成呢?

效果展示

iOS 放大鏡效果
iOS 放大鏡效果

* 别急,多說無益,上代碼!*

首先我們要做的是建一個繼承于UIWindow的類

我把它冠以我的名字縮寫

WYHMagnifierView.h

/**************
 *            *
 * 放大鏡視圖類 *
 *            *
 *************/


#import <UIKit/UIKit.h>

@interface WYHMagnifierView : UIWindow

//放大框
@property(nonatomic,strong)UIView * magnifyView;

//觸摸點
@property(nonatomic)CGPoint pointTomagnify;

@end
           

WYHMagnifierView.m

#import "WYHMagnifierView.h"

@interface WYHMagnifierView ()

@property (nonatomic, strong) CALayer *contentLayer;

@end



@implementation WYHMagnifierView


-(instancetype)init
{
    self = [super init];

    if (self) {

        self.frame = CGRectMake(0, 0, 100, 50);

        self.backgroundColor = [UIColor clearColor];

        self.layer.borderWidth = 1;

        self.layer.borderColor = [UIColor   lightGrayColor].CGColor;

        self.layer.cornerRadius = 5;

        self.layer.masksToBounds = YES;

        self.windowLevel = UIWindowLevelAlert;

        self.contentLayer = [CALayer layer];

        self.contentLayer.frame = self.bounds;

        self.contentLayer.delegate = self;

        self.contentLayer.contentsScale = [[UIScreen mainScreen] scale];

        [self.layer addSublayer:self.contentLayer];

    }


    return self;
}


#pragma mark set the point of magnifier
-(void)setPointTomagnify:(CGPoint)pointTomagnify
{
    _pointTomagnify = pointTomagnify;

    CGPoint center = CGPointMake(pointTomagnify.x, self.center.y);

    if (pointTomagnify.y > CGRectGetHeight(self.bounds) * 0.5) {

        center.y = pointTomagnify.y - CGRectGetHeight(self.bounds)/2;
    }

    self.center = center;

    [self.contentLayer setNeedsDisplay];
}

#pragma mark  invoke  by setNeedDisplay
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{

    float width = CGRectGetWidth(self.frame);

    float height = CGRectGetHeight(self.frame);

    //寬高
    CGContextTranslateCTM(ctx,width * 0.5, height * 0.5);

    //縮放比例
    CGContextScaleCTM(ctx, 1.5, 1.5);

    //x y 坐标轉換
    CGContextTranslateCTM(ctx, -self.pointTomagnify.x , -self.pointTomagnify.y - 20);

    //截屏并顯示
    [self.magnifyView.layer renderInContext:ctx];

}
@end
           

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end
           

在ViewController的Storyboard上拉一個UILabel控件,

我寫的text是王顔華————一個喜歡Photoshop的程式媛,backgroundColor設定的粉色,哈哈哈!

然後關聯到下面的demoLabel屬性。

ViewController.m

#import "ViewController.h"
#import "WYHMagnifierView.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UILabel *demoLabel;

//放大鏡
@property (strong, nonatomic) CXYMagnifierView *magnifierView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];


    UILongPressGestureRecognizer * pressGesTure = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(magniFierAction:)];


    self.demoLabel.userInteractionEnabled = YES;

    [self.demoLabel addGestureRecognizer:pressGesTure];



}

- (void)magniFierAction:(UILongPressGestureRecognizer *)gesture
{

    NSLog(@"長按手勢");

    //擷取手勢位置

    CGPoint point = [gesture locationInView:self.view];

    switch (gesture.state) {
        case UIGestureRecognizerStateBegan:
        {

            //設定放大鏡位置

            [self magnifierPosition:point];

            //顯示放大鏡
            [self.magnifierView makeKeyAndVisible];


            break;
        }
            case UIGestureRecognizerStateChanged:
        {

            //設定放大鏡位置

            [self magnifierPosition:point];



            break;
        }
            case UIGestureRecognizerStateEnded:
        {
            //長按結束取消放大鏡

            self.magnifierView.hidden  =  YES;





            break;
        }
        default:
            break;
    }



}



-(void)magnifierPosition:(CGPoint )position
{
    CGPoint  point = position;

    point.y -= 25;

    position  =  point;

    self.magnifierView.pointTomagnify = point;


}


#pragma mark lazy laod
-(CXYMagnifierView *)magnifierView
{
    if (! _magnifierView) {

        _magnifierView = [[CXYMagnifierView alloc]init];

        _magnifierView.magnifyView = self.view.window;
    }


    return _magnifierView;
}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];

}

@end
           

好了 快拿起代碼運作一波兒看看效果吧~

注意我寫的是 長按 手勢哦~ 長按出效果~

iOS