Note that there are some explanatory texts on larger screens.

plurals
  1. POAndroid monospaced font size
    primarykey
    data
    text
    <p>I am doing a graphical code editor where I can modify constants by dragging them. I want to highlight the commands in the code with blue rectangles such that left and right borders lay in the middle of characters, but the blue rectangles are still misaligned in some cases:</p> <p><img src="https://i.stack.imgur.com/AePBN.png" alt="Highlighting problem"></p> <p>My idea is to first compute the char width and char space, and then multiply them afterwards by the position of my command in my text.</p> <pre><code>val mCodePaint = new TextPaint() mCodePaint.setTypeface(Typeface.MONOSPACE) mCodePaint.setAntiAlias(true) mCodePaint.setSubpixelText(true) mCodePaint.setColor(0xFF000000) val dimText = new Rect() val dimText1 = new Rect() val dimText2 = new Rect() final val s1 = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" final val s2 = "WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW" // dimText1.width() = char_length * s1.length + space_between_chars*(s1.length-1) // dimText2.width() = char_length * s2.length + space_between_chars*(s2.length-1) def getCharWidth(): Float = { mCodePaint.getTextBounds(s1, 0, s1.length, dimText1) mCodePaint.getTextBounds(s2, 0, s2.length, dimText2) (dimText2.width() * (s1.length - 1) - dimText1.width() *(s2.length - 1))/(s1.length - s2.length) } def getIntercharWidth(): Float = { mCodePaint.getTextBounds(s1, 0, s1.length, dimText1) mCodePaint.getTextBounds(s2, 0, s2.length, dimText2) (dimText1.width * s2.length - dimText2.width * s1.length)/(s1.length - s2.length) } // The main function that draw the text def drawRuleCode(canvas: Canvas, ...): Unit = { var char_width = getCharWidth() // At run time, equals 29 var space_width = getIntercharWidth() // At run time, equals -10 for(action &lt;- ...) { ... val column = action.column val length = action.length val x1 = left_x+8 + column*char_width + (column-1)*space_width - 0.5f*space_width val x2 = x1 + length*char_width + (length-1)*space_width + 1*space_width rectFData.set(x1, y1, x2, y2) canvas.drawRoundRect(rectFData, 5, 5, selectPaint) } for(line &lt;- ...) { ... canvas.drawText(s, left_x + 8, ..., mCodePaint) } </code></pre> <p>Do you have any idea on how to overcome that small alignment problem? Sometimes it makes a huge difference, especially when the expression is long.</p> <p>EDIT: I drawed the computed text bounds, and actually they are wrong. The text is slightly larger than the rectangle given by getTextBounds (violet line): <img src="https://i.stack.imgur.com/8wH6y.png" alt="enter image description here"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload