如何将放大镜添加到自定义控件?

时间:2012-11-11 12:08:59

标签: iphone ios ipad uiwebview magnification

如何将放大镜添加到自定义控件?控制是UIView的孩子。 (这是一个UIWebView - 但原生放大功能在某些页面上不起作用。)

更新:

也许可以在UIWebView上强制绘制放大镜?

2 个答案:

答案 0 :(得分:11)

1。将以下文件添加到项目中:

MagnifierView.h:

//
//  MagnifierView.h
//  SimplerMaskTest
//

#import <UIKit/UIKit.h>

@interface MagnifierView : UIView {
    UIView *viewToMagnify;
    CGPoint touchPoint;
}

@property (nonatomic, retain) UIView *viewToMagnify;
@property (assign) CGPoint touchPoint;

@end

MagnifierView.m:

//
//  MagnifierView.m
//  SimplerMaskTest
//

#import "MagnifierView.h"
#import <QuartzCore/QuartzCore.h>

@implementation MagnifierView
@synthesize viewToMagnify;
@dynamic touchPoint;

- (id)initWithFrame:(CGRect)frame {
    return [self initWithFrame:frame radius:118];
}

- (id)initWithFrame:(CGRect)frame radius:(int)r {
    int radius = r;

    if ((self = [super initWithFrame:CGRectMake(0, 0, radius, radius)])) {
        //Make the layer circular.
        self.layer.cornerRadius = radius / 2;
        self.layer.masksToBounds = YES;
    }

    return self;
}

- (void)setTouchPoint:(CGPoint)pt {
    touchPoint = pt;
    // whenever touchPoint is set, update the position of the magnifier (to just above what's being magnified)
    self.center = CGPointMake(pt.x, pt.y-66);
}

- (CGPoint)getTouchPoint {
    return touchPoint;
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect bounds = self.bounds;
    CGImageRef mask = [UIImage imageNamed: @"loupe-mask@2x.png"].CGImage;
    UIImage *glass = [UIImage imageNamed: @"loupe-hi@2x.png"];

    CGContextSaveGState(context);
    CGContextClipToMask(context, bounds, mask);
    CGContextFillRect(context, bounds);
    CGContextScaleCTM(context, 1.2, 1.2);

    //draw your subject view here
    CGContextTranslateCTM(context,1*(self.frame.size.width*0.5),1*(self.frame.size.height*0.5));
    //CGContextScaleCTM(context, 1.5, 1.5);
    CGContextTranslateCTM(context,-1*(touchPoint.x),-1*(touchPoint.y));
    [self.viewToMagnify.layer renderInContext:context];

    CGContextRestoreGState(context);
    [glass drawInRect: bounds];
}

- (void)dealloc {
    [viewToMagnify release];
    [super dealloc];
}


@end

TouchReader.h:

//
//  TouchReader.h
//  SimplerMaskTest
//

#import <UIKit/UIKit.h>
#import "MagnifierView.h"

@interface TouchReader : UIView {
    NSTimer *touchTimer;
    MagnifierView *loop;
}

@property (nonatomic, retain) NSTimer *touchTimer;

- (void)addLoop;
- (void)handleAction:(id)timerObj;

@end

TouchReader.m:

//
//  TouchReader.m
//  SimplerMaskTest
//

#import "TouchReader.h"
#import "MagnifierView.h"

@implementation TouchReader

@synthesize touchTimer;

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    self.touchTimer = [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(addLoop) userInfo:nil repeats:NO];

    // just create one loop and re-use it.
    if (loop == nil) {
        loop = [[MagnifierView alloc] init];
        loop.viewToMagnify = self;
    }

    UITouch *touch = [touches anyObject];
    loop.touchPoint = [touch locationInView:self];
    [loop setNeedsDisplay];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    [self handleAction:touches];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [self.touchTimer invalidate];
    self.touchTimer = nil;
    [loop removeFromSuperview];
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    [self.touchTimer invalidate];
    self.touchTimer = nil;
    [loop removeFromSuperview];
}

- (void)addLoop {
    // add the loop to the superview.  if we add it to the view it magnifies, it'll magnify itself!
    [self.superview addSubview:loop];
    // here, we could do some nice animation instead of just adding the subview...
}

- (void)handleAction:(id)timerObj {
    NSSet *touches = timerObj;
    UITouch *touch = [touches anyObject];
    loop.touchPoint = [touch locationInView:self];
    [loop setNeedsDisplay];
}

- (void)dealloc {
    [loop release];
    loop = nil;
    [super dealloc];
}

@end

基于:http://coffeeshopped.com/2010/03/a-simpler-magnifying-glass-loupe-view-for-the-iphone

2。添加以下图像:

代码中使用的图像:

loupe-hi@2x.png:

loupe-hi@2x.png

loupe-mask@2x.png:

loupe-mask@2x.png

带阴影的原始但居中的图像(此时未使用):

loupe-shadow-hi@2x.png:

loupe-shadow-hi@2x.png

loupe-shadow-mask@2x.png:

loupe-shadow-mask@2x.png

3。用TouchReader

替换xib文件中的主UIView

放大镜将自动工作,除了捕获自己触摸事件的控件(例如,UIWebView)。并且上面的代码不支持带阴影的图像。如果您成功解决了这个问题,请为qustion添加新答案。

<强>更新:

更改以下代码以添加UIWebView支持。 UIView应保持UIView

@interface TouchReader : UILongPressGestureRecognizer

并向webView添加手势:

TouchReader* gestureMagnifier = [[[TouchReader alloc] initWithTarget:self action:@selector(handleMagnifier:)] autorelease];
gestureMagnifier.webView = editSource;
gestureMagnifier.delegate = self;
gestureMagnifier.minimumPressDuration = 0.5;
[webView addGestureRecognizer:gestureMagnifier];

答案 1 :(得分:0)

TouchReader.h:

//- (void)handleAction:(id)timerObj;
-(void) handleGestureAction:(CGPoint)location;

TouchReader.m:

-(void)awakeFromNib
{
    UILongPressGestureRecognizer * longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];
    [self addGestureRecognizer:longPressGesture];
}

-(void)handleGesture:(UILongPressGestureRecognizer *)longPressGesture
{

    CGPoint location = [longPressGesture locationInView:self];

    switch (longPressGesture.state) {
        case UIGestureRecognizerStateBegan:
            self.touchTimer = [NSTimer scheduledTimerWithTimeInterval:0.5
                                                               target:self
                                                             selector:@selector(addLoop)
                                                             userInfo:nil
                                                              repeats:NO];

            // just create one loop and re-use it.
            if(loop == nil){
                loop = [[MagnifierView alloc] init];
                loop.viewToMagnify = self;
            }

            loop.touchPoint = location;
            [loop setNeedsDisplay];
            break;

        case UIGestureRecognizerStateChanged:
            [self handleGestureAction:location];
            break;

        case UIGestureRecognizerStateEnded:
            [self.touchTimer invalidate];
            self.touchTimer = nil;

            [loop removeFromSuperview];
            loop=nil;
            break;

        default:
            break;
    }
}

- (void)addLoop {
    // add the loop to the superview.  if we add it to the view it magnifies, it'll magnify itself!
    [self.superview addSubview:loop];
}

-(void) handleGestureAction:(CGPoint)location
{
    loop.touchPoint = location;
    [loop setNeedsDisplay];

}

您不再需要touches...方法。