ScrollViewに画像を表示させる
2015年2月21日:OS X
前回、Image Viewに画像を表示させるプログラムを作成しました。しかし、ウインドウのサイズが小さいと画像が表示されなかったり、縮小表示されてしまいます。ここでは、スクロールをつけて小さい画面でも好きな場所を見える用にします。そのためにScroll Viewを使用します。言語はSwiftです。
UIの設定
Cocoaアプリケーションを作成し、ユーザーインターフェースを設計します。はじめに、Scroll ViewをView Cotnrollerへはります。
画面いっぱいにして、Constraintsを4方向設定します。
最後に2画面にしてNSScrollViewのインスタンスを作成します。ここでは、ScrollViewという名前のインスタンスを作成しています。場所はViewControllerクラスの中です。
画像を表示させる
以下のようにコーディングして画像を表示させるプログラムを作ります。
@IBOutlet var ScrollView: NSScrollView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. var openPanel=NSOpenPanel() openPanel.allowsMultipleSelection = false openPanel.canChooseDirectories = false openPanel.canCreateDirectories = false openPanel.canChooseFiles = true var result=openPanel.runModal() if result == NSFileHandlingPanelOKButton { //NSImageの作成 let img=NSImage(contentsOfURL:openPanel.URL!) //NSImageViewの作成 let width=img?.size.width let height=img?.size.height var imageSize:NSRect=NSMakeRect(0.0,0.0,CGFloat(width!),CGFloat(height!)) var theImageView:NSImageView=NSImageView(frame:imageSize) theImageView.image=img //NSImageViewをNSScrollViewへ表示 self.ScrollView.hasHorizontalScroller=true //水平スクロールの表示 self.ScrollView.hasVerticalScroller=true //垂直スクロールの表示 self.ScrollView.documentView=theImageView } }
ウインドウが完成するとオープンダイアローグが開き、画像を選択できます。そして、ScrollViewへ選択した画像を表示させています。内容ですが、NSScrollViewへNSImageViewを表示することでスクロールを実現しています。
実行すると以下のようになります。
画面を小さくすると
となります。ここではわかりませんが、スクロールできます。
画像を左上へ表示させる
画面が大きいと左下に表示されています。これを左上へ表示させるようにプログラムを変更します。プロパティを変更したら簡単にできそうなものですが、そうなってないです。左上にするにはNSImageViewのメソッドを書き換える必要があります。そのためにNSImageViewを継承して、メソッドを書き換えたサブクラスをつくります。そのサブクラスの名前をここではNSImageViewRとしておきます。以下のコードをViewControllerの上に追加します(File->New->File->Cocoa ClassでNSImageViewを選んでも以下のハイライトを加えてもOKです)。
class NSImageViewR: NSImageView { override func drawRect(dirtyRect: NSRect) { super.drawRect(dirtyRect) // Drawing code here. } override var flipped:Bool{ return true } }
そして以下のように先ほど書いたコードを書き換えます。
//NSImageViewの作成 let width=img?.size.width let height=img?.size.height var imageSize:NSRect=NSMakeRect(0.0,0.0,CGFloat(width!),CGFloat(height!)) var theImageView:NSImageViewR=NSImageViewR(frame:imageSize) theImageView.image=img
実行すると以下のようになります。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー