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

放大镜效果

    博客分类:
  • iOS
阅读更多

MagnifierView.h文件:

 

#import <Foundation/Foundation.h>

@interface MagnifierView : UIView {
	UIView *viewref;
	CGPoint touchPoint;
	UIImage *cachedImage;
}

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

 

MagnifierView.m文件:

 

#import "MagnifierView.h"

@implementation MagnifierView

@synthesize viewref, touchPoint;

- (id)initWithFrame:(CGRect)frame {
	if (self = [super initWithFrame:frame]) {
		self.backgroundColor = [UIColor clearColor];
	}
	return self;
}

- (void)drawRect:(CGRect)rect {
	if(cachedImage == nil){
		UIGraphicsBeginImageContext(self.bounds.size);
		[self.viewref.layer renderInContext:UIGraphicsGetCurrentContext()];
		cachedImage = [UIGraphicsGetImageFromCurrentImageContext() retain];
		UIGraphicsEndImageContext();
	}
	CGImageRef imageRef = [cachedImage CGImage];
	CGImageRef maskRef = [[UIImage imageNamed:@"loopmask.png"] CGImage];
	CGImageRef overlay = [[UIImage imageNamed:@"loop.png"] CGImage];
	CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), 
																			CGImageGetHeight(maskRef),
																			CGImageGetBitsPerComponent(maskRef), 
																			CGImageGetBitsPerPixel(maskRef),
																			CGImageGetBytesPerRow(maskRef), 
																			CGImageGetDataProvider(maskRef), 
																			NULL, true);
	CGImageRef subImage = CGImageCreateWithImageInRect(imageRef, CGRectMake(touchPoint.x - 18, touchPoint.y - 18, 36, 36));
	CGImageRef xMaskedImage = CGImageCreateWithMask(subImage, mask);
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGAffineTransform xform = CGAffineTransformMake(1.0, 0.0, 0.0, -1.0, 0.0,  0.0);
	CGContextConcatCTM(context, xform);
	CGRect area = CGRectMake(touchPoint.x - 42, -touchPoint.y, 85, 85);
	CGRect area2 = CGRectMake(touchPoint.x - 40, -touchPoint.y + 2, 80, 80);	
	CGContextDrawImage(context, area2, xMaskedImage);
	CGContextDrawImage(context, area, overlay);
}

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

@end

 

TouchReader.h文件:

 

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

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

- (void) handleAction:(id)timerObj;
@end

 

TouchReader.m文件:

 

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

@implementation TouchReader

- (id)initWithFrame:(CGRect)frame {
	if (self = [super initWithFrame:frame]) {
		touchTimer = nil;
		loop = nil;
	}
	return self;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
	touchTimer = [NSTimer scheduledTimerWithTimeInterval:1.0
																								target:self
																							selector:@selector(handleAction:)
																							userInfo:touches
																							 repeats:NO];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
	if(loop != nil){
		[self handleAction:touches];
		return;
	}
	[touchTimer invalidate];
	touchTimer = [NSTimer scheduledTimerWithTimeInterval:1.0
																								target:self
																							selector:@selector(handleAction:)
																							userInfo:touches
																							 repeats:NO];
}

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

- (void) handleAction:(id)timerObj {
	NSSet *touches;
	if([timerObj isKindOfClass:[NSSet class]]){
		touches = [timerObj retain];
	}else{
		touches = [[timerObj userInfo] retain];
	}
	if(touchTimer != nil){
		[touchTimer invalidate];
		touchTimer = nil;
	}
	if(loop == nil){
		loop = [[MagnifierView alloc] initWithFrame:self.bounds];
		loop.viewref = self;
		[self addSubview:loop];
	}
	
	UITouch *touch = [touches anyObject];
	loop.touchPoint = [touch locationInView:self];
	[loop setNeedsDisplay];
	[touches release];
}

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

@end

 

示例图:


分享到:
评论

相关推荐

    仿淘宝放大镜效果

    在网页设计中,仿淘宝放大镜效果是一种常见的用户体验优化技术,它使得用户在浏览商品图片时可以放大细节,提升购物体验。这种效果通常应用于电商网站的商品展示页面,尤其是在服装、饰品等需要查看细节的品类中。...

    简单实用jQuery图片放大镜效果

    在网页设计中,为了提升用户体验,常常会使用到图片放大镜效果。这种效果可以让用户在鼠标悬停在图片上时,看到图片的局部放大视图,就像在实体店中通过放大镜查看商品细节一样。本教程将详细介绍如何使用jQuery实现...

    JQuery 类似淘宝商品放大镜效果

    在网页设计中,为了提升用户体验,特别是在展示商品细节时,"淘宝商品放大镜效果"是一种常见且实用的技术。这个效果允许用户在鼠标悬停在图片上时,能看到一个放大的部分,以便更清晰地查看商品的细节。在这个实例中...

    局部放大,放大镜效果

    在IT领域,"局部放大,放大镜效果"是一种常见的用户界面功能,特别是在图像查看、设计工具和地图应用中。这个程序实现了一个简单的Java Applet,它允许用户在图像上移动鼠标时,对图像的特定区域进行实时放大,类似...

    H5+JS+CSS模仿JD商品详情页放大镜效果

    在本项目中,我们将探讨如何使用HTML5、JavaScript(JS)和CSS来创建一个类似于京东(JD)商品详情页面的放大镜效果。这个效果允许用户在鼠标悬停或移动时,通过一个放大镜视图查看商品图片的细节,增强用户体验。 ...

    Unity 模拟放大镜效果

    Untiy版本:2019.4.10 主要功能是模拟出真实放大镜效果,使用Unity自带Camera以及Render Texture实现(无代码),资源为Prefab,拖拽到场景中即可使用,资源本身含放大镜模型、放大镜功能

    JavaScript实现放大镜效果

    在网页设计中,提供良好的用户体验是至关重要的,其中一种方式就是通过实现放大镜效果来增强商品图片的查看体验。本文将详细介绍如何使用JavaScript和HTML5技术来创建三种不同的放大镜效果:圆形放大镜、直接矩形...

    jquery放大镜效果

    在网页设计中,为了提升用户体验,常常会使用到放大镜效果。这主要应用于产品展示,尤其是电商网站的商品图片,让用户可以更清晰地查看商品细节。本文将深入探讨jQuery实现放大镜效果的相关知识点。 首先,jQuery是...

    商城图片放大镜效果源码

    在电子商务网站中,图片放大镜效果是一个非常常见的功能,它能提供给用户更细致的产品查看体验,特别是对于服装、饰品等细节丰富的商品。本资源提供的是一个商城图片放大镜效果的源码,包含了10种不同的实现方式,...

    图片放大镜效果示例

    在IT领域,图片放大镜效果通常用于电商网站或者图像展示应用中,允许用户对细节部分进行查看,提高用户体验。这个示例项目就是针对这一需求设计的,它利用JavaScript技术实现了一个图片放大镜的功能。 首先,我们要...

    iphone 开发 放大镜效果

    在iOS开发中,实现“放大镜效果”是一项常见的需求,特别是在文本阅读或图像查看的应用中。这个效果使得用户可以通过一个可移动的放大区域更详细地查看屏幕上的内容。以下是对如何在iPhone应用中创建放大镜效果的...

    react仿淘宝图片放大镜效果

    使用react写一个仿图片放大镜效果使用react写一个仿图片放大镜效果

    vue3+vite+ts 仿淘宝放大镜效果

    在本项目中,我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验,让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...

    jQuery html 放大镜效果

    在网页设计中,为了提升用户体验,常常会使用到“放大镜效果”。这种效果允许用户在鼠标悬停在图片上时,能预览图片的局部细节,就像使用实物放大镜一样。这里我们关注的是两个实现这一效果的jQuery插件:一个是基础...

    jquery实现的图片滑动并带有放大镜效果代码

    这个项目“jquery实现的图片滑动并带有放大镜效果代码”显然是利用 jQuery 实现了一个功能丰富的图片展示功能,包括图片轮播和放大镜效果。下面我们将详细探讨这些知识点。 首先,图片轮播(Slider)是一种常见的...

    jQuery放大镜效果仿淘宝放大效果

    jQuery放大镜效果就是一种常见的技术手段,它模仿了淘宝网的产品预览方式,让用户能够更清晰地查看商品细节。本篇文章将深入探讨如何利用jQuery实现这种放大镜效果。 首先,jQuery是一个强大的JavaScript库,它简化...

    jQuery实现放大镜效果源码

    在本文中,我们将深入探讨如何使用jQuery来实现一个放大镜效果。这个效果通常用于电子商务网站,让用户能够更清晰地查看产品细节。通过学习这个源码,你可以了解到如何自定义插件参数,以适应不同的项目需求。 首先...

    图片放大镜效果

    在IT行业中,图片放大镜效果是一种常见的网页设计技术,它为用户提供了一种便捷的方式来查看网页上的图片细节。这种效果在电商网站上尤为常见,比如淘宝,用户可以通过鼠标悬停在商品图片上,看到图片的局部放大部分...

    js实现图片放大镜效果

    在网页设计中,为了提升用户体验,常常会使用到图片放大镜效果。这种效果允许用户在鼠标悬停在图片上时,看到图片的局部区域以更大的比例显示,类似于实体商店中的放大镜。本教程将详细介绍如何使用JavaScript,特别...

Global site tag (gtag.js) - Google Analytics