画素データを画面に表示する
2015年2月22日:OS X
前回、画像をScrollViewへ表示させるプログラムをつくりました。今回は、読み込んだ画像ではなく、自分で用意した画素データを画面に表示するプログラムを作成します。UIの作成を前回と同じなので、UIは準備したという仮定のもとで話を進めます。
ウインドウが読み込まれたらScroll Viewへ画像を表示
では、ウインドウが読み込まれた際に、Scroll Viewへ作成した画素データを表示するプログラムを作ります。以下のようにプログラミングしてください。
@IBOutlet var ScrollView: NSScrollView! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. //画像データを作成 let width:UInt = 300 let height:UInt = 280 var imageBytes : UnsafeMutablePointer<Byte>; let ByteLength = Int(width) * Int(height) * 4 imageBytes = UnsafeMutablePointer<Byte>.alloc(ByteLength) for i in 0...Int(width)-1{ for j in 0...Int(height)-1{ var k: Int = ((Int(width) * j) + i) * 4 imageBytes[k] = Byte(i%255) // red imageBytes[k+1] = Byte(j%255); // green imageBytes[k+2] = Byte(0); // blue imageBytes[k+3] = Byte(0); // alpha } } //CGDataProvider(データの場所や種類の情報)を作成 var provider = CGDataProviderCreateWithData(nil,imageBytes, UInt(ByteLength), nil) //CGImage(ビットマップ画像)を作成 var bitsPerComponent:UInt = 8 //画素は8bit var bitsPerPixel:UInt = bitsPerComponent * 4 //pxあたりのビット数:4色より var bytesPerRow:UInt = UInt(4) * width //1列あたりのバイト数 var colorSpaceRef = CGColorSpaceCreateDeviceRGB() var bitmapInfo = CGBitmapInfo.ByteOrderDefault var renderingIntent = kCGRenderingIntentDefault var cgImage = CGImageCreate(width, height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, nil, false, renderingIntent) //NSImageを作成 let Size=NSSize(width:Int(width),height:Int(height)) let img = NSImage(CGImage: cgImage,size:Size) //NSImageViewの作成 var imageSize:NSRect=NSMakeRect(0.0,0.0,CGFloat(width),CGFloat(height)) var theImageView:NSImageViewR=NSImageViewR(frame:imageSize) theImageView.image=img //NSImageViewをNSScrollViewへ表示 self.ScrollView.hasHorizontalScroller=true //水平スクロールの表示 self.ScrollView.hasVerticalScroller=true //垂直スクロールの表示 self.ScrollView.documentView=theImageView }
実行すると以下のように画面が表示されます。
画素データを表示するには以下の様な手順を取ります。
- 画素データの準備
- CGDataProvider(データの種類や場所の情報)を作成
- CGImage(ビットマップ画像)の作成
- NSImageの作成と表示
画素データの準備
はじめの画素データはバイトデータの配列です。C言語の方法でメモリを確保して配列を準備します。今回は、4色(r,g,b,alpha)で色の深さは1バイト、縦300横280ピクセルなので、
バイト
がデータの大きさになります。画像データの保存法はr,g,b,alphaで、横方向に走査します。ですから、座標(i,j)のr,g,b,alphaのデータの位置は、
- 赤:
- 緑:
- 青:
- α:
となります。ここで、は幅で300pxです。
CGDataProvider(データの種類や場所の情報)を作成
続いてCGDataProviderという作成した画素データがどこにあって、種類は何なのかを指定するということをします。以下のコードで実現しています。
//CGDataProvider(データの場所や種類の情報)を作成 var provider = CGDataProviderCreateWithData(nil,imageBytes, UInt(ByteLength), nil)
CGDataProviderの細かいリファレンスは以下の公式ページを参照してください。
CGImage(ビットマップ画像)の作成
作成した配列データをビットマップ画像として保存します。OS XのビットマップはCGImageというクラスを用います。作成を以下の通りです。
var cgImage = CGImageCreate(width, height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorSpaceRef, bitmapInfo, provider, nil, false, renderingIntent)
CGImageCreateの構造は以下の通りです。
func CGImageCreate(width, height, bitsPerComponent, bitsPerPixel, bytesPerRow, colorspace, bitmapInfo, provider, decode, shouldInterpolate, intent)-> CGImage!
入力変数の意味は以下の表にまとめてあります。
変数名 | データの型 | 意味 |
width | UInt | 画像の幅 |
height | UInt | 画像の高さ |
bitsPerPixel | UInt | 1px当たりのビット数 |
bytesPerRow | UInt | 1行あたりのバイト数 |
colorspace | CGColorSpace | カラースペース |
bitmapInfo | CGBitmapInfo | ビットマップ画像の形式 |
provider | CGDataProvider! | 画像データ情報であるCGDataProvider |
decode | UnsafePointer<CGFloat> | デコーディング |
shouldInterpolate | Bool | 補完が必要ならtrue |
intent | CGColorRenderingIntent | レンダリング設定 |
CGImageの詳細はリファレンスを参照してください。
NSImageの作成と表示
最後に、CGImageをNSImageへ変換して、NSImageをScroll Viewへ表示させて完了です。
//NSImageを作成 let Size=NSSize(width:Int(width),height:Int(height)) let img = NSImage(CGImage: cgImage,size:Size) //NSImageViewの作成 var imageSize:NSRect=NSMakeRect(0.0,0.0,CGFloat(width),CGFloat(height)) var theImageView:NSImageViewR=NSImageViewR(frame:imageSize) theImageView.image=img //NSImageViewをNSScrollViewへ表示 self.ScrollView.hasHorizontalScroller=true //水平スクロールの表示 self.ScrollView.hasVerticalScroller=true //垂直スクロールの表示 self.ScrollView.documentView=theImageView
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー