iphoneで虫眼鏡の作り方

iPhoneアプリ内で虫眼鏡機能を実装したいと思っております。

拡大元の画像の一部分を円形に拡大して表示（虫眼鏡のイメージ）したいと
考えております。
（拡大元画像の任意の点（x,y）から任意の半径rの円形範囲部分を（面積比２倍等）拡大して拡大元画像の上に重ねて表示）

虫眼鏡の拡大部分は　円形　で矩形領域ではありません。。
（円形での方法が分かりません。。）

cocos2dを利用しているためcocos2dで上記の虫眼鏡機能が実装できると
助かるのですが・・UIKitでもかまいません。
参考になりそうなサイト等でもOKです。

ご教授お願い致します。

No.1 ベストアンサー 回答者： harawo 回答日時： 2012/01/26 18:08

Cocos2dのことはわかりません。

Core Graphicsの話をします。

円形の窓から、画像を覗くというプログラムを作りました。添付動画をご覧ください。
コードはこれです。

ViewController.m

#import "ViewController.h"
#import "MyView.h"

@implementation ViewController {
IBOutlet MyView *myView;
}

- (void)viewDidLoad
{
[super viewDidLoad];

UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget: self
action: @selector(panGestureRecognizer:)];
[myView addGestureRecognizer: recognizer];
[recognizer release];
}

// Gesture Recognizer Method
- (void)panGestureRecognizer: (UIPanGestureRecognizer *)recognizer
{
if ([recognizer state] == UIGestureRecognizerStateBegan) {
[recognizer setTranslation: myView.center inView: self.view];
} else if ([recognizer state] == UIGestureRecognizerStateChanged) {
myView.center = [recognizer translationInView: self.view];
[myView setNeedsDisplay];
} else if ([recognizer state] == UIGestureRecognizerStateEnded) {
myView.center = [recognizer translationInView: self.view];
[myView setNeedsDisplay];
}
}

@end

#import "MyView.h"

@implementation MyView

- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(context, rect);
CGContextClip(context);
CGImageRef image = [[UIImage imageNamed: @"sample.png"] CGImage];
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0.0, -(CGFloat)CGImageGetHeight(image));
CGContextDrawImage(context, CGRectMake(-(self.center.x - self.frame.size.width / 2.0),
(self.center.y - self.frame.size.height / 2.0),
(CGFloat)CGImageGetWidth(image), (CGFloat)CGImageGetHeight(image)), image);
}

@end

このプログラムをあれこれいじれば、お望みの虫眼鏡になっていくのではないかと思います。

この回答への補足

虫眼鏡を作りたかったため、覗く場所以外がかくれてしまうと困ります。
申し訳ありません。こちらの説明不足でした、、。

補足日時：2012/01/27 10:34

この回答へのお礼

お返事いただきありがとうございます。

円形領域内に拡大元画像を２倍にしたテクスチャを貼っているのか
灰色の矩形領域の一部円形領域だけ透過されているテクスチャをサンプル画像の上に
表示しているのかを不勉強ながらまだ判断できておりません。。

このプログラムを実行・改変・確認させていただきました上で
虫眼鏡のようにできそうか否かでベストアンサーか否かをつけさせていただきますね。
こちらの説明不足ですみません・・。
プログラムや分かりやすい動画までつけていただきありがとうございました！

お礼日時：2012/01/27 10:34