以前也写过一篇:放大镜效果,现在,提供另一种解决方案。
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
分享到:
相关推荐
在网页设计中,为了提升用户体验,常常会使用到放大镜效果。这主要应用于产品展示,尤其是电商网站的商品图片,让用户可以更清晰地查看商品细节。本文将深入探讨jQuery实现放大镜效果的相关知识点。 首先,jQuery是...
在Flex中实现放大镜效果,主要是通过利用MXML和ActionScript来创建交互式的用户界面,为用户提供视觉上的放大体验,使得用户可以更详细地查看图像的局部细节。 在Flex中,放大镜效果通常通过以下组件和技术实现: ...
在电子商务平台上,商品图片的展示方式对于用户体验至关重要,其中一种增强视觉效果的技术就是“商品放大镜效果”。这种技术使得用户在浏览商品时可以无需离开页面就能查看商品细节,提升了购物体验。本文将深入探讨...
在移动设备上,为了提供更好的用户体验,经常需要实现一种被称为“放大镜效果”的功能,特别是在电商网站中,用户可以通过此效果查看商品细节。本篇主要介绍如何使用jQuery库来实现手机屏幕上的放大镜效果。 首先,...
在网页设计中,为了提升用户体验,常常需要对展示的商品图片实现放大镜效果,让用户能更清晰地查看细节。本文将详细介绍如何使用JavaScript库jQuery来实现这一功能,主要围绕"jQuery实现图片放大镜效果"这一主题展开...
**jQuery放大镜效果详解** jQuery放大镜效果是一种常见的网页交互设计,它为用户提供了一种查看商品细节的方式,尤其适用于电商网站。在凡客诚品等知名电商平台上,这种效果被广泛应用,增强了用户的购物体验,使得...
在电商网站上,京东的放大镜效果是一种常见的用户体验优化功能,它允许用户在鼠标悬停在商品图片上时,能够看到商品细节的放大视图。这种效果不仅提升了用户的浏览体验,也增强了购买决策过程中的产品展示质量。接...
基于JavaScript放大镜效果的实现 在当今的电子商务网站中,图片放大镜效果已经成为必不可少的一项功能。它可以增强用户体验,让用户能够更好地观察产品的细节。但是,实现图片放大镜效果的原理相对较难理解。本文将...
在IT领域,尤其是在UI设计和前端开发中,"放大镜效果"是一种常见的用户体验设计技术,主要用于提高用户对图片细节的观察。这种效果模仿了实际生活中使用放大镜查看细小物体的方式,让用户能够更加清晰地看到图片的...
在IT行业中,"放大镜效果"通常指的是在用户界面(UI)设计中,为了提供更好的用户体验,模拟实际放大镜操作的技术。这种效果主要用于图像查看、网页浏览或移动应用中,让用户能够更清晰地查看某个区域的细节。在本文...
在VC++中,开发者可以利用这些图形接口来创建自定义的窗口和绘图操作,以模拟放大镜的效果。 核心知识点一:Windows消息处理 VC++程序通常基于Windows消息机制运行,这要求开发者理解和使用消息循环、消息队列以及...
在IT行业中,产品放大镜效果通常用于电子商务网站或者在线商店,它能为用户提供更清晰、更细致的商品细节视图,从而提升购物体验。这个“产品放大镜效果合集”包含了六个精心设计和优化的代码实现,旨在帮助开发者...
放大镜效果主要依赖于JavaScript(简称JS)来实现。其基本思路是:当鼠标悬浮在目标图片上时,动态创建一个透明层,并根据鼠标的坐标动态调整该层的位置和大小,从而达到局部放大的目的。这里涉及到的技术包括事件...
在网页设计中,为了提升用户体验,局部图片放大镜效果是一种常用的技术,它允许用户在鼠标悬停或点击图片时查看细节。jQuery作为一个轻量级、功能丰富的JavaScript库,提供了多种实现这种效果的方法。本篇文章将深入...
4. **多图片支持**:如果页面上有多个图片需要实现放大镜效果,可以将插件封装成一个可复用的组件。 5. **自定义配置**:提供API供用户自定义放大镜的样式、放大比例、是否开启鼠标滚轮缩放等功能。 ### 四、代码...
**jQuery ImageZoomer 插件实现放大镜效果详解** 在网页设计中,商品展示时常常需要用到放大镜效果,让用户能够更清晰地查看细节。`jQuery ImageZoomer` 是一款常用的JavaScript插件,它能轻松地为图片添加这种交互...
在本插件中,开发者可能使用了这些选择器来获取需要应用放大镜效果的图片元素,并监听鼠标移动事件,以便在用户移动鼠标时更新放大镜的位置和显示内容。 2. **CSS3变换和过渡效果**:CSS3中的transform属性可以用来...
最后,将处理后的图像绘制到GUI窗口上,完成放大镜效果的实时显示。这可能需要使用到绘图函数,如Windows API中的DrawBitmap或Qt中的QPainter类。 总的来说,C++实现屏幕放大镜涉及到的知识点包括:C++ GUI编程,...
二、图片放大镜效果原理 图片放大镜效果通常由两部分组成:一个显示原图的小图(通常带有可移动的放大镜)和一个展示放大区域的大图。当鼠标在小图上移动时,大图会同步显示对应位置的放大图像,从而模拟放大镜的...
在Android开发中,实现“放大镜”功能是一项实用的技术,尤其在阅读小字体或者查看细节时。本篇文章将深入探讨如何在Android应用中创建这样一个功能,以满足用户对局部细节放大查看的需求。 首先,我们需要理解...