사용자 도구

사이트 도구

추적:
android:pdfdocument:measuringparagraph
measuringparagraph

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
android:pdfdocument:measuringparagraph [2024/12/07 16:38] – 구역 이거니맨android:pdfdocument:measuringparagraph [2024/12/09 23:31] (현재) – 이거니맨
줄 54: 줄 54:
  
 위와 같이 4개의 꼭지점을 만들어주면 본문의 위치가 결정되고 아래와 같이 각 구역이 나뉘어진다.  위와 같이 4개의 꼭지점을 만들어주면 본문의 위치가 결정되고 아래와 같이 각 구역이 나뉘어진다. 
 +
 +{{:android:pdfdocument:pdfpage구조.png?600|PDF Page구조}}
  
  
줄 87: 줄 89:
  
 ===== 글자의 경계선 확인하기 =====  ===== 글자의 경계선 확인하기 ===== 
 +
 +==== 1. Font metrics 이해 ==== 
 +
 +Android graphics API에서 서체의 픽셀을 다루는 기준선은 아래와 같다(([[https://zzaps.tistory.com/354|궁극의 잡 블로그 참조]])). 
 +
 +{{:android:pdfdocument:fontmetrics.jpg?600|Font metrics}}
 +
 +baseline을 기준(0)으로 위로 갈수록 음수, 아래로 갈 수록 양수라고 한다. 
 +
 +글자가 baseline보다 아래로 갈 수도 있음을 알 수 있다. 
 +
 +이에 따라서 글자나 문장의 경계선을 구할 때에도 baseline보다 아래의 위치도 고려해야 한다. 
 +
 +참고로, leading은 두 줄 이상일 떄 줄간격을 의미한다. 
 +
 +
 +==== 2. 글자의 높이와 폭을 확인하는 함수 ==== 
 +
 +
 +=== 가. getTextWidths === 
 +
 +각각의 글자의 폭을 개별로 계산해 주는 함수이다. 
 +
 +paint.getTextWidths( String text, float[] widths )(([[https://jamssoft.tistory.com/141|https://jamssoft.tistory.com/141 [What should I do?:티스토리]]]))
 +
 +=== 나. mesasureText === 
 +
 +float paint.measureText(String text)(([[https://jamssoft.tistory.com/141|https://jamssoft.tistory.com/141 [What should I do?:티스토리]]]))
 +
 +출력하고자 하는 글자들의 전체 폭을 구하는 함수이다. 자간이 존재하므로 measureText는 getTextWidths의 전체 합보다 크다. 
 +
 +
 +다음 그림은 설명의 편의를 위해 위에서 인용한 블로그에서 가져온 것이다. 
 +
 +
 +{{:android:pdfdocument:measuretext.png?600|MeasureText}}
 +
 +
 +=== 다. getTextBounds === 
 +
 +public void getTextBounds (String text, int start, int end, Rect bounds)
 +
 +
 +글자들의 전체 경계썬을 구해주는 함수이다. 폭의 경우 measureText와 비슷하지만 문장의 좌우양끝의 자간은 삭제하기 떄문에 measureText보다 결과값이 작다((https://stackoverflow.com/questions/7549182/android-paint-measuretext-vs-gettextbounds)). 
 +
 +
 +{{:android:pdfdocument:gettextbounds.png?600|getTextbounds}}
 +
 +
 +그런데 경계선을 구해주는 이 함수는 정확히 끝과 끝을 나타내주는 것은 아니다. 아마도 fontmetrics에서 baseline이라는 개념떄문에 그런것 아닌가 싶다. 
 +
 +그렇기 떄문에 아래에서는 정확히 어떤 부분을 나타내는 지를 확인해보고자 한다. 
 +
 +
 +==== 3. 글자의 경계확인하는 함수 ===== 
 +
 +위의 getTextBounds를 통해 다음과 같이 상자와 선을 그려 보았다. 
 +
 +=== 가. 상자와 선을 그리는 함수 ===
 +
 +다음과 같이 상자와 선을 그리는 함수를 만들었다.
 +
 +<code kotlin>
 +    // Text with underline, rectangle, outline
 +    fun richText(text : String, canvas: Canvas, switch : String) {
 +        title.setTypeface(fontStrawberry)
 +        title.color = ContextCompat.getColor(context, R.color.orange_80)
 +        title.textSize = 16f
 +        title.textAlign = Paint.Align.LEFT
 +
 +        // Draw Text
 +        canvas.drawText(text, currentPOS.X.toFloat(), currentPOS.Y.toFloat(), title)
 +
 +        // Font Effect
 +        when (switch) {
 +            "Rect" -> {
 +                val bounds = Rect()
 +                title.getTextBounds(text, 0, text.length, bounds)
 +                val rc = Rect(currentPOS.X, currentPOS.Y - bounds.height(), currentPOS.X + bounds.right, currentPOS.Y - bounds.height())
 +
 +                canvas.drawRect(rc, linePaint)
 +            }
 +            "LineBottom" -> {
 +                val bounds = Rect()
 +                title.getTextBounds(text, 0, text.length, bounds)
 +                canvas.drawLine(currentPOS.X.toFloat(), currentPOS.Y.toFloat() + bounds.bottom.toFloat(), currentPOS.X + bounds.right.toFloat(), currentPOS.Y + bounds.bottom.toFloat(), linePaint)
 +
 +                canvas.drawText("Bottom : " + bounds.bottom, currentPOS.X + bounds.right.toFloat() + 50, currentPOS.Y.toFloat(), textPaint)
 +            }
 +            "LineTop" -> {
 +                val bounds = Rect()
 +                title.getTextBounds(text, 0, text.length, bounds)
 +                canvas.drawLine(currentPOS.X.toFloat(), currentPOS.Y.toFloat() + bounds.top.toFloat(), currentPOS.X + bounds.right.toFloat(), currentPOS.Y + bounds.top.toFloat(), linePaint)
 +
 +                canvas.drawText("Top : " + bounds.top, currentPOS.X + bounds.right.toFloat() + 50, currentPOS.Y.toFloat(), textPaint)
 +            }
 +            "LineHeight" ->  {
 +                val bounds = Rect()
 +                title.getTextBounds(text, 0, text.length, bounds)
 +                canvas.drawLine(currentPOS.X.toFloat(), currentPOS.Y.toFloat() - bounds.height().toFloat(), currentPOS.X + bounds.right.toFloat(), currentPOS.Y - bounds.height().toFloat(), linePaint)
 +
 +                canvas.drawText("Height(minus) : " + -bounds.height(), currentPOS.X + bounds.right.toFloat() + 50, currentPOS.Y.toFloat(), textPaint)
 +            }
 +
 +        }
 +
 +    }
 +</code>
 +
 +getTextBounds에서 top과 bottom, 그리고 줄의 높이인 height()가 어떻 결과값을 나타내는지 확인하게 만들었다. 
 +
 +
 +=== 나. 호출하기 ===
 +
 +
 +다음과 같이 호출하였다.
 +
 +<code kotlin>
 +    // 상자만들기
 +    pdfUtil.linefeed()
 +    pdfUtil.titleText("글자의 크기를 재봅니다",  canvas, true)
 +
 +    pdfUtil.space()
 +    // 선을 그리기
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("Text Bounds : Bottom", canvas, "LineBottom")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("Text Bounds : Top", canvas, "LineTop")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("Text Bounds : Height", canvas, "LineHeight")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("텍스트 경계선 : 바닥", canvas, "LineBottom")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("텍스트 경계선 : 천장", canvas, "LineTop")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("텍스트 경계썬 : 줄의 높이", canvas, "LineHeight")
 +
 +</code>
 +
 +
 +아래 그림은 각각 [[http://font.junglim.com/|김정철명조체]]와 [[https://www.goryeong.go.kr/kor/contents.do?IDX=409|고령딸기체]]로 그린 글자에 대하여 경계선을 나타낸 것이다.  
 +
 +
 +^  고령딸기체  ^  김정철명조체  ^
 +|  {{:android:pdfdocument:딸기체.jpg?400|딸기체}}  |  {{:android:pdfdocument:명조체.jpg?400|명조체}}  |
 +
 +
 +LineHeight()로 줄의 높이를 정하는게 가장 시인성 있는 것을 알 수 있다. 따라서 앞으로는 이를 기준으로 글자의 높이를 정하겠다. 
 +
 +
 +===== 결론 ===== 
 +
 +==== 1. Rich Text ====
 +
 +다음과 같이 Rich Text를 구현할 수 있다.
 +
 +<code kotlin>
 +    // Text with underline, rectangle, outline, shadow
 +    fun richText(text : String, canvas: Canvas, switch : String) {
 +        title.setTypeface(fontKJCMyungjo)
 +        title.color = ContextCompat.getColor(context, R.color.orange_80)
 +        title.textSize = 16f
 +        title.textAlign = Paint.Align.LEFT
 +
 +        // Font Effect
 +        when (switch) {
 +            "Rect" -> {
 +                // Draw Text
 +                canvas.drawText(text, currentPOS.X.toFloat(), currentPOS.Y.toFloat(), title)
 +
 +                val bounds = Rect()
 +                title.getTextBounds(text, 0, text.length, bounds)
 +                val offset = 2
 +                val rc = Rect(currentPOS.X - offset, currentPOS.Y - bounds.height() + offset, currentPOS.X + bounds.right + offset, currentPOS.Y + bounds.bottom + offset)
 +
 +                canvas.drawRect(rc, linePaint)
 +            }
 +            "LineBottom" ->  {
 +                // Draw Text
 +                canvas.drawText(text, currentPOS.X.toFloat(), currentPOS.Y.toFloat(), title)
 +                val bounds = Rect()
 +                title.getTextBounds(text, 0, text.length, bounds)
 +                val offset = 2f
 +                canvas.drawLine(currentPOS.X.toFloat() - offset, currentPOS.Y.toFloat() + bounds.bottom + offset, currentPOS.X + bounds.right.toFloat() + offset, currentPOS.Y + bounds.bottom + offset, linePaint)
 +
 +                canvas.drawText("Height(minus) : " + -bounds.height(), currentPOS.X + bounds.right.toFloat() + 50, currentPOS.Y.toFloat(), textPaint)
 +            }
 +            "LineCenter" ->  {
 +                // Draw Text
 +                canvas.drawText(text, currentPOS.X.toFloat(), currentPOS.Y.toFloat(), title)
 +
 +                val bounds = Rect()
 +                title.getTextBounds(text, 0, text.length, bounds)
 +                val offset = 2f
 +                canvas.drawLine(currentPOS.X.toFloat() - offset, currentPOS.Y.toFloat() - (bounds.height() / 2).toFloat() + bounds.bottom, currentPOS.X + bounds.right.toFloat() + offset, currentPOS.Y - (bounds.height()  / 2).toFloat() + bounds.bottom, linePaint)
 +
 +                canvas.drawText("Center : " + -bounds.height(), currentPOS.X + bounds.right.toFloat() + 50, currentPOS.Y.toFloat(), textPaint)
 +            }
 +            "OutlineFill" -> {
 +                // draw outline of text
 +                title.style = Paint.Style.FILL_AND_STROKE
 +                title.strokeWidth = 1f
 +                title.color = ContextCompat.getColor(context, R.color.teal_700)
 +
 +                canvas.drawText( text, currentPOS.X.toFloat(), currentPOS.Y.toFloat(), title )
 +            }
 +            "Outline" -> {
 +                // draw outline of text
 +                title.style = Paint.Style.STROKE
 +                title.strokeWidth = 0.5f
 +                title.color = ContextCompat.getColor(context, R.color.teal_700)
 +
 +                canvas.drawText( text, currentPOS.X.toFloat(), currentPOS.Y.toFloat(), title )
 +            }
 +            "Shadow" -> {
 +                title.style = Paint.Style.FILL
 +                title.strokeWidth = 1f
 +                title.setShadowLayer(1f, 1f, 1f, ContextCompat.getColor(context, R.color.black))
 +                canvas.drawText( text, currentPOS.X.toFloat(), currentPOS.Y.toFloat(), title )
 +            }
 +
 +        }
 +
 +    }
 +
 +</code> 
 +
 +
 +==== 2. 예시 ====
 +
 +위의 글자꾸미기는 다음과 같이 PDF로 인쇄된다. 
 +
 +{{:android:pdfdocument:richtext.jpg?600|Rich Text}} 
 +
 +
 +<code kotlin>
 +    pdfUtil.space()
 +    // 선을 그리기
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("상자를 그립니다 : Rect", canvas, "Rect")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("밑줄을 그립니다 : LineBottom", canvas, "LineBottom")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("취소선을 그립니다 : LineCenter", canvas, "LineCenter")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("외곽선을 그리고 채웁니다. : OutlineFill", canvas, "OutlineFill")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("외곽선만 그립니다. : OutlineFill", canvas, "Outline")
 +
 +    pdfUtil.linefeed()
 +    pdfUtil.richText("그림자를 그립니다. : OutlineFill", canvas, "Shadow")
 +
 +</code>
android/pdfdocument/measuringparagraph.1733557081.txt.gz · 마지막으로 수정됨: 2024/12/07 16:38 저자 이거니맨