[안드로이드] 이미지뷰에 점 찍기 (Draw Point in ImageView)

위와 같은 ImageView가 있다고 했을 때

터치 이벤트를 통해서 해당 위치에 포인트 찍는 동작을 정리하려고 합니다.

 

 

 

 

 

 

1. ImageView 정의

레이아웃에 ImageView 추가합니다.

이때, 이미지뷰 사이즈에 맞게 출력되도록 scaleType 속성을 fixXY로 설정합니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ivFrame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/frame" />
</LinearLayout>

 

 

 

 

 

 

 

2. ImageView to Bitmap 가져오기

포인트를 찍기 위해서 Bitmap이 필요합니다.

ImageView가 가지고있는 이미지를 Bitmap으로 가져올 수 있는 메서드를 작성합니다.

private fun getImageViewBitmap(view: ImageView): Bitmap {
    return (view.drawable as BitmapDrawable).bitmap
}

 

 

 

 

 

 

 

3. Draw Point

전달 받은 Bitmap으로 원하는 위치에 포인트를 찍는 메서드를 작성합니다.

해당 메서드는 포인트가 그려진 Bitmap을 반환합니다.

private fun drawPoint(bitmap: Bitmap, x: Float, y: Float): Bitmap {
    val workingBitmap = Bitmap.createBitmap(bitmap)
    val copyBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true)
    val canvas = Canvas(copyBitmap)
    var paint = Paint()

    paint.isAntiAlias = true
    paint.color = Color.GREEN
    canvas.drawCircle(x, y, 10f, paint)

    paint = Paint()
    paint.color = Color.GREEN
    paint.textSize = 17f
    canvas.drawText("P${pointCount}", x + 10, y - 10, paint)

    return copyBitmap
}

 

 

원하는 위치는 터치 이벤트에서 받아올 수 있습니다.

지금까지 정리된 메서드를 활용해서 터치 이벤트에서 포인트 찍히는 동작을 아래와 같이 구현하였습니다.

binding.ivFrame.setOnTouchListener { _, event ->
    if (event.action == MotionEvent.ACTION_UP) {
        // ImageView 비트맵
        val bitmap = getImageViewBitmap(binding.ivFrame)
        
        // 터치 이벤트 위치 
        val pointX = event.x * bitmap.width / binding.ivFrame.width
        val pointY = event.y * bitmap.height / binding.ivFrame.height

        pointCount++

        // 포인트 찍기
        val newBitmap = drawPoint(bitmap, pointX, pointY)
        
        // 이미지뷰 업데이트
        binding.ivFrame.setImageBitmap(newBitmap)
    }
    true
}

 

 

 

 

 

 

 

3. 결과