drawText의 문자가 밑으로 삐져나오지 않게 하기

커스텀 뷰를 만들어 쓸때 drawText로 문자를 출력한다.

그런데 문자 위치가 살짝 밑으로 치우쳐 있는 느낌을 받곤 한다.

 

처음엔 기분탓이라고 생각했지만... 계속된 찝찝함에 확인해 보니...

아주 미세하게 아래로 내려와 있다는 사실을 깨달았다.

 

한 예이다.

 

override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        val rect = RectF(100f, 100f, 300f, 300f)
        val rectPaint = TextPaint().apply {
            flags = Paint.ANTI_ALIAS_FLAG
            color = Color.LTGRAY
        }

        val text = "Test"
        val textPaint = TextPaint().apply {
            flags = Paint.ANTI_ALIAS_FLAG
            color = Color.BLACK
            textSize = 100f
        }

        canvas.drawRect(rect, rectPaint)
        canvas.drawText(text, rect.left, rect.bottom, textPaint)
    }

 

 

출력 결과는 이렇다. 빨간색 원으로 표시한 부분을 자세히 보면 1픽셀정보 삐져 나와 있다.

 

 

 

 

해결 방법은 문자의 bound를 얻어 bottom 만큼 빼주는 것이다.

 

override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        val rect = RectF(100f, 100f, 300f, 300f)
        val rectPaint = TextPaint().apply {
            flags = Paint.ANTI_ALIAS_FLAG
            color = Color.LTGRAY
        }

        val text = "Test"
        val textPaint = TextPaint().apply {
            flags = Paint.ANTI_ALIAS_FLAG
            color = Color.BLACK
            textSize = 100f
        }

        /* 추가 */
        val textRect = Rect()
        textPaint.getTextBounds(text, 0, text.length, textRect)

        canvas.drawRect(rect, rectPaint)
        canvas.drawText(text, rect.left, rect.bottom - textRect.bottom/* 추가 */, textPaint)
    }

 

 

자! 딱맞게 문자가 출력되었다.

 

 

 

아주 작은 차이이기 때문에 굳이 신경쓸필요는 없지만.. 그래도 단 몇줄로 해결 가능하니 기억해 두었다가 필요할때 쓰면 좋을듯 싶다.

 

 

 

 

 

도움이 되셨다면~ 정성으로 빚은 저희 앱!  많은 이용 바래요:)

 

https://meorimal.com/index.html?tab=spaceship

우주선 - 방치형 인공지능 투자 체험기

 

https://meorimal.com/subway.html

지하철어디있니