如何将放大镜添加到自定义控件? [英] How to add a magnifier to custom control?
问题描述
如何将放大镜添加到自定义控件?控制是UIView的孩子。 (这是一个UIWebView - 但原生放大功能在某些页面上不起作用。)
How to add a magnifier to custom control? Control is a child of UIView. (It's a UIWebView - but native magnification functionality doesn't work at some pages.)
更新:
也许可以在UIWebView上强制绘制放大镜?
Maybe it's possible to force a draw of magnifier on UIWebView?
推荐答案
1。将以下文件添加到项目中:
MagnifierView.h:
1. Add the following files to your project:
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:
//
// 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:
//
// 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:
//
// 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
代码中使用的图像:
loupe-hi@2x.png:
loupe-hi@2x.png:
loupe-mask@2x.png:
loupe-mask@2x.png:
带阴影的原始但居中的图像(此时未使用):
Original but centered images with a shadow (not used at this moment):
loupe-shadow-hi@2x.png:
loupe-shadow-hi@2x.png:
loupe-shadow-mask@2x.png:
loupe-shadow-mask@2x.png:
放大镜将自动工作,除了捕获自己触摸事件的控件(例如,UIWebView)。上面的代码不支持带阴影的图像。如果您成功解决此问题,请为qustion添加新答案。
The magnifier will work automaticaly except controls that captures touch events themselfs (for example, UIWebView). And the code above doesn't support the images with a shadow. Please add new answer to the qustion if you successfully fix this issue.
更新:
更改以下代码以添加 UIWebView
支持。 UIView
应保持 UIView
。
Change the following code to add UIWebView
support. UIView
should remain 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];
这篇关于如何将放大镜添加到自定义控件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!