• ベストアンサー

iphoneで虫眼鏡の作り方

iPhoneアプリ内で虫眼鏡機能を実装したいと思っております。 拡大元の画像の一部分を円形に拡大して表示(虫眼鏡のイメージ)したいと 考えております。 (拡大元画像の任意の点(x,y)から任意の半径rの円形範囲部分を(面積比2倍等)拡大して拡大元画像の上に重ねて表示) 虫眼鏡の拡大部分は 円形 で矩形領域ではありません。。 (円形での方法が分かりません。。) cocos2dを利用しているためcocos2dで上記の虫眼鏡機能が実装できると 助かるのですが・・UIKitでもかまいません。 参考になりそうなサイト等でもOKです。 ご教授お願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • harawo
  • ベストアンサー率58% (3742/6450)
回答No.1

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

khp20xx
質問者

お礼

お返事いただきありがとうございます。 円形領域内に拡大元画像を2倍にしたテクスチャを貼っているのか 灰色の矩形領域の一部円形領域だけ透過されているテクスチャをサンプル画像の上に 表示しているのかを不勉強ながらまだ判断できておりません。。 このプログラムを実行・改変・確認させていただきました上で 虫眼鏡のようにできそうか否かでベストアンサーか否かをつけさせていただきますね。 こちらの説明不足ですみません・・。 プログラムや分かりやすい動画までつけていただきありがとうございました!

khp20xx
質問者

補足

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

関連するQ&A

  • 虫眼鏡ツールのような機能をhtmlに盛り込みたい

    html内に表示してあります画像を拡大・縮小表示させる虫眼鏡ツールのような機能をhtml内に盛り込みたいと考えています。 単に拡大・縮小ボタンやホイールマウスを使って拡大・縮小をさせる機能でしたら沢山のホームページで公開されているのですけれども、イメージビューワーなどに付いている虫眼鏡ツールのような拡大・縮小機能をwebのページに盛り込むことは可能なのでしょうか? 知っている情報があれば、お教え願いますでしょうか。

  • アップしたい画像に虫眼鏡をつけるには

    ブログ等に細かい画像をアップしたいのですが、カーソルを拡大用の虫眼鏡アイコンにして詳しく見せるには、どのような方法があるのでしょうか? ブログテーマはSimplicity2です。 他に必要な情報があれば補足くださいませ。

  • +と-の虫メガネについて

    カテゴリが違う場合は、すいません。javascriptかPHPのどちらかのような気がして +と-の虫メガネを画像の上でクリックすると縮小した画像が拡大されて表示されますが仕組みや方法について教えてください。 お願いします。 どんな感じにしたいかと言うと、 例 1行目 2行目 3行目 4行目 5行目 6行目 7行目 8行目 と10行目までは文字を書く予定です。 以降に画像を添付したいと思っています。左右、真中、画像の位置はどこでもいいです。

  • photoshopCS3で、開いている複数の画像が一緒に拡大・縮小してしまう。

    MacOSX10.5でphotoshopCS3を使用しております。 昨日からズームの機能が突然おかしくなってしまいました。 特に設定を変えた記憶はございません。 具体的に言うと、複数の画像を開いているとき、 (今回、A、B、Cの3つの画像を開いているとします) Aをアクティブにして作業している際、虫眼鏡で画像を拡大すると、 アクティブでないB、Cの画像まで一緒に拡大してしまいます。 shiftキーを押しながら作業している訳でなく、虫眼鏡→クリック、 あるいは虫眼鏡→altを押しながらクリック しているだけなのに、複数の画像が一緒に拡大したり縮小したりしてしまいます。 今回の例の場合、Aのみを拡大して作業したいのに、 Bの画像も一緒に拡大してしまうので、Bを作業しやすいもとの比率に戻そうと虫眼鏡ツールで縮小するとAも縮小してしまい、 複数の画像を開いて並行して作業するのが大変になってしまいました。 photoshopCS3を再インストールしたものの改善されません。 photoshopはcreative suite3 design premiumで一括で入れたソフトの一つなので、 一度全てのアドビコンポーネントをアンインストール後、 creative suite3を再インストールすべきでしょうか。 どなたか解決方法や原因をご存知の方、教えていただけないでしょうか。 よろしくお願い致します。

  • ボタンを押した時のカーソルの変更

    UserForm上に作成した拡大ボタンを押したときに、カーソルが虫眼鏡マークになるようにしたいのですが、どうすれば良いのでしょうか? ボタンのイベントで、 UserForm1.MousePointer =fmMousePointerArrowなどとした場合には、うまくいくのですが、fmMousePointerCustomで、カーソルアイコンをカスタマイズ(虫眼鏡に)したいのです。 UserFormのプロパティで、MouseIconを指定すると、常にカーソルが虫眼鏡になってしまうし、どうしていいのか分かりません。 簡単に教えていただけないでしょうか。

  • 画像を触っている時に拡大したい。

    フォトショップ6.0を使用しています。 普通のマウスを使っています。 小さい画像を扱っているので拡大して作業を したいのですがどうすればいいでしょうか。 キーボードでの操作を教えて下さい。 虫眼鏡のような物で拡大したのですが、元の 大きさに戻すにはどうしたらいいでしょうか。 よろしくおねがいします。

  • カーソル虫眼鏡 クリックで拡大ウィンドウ

    似たような質問は沢山あったのですが、 どれとも違った効果だったので、質問させていただきました。 こちらのサイトのフロアマップ部分の仕組みで、 http://www.e-alife.net/club/floormap.html カーソルが虫眼鏡になって、クリックすると拡大される効果があるのですが、 FLASHかと思いきや、そうではなかったので分からずにいます。 WordPressやMovable Typeなどのプラグイン系のツールなのか、 JavaScriptじゃないような気がするのですが、 ご存知の方がいらっしゃいましたら、ご教授いただけましたら幸いです。 宜しくお願いいたします。

  • WIN7のメガネ機能で全画面を表示する方法

    WIN7でメガネ機能を使ってみました。WINキーと+キーを同時に押すと 現在の画面の上の狭い部分に拡大部分が少し見えます。 拡大画面を前面に持ってくる方法をお教え下さい。

  • jsでマウスオーバー時に画像拡大、変更、縮小したい

    javascriptを使用し、 画像をマウスオーバーした時に拡大させ、 拡大しきった時に画像を変更、 マウスアウトすると再度元の画像に戻り、 縮小して元すべて通りになる、 という機能を実装したいのですが、 ご指導頂けますでしょうか。 (ブラウザはIE6を使用しています) 宜しくお願い致します。

  • googleのインスタントプレビューが・・・

    googleで検索すると虫眼鏡(インスタントプレビュー)があったのですが、急に消えて、代わりに右側に小窓で画像が表示されるようになってしまいました 今まで通り、インスタントプレビューを使いたいのですがどうしたらいいでしょうか? 虫眼鏡アイコンが消えてしまいました・・・

専門家に質問してみよう