null product's blog

Androidアプリ開発のノウハウ集

【Androidアプリ開発】CanvasでBitmap画像に図形を重ねて描画するサンプル

今回は、Canvasを使用してBitmap画像に図形を重ねて描画します。

下記記事で使用した原画像に、抽出した付箋紙の座標の枠線を描画していきます。

f:id:null-product:20170507204153p:plain

 

前準備

割愛します。(下記参照)

【Androidアプリ開発】OpenCVでBitmapから四角形を抽出するサンプル - null product's blog

 

ソースコード

サンプルソースコードは以下の通りです。 

 

なお、ソースコード内の以下の関数に関しては、下記の記事を参照下さい。

 ・onImageScan()

 ・getThreshold()

 ・getContour()

【Androidアプリ開発】OpenCVでBitmapから四角形を抽出するサンプル - null product's blog

 

説明

原画像から付箋紙の輪郭座標を抽出した後、以下の処理を行います。

 ①:描画先のVIEWを取得

 ②:VIEWに原画像(Bitmap)を登録

 ③:VIEWに抽出した輪郭座標を登録

 ④:VIEWの描画更新要求

 ⑤:背景色を設定

 ⑥:原画像(Bitmap)を描画

 ⑦:輪郭を描画

 

①:描画先のVIEWを取得

「findViewById()」を使用して、「activity_main.xml」に定義した独自VIEW(CanvasView)のオブジェクトを取得します。

 

②:VIEWに原画像(Bitmap)を登録

CanvasViewに作成した「setmBitmap()」を使用して、VIEWにBitmap画像を登録します。

ここで登録したBitmap画像を「⑥:原画像(Bitmap)を描画」の描画処理で描画します。

 

③:VIEWに抽出した輪郭座標を登録

CanvasViewに作成した「setmPoints()」を使用して、VIEWに枠線の頂点座標を登録します。

ここで登録した頂点座標を「⑦:輪郭を描画」の描画処理で描画します。

 

④:VIEWの描画更新要求

「invalidate()」でCanvasViewを再描画します。

この後、CanvasViewの「onDraw()」が実行され、以降の処理に続きます。

 

⑤:背景色を設定

まず、「drawColor()」を使用して背景色を設定します。

ここでは、黒地(Color.BLACK)を指定してます。

  

⑥:原画像(Bitmap)を描画

Bitmapの描画には、「drawBitmap()」を使用します。

その前に、「scale()」を使用して画面サイズに合わせた拡大率になるように調整してます。

 

⑦:輪郭を描画

枠線を描画するには、「moveTo()」「lineTo()」「drawPath()」を使用して、頂点4つをラインで繋げます。

これを枠線の数だけ繰り返します。

なお、「drawRect()」「drawCircle()」を使用して図形を重ねることも可能です。

 

 

以上で、Bitmapを背景に枠線の図形を描画することができます。