`
jsntghf
  • 浏览: 2476236 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

放大镜效果(二)

    博客分类:
  • iOS
阅读更多

以前也写过一篇:放大镜效果,现在,提供另一种解决方案。

 

MagnifierView.h

 

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

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

@end

 

MagnifierView.m

 

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

@implementation MagnifierView
@synthesize viewToMagnify, touchPoint;

- (id)initWithFrame:(CGRect)frame {
	if (self = [super initWithFrame:CGRectMake(0, 0, 80, 80)]) {
		self.layer.borderColor = [[UIColor lightGrayColor] CGColor];
		self.layer.borderWidth = 3;
		self.layer.cornerRadius = 40;
		self.layer.masksToBounds = YES;
		self.windowLevel = UIWindowLevelAlert;
	}
	return self;
}

- (void)setTouchPoint:(CGPoint)pt {
	touchPoint = pt;
	self.center = CGPointMake(pt.x, pt.y-10);
}

- (void)drawRect:(CGRect)rect {
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextTranslateCTM(context, self.frame.size.width * 0.5, 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];
}

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

@end

 

TouchReader.h

 

#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

 

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

@implementation TouchReader

@synthesize touchTimer;

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
	self.clipsToBounds = NO;
	self.touchTimer = [NSTimer scheduledTimerWithTimeInterval:0.5
													   target:self
													 selector:@selector(addLoop)
													 userInfo:nil
													  repeats:NO];
	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 release];
	loop = nil;
}

- (void)addLoop {
	[loop makeKeyAndVisible];
}

- (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
分享到:
评论

相关推荐

    FLASH动画制作-放大镜源文件

    本动画属本人自制,通过使用遮罩动画与简单的位移动画相结合的方法,从而获得将字体放大的效果。

    jQuery实现放大镜效果

    相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。在接下来的博文中,我们将向大家介绍通过jQuery...

    基于jQuery实现放大镜效果

    相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。 在接下来的文章中,我们将向大家介绍通过jQuery...

    jquery制作鼠标悬停图片放大镜特效(仿淘宝图片展示)

    jquery制作鼠标悬停图片放大镜特效(仿淘宝图片展示) 里面有两个例子,个人感觉第二个可能用起来方便点

    JQuery插件图片滚动带放大镜

    滚动图片,类似天猫淘宝的商品图片详情,鼠标滑过会显示放大的效果,用法简单,可以直接复制使用,二次开发也有参考价值

    js实现淘宝浏览商品放大镜功能

    本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码,供大家参考,具体内容如下 1、准备两张图片,其中一张图片分辨率为另一张图片的二倍。 2、前端页面布局 //box1位左侧原图,box2为右侧放大图额显示框,...

    jquery AnythingZoomer 插件实现文字放大镜效果.zip

    有兴趣刚需的可以自己下载,非常实用的代码,可以完美运行,有能力的还可以二次修改!

    jQuery实现放大镜案例

    本文实例为大家分享了jQuery实现放大镜效果的具体代码,供大家参考,具体内容如下 动画: 1、鼠标移入显示区图片时,显示选择框; 2、放大镜特效,将图片位于选择框内的部分放大显示; 3、点击下方小图片和左右移动...

    css3高版本浏览器下垂直文字放大镜效果.zip

    有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!

    利用javascript实现的三种图片放大镜效果实例(附源码)

    本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端;大家可以直接下载源码进行学习参考,下面来一起学习学习吧。 实现效果如下 效果一 效果二 效果三 调用代码如下 //前面是ID或者Class,后面有...

    css3放大镜动画效果.zip

    有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!

    js放大镜放大购物图片效果

    图片放大镜效果,供大家参考,具体内容如下 一难点:不让黄盒子出界 二难点:让大盒子相应移动(比例) &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;我的放大镜&lt;/...

    css3伪放大镜(图片放大动画)效果.zip

    有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!

    Html5插件教程之添加浏览器放大镜效果的商品橱窗

    KeyMob移动端广告平台为应用开发者和广告主提供应用交叉推广、手机广告优化等一站式移动营销解决方案,使应用开发者和广告主获得价值的最大化。 一、使用方法 ...二、Html结构 复制代码代码如下:&lt;di

    dianzishangwu2.html

    电商网站放大镜实现效果二

    images-zoom:基于 jQuery 的图片放大镜 - 商城商品详情图片放大效果

    基于 jQuery 的图片放大镜使用方法$('.show').zoomImage({ layerW: 200, // 遮罩宽度 layerH: 200, // 遮罩高度 layerOpacity: 0.5, // 遮罩透明度 layerBgc: '#000', // 遮罩背景颜色 showPanelW: 500, // 显示放大...

    原生JS实现的放大镜特效示例【测试可用】

    故做了一个原生的js实现商品详情页面的放大镜效果,以避免冲突! 下面介绍一下代码及实现过程: 首先,创建fangda.html文件 在文件头部的&lt;head&gt;&lt;/head&gt;中添加文件的css样式,即: &lt;style type="text...

Global site tag (gtag.js) - Google Analytics