放大镜效果

标签: 放大镜 界面 uiview
211人阅读 评论(0) 收藏 举报
分类:

放大镜视图类
WXMagnifierView.h

@interface WXMagnifierView : UIWindow

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

//触摸点
@property(nonatomic)CGPoint pointTomagnify;

@end

WXMagnifierView.m

@interface WXMagnifierView ()

@property (nonatomic, strong) CALayer *contentLayer;

@end


@implementation WXMagnifierView

-(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];

}

在需要的viewControlller中


//定义一个放大镜
@property (strong, nonatomic)WXMagnifierView *magnifierView;
//长按手势,实现放大镜
    UILongPressGestureRecognizer * pressGesTure = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(magniFierAction:)];

    self.msgLabel.userInteractionEnabled = YES;

    [self.msgLabel addGestureRecognizer:pressGesTure];
    [self magniFierAction:pressGesTure];
#pragma 放大镜
- (void)magniFierAction:(UILongPressGestureRecognizer *)gesture
{

    NSLog(@"长按手势");

    //获取手势位置

    CGPoint point = [gesture locationInView:self];

    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
-(WXMagnifierView *)magnifierView
{
    if (! _magnifierView) {

        _magnifierView = [[WXMagnifierView alloc]init];

        _magnifierView.magnifyView = self.window;
    }

    return _magnifierView;
}
查看评论

js实现淘宝放大镜效果

记得很久以前,小编就准备写个放大镜,但是种种原因导致,一直没有完成这个愿望,下面,让我们一起来实现这个常见的功能吧。 不懂的同学,可能认为这很难细实现,觉得它很博大精深的样子,其实真了解他了,...
  • YZi_Angel
  • YZi_Angel
  • 2016-08-25 21:42:57
  • 6020

ios 自制放大镜效果demo

  • 2013年07月15日 16:45
  • 254KB
  • 下载

html 放大镜效果

还是用到html还有css,写的非常简单,很容易懂,就不多废话了 代码如下:                                             #sm...
  • HUSHILIN001
  • HUSHILIN001
  • 2017-04-20 00:19:35
  • 371

Android 自定义View之放大镜效果

记录学习自定义view过程 1.主体代码 public class ZoomImageView extends View { //放大倍数 private sta...
  • yeyuewushang
  • yeyuewushang
  • 2017-07-25 14:49:37
  • 464

js 基础 ---实现放大镜的效果

js 基础 ---实现放大镜的效果 能利用原生的js是非常重要的,所以对于仿照电商的商品放大图做出了这个放大镜 的效果。在这个例子中,放大镜跟随着鼠标的移动而移动,大盒的图片移动方向与小盒子图片的移动...
  • b1244154318
  • b1244154318
  • 2016-07-19 00:08:08
  • 3196

JS实现放大镜效果

经常浏览淘宝、京东等一些商城网站,都会看到各种各样的页面动态效果图,今天终于花了时间实现了下“放大镜效果” 说起放大镜,无非就是对两张图片的操作,内容相同、大小不同的两张图片,注:小图片的长宽与大图...
  • u011407281
  • u011407281
  • 2015-11-09 17:49:06
  • 2139

仿京东产品轮播带放大镜效果

  • 2016年03月19日 11:40
  • 421KB
  • 下载

【HTML5】Canvas 实现放大镜效果

图片放大镜效果在线演示    源码原理首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示:...
  • zhangjk1993
  • zhangjk1993
  • 2016-10-10 10:48:36
  • 3428

JavaScript实现放大镜效果demo

JavaScript实例: 图片放大镜效果
  • actdl
  • actdl
  • 2015-06-03 23:53:57
  • 458

【原生JS】简单放大镜效果

演示地址:点我 * { margin: 0; p...
  • zuncle
  • zuncle
  • 2017-02-08 16:39:20
  • 1456
    个人资料
    持之以恒
    等级:
    访问量: 3万+
    积分: 1343
    排名: 3万+
    最新评论