How to draw a line to perfectly align top of a text?
sunil sunny
I am able to align the baseline perfectly. The getLineBounds will give a baseline that is perfectly aligned with text (lineBottom - descent). I am using rect.top as the topline which will give a line with padding on top see the screenshot.
The main issue is I have different fonts.And this code works perfectly on some fonts.
This is the code
int baseline = getLineBounds(i, rect);
int topLine = rect.top;
canvas.drawLine(rect.left - padding, baseline, rect.right + padding,
baseline, paint);
canvas.drawLine(rect.left - padding, topLine, rect.right + padding, topLine,
paint);
canvas.drawLine(rect.left - padding, (baseline + topLine) / 2, rect.right
+ padding, (baseline + topLine) / 2, paint1);
This is what I have tried.
1) Used a "StaticLayout" to get the top line but didn't make any difference.
2) Used paint to get the height of font and add it with baseline
paint.setTextSize(getTextSize());
paint.setTypeface(getCurrentTypFace());
paint.getTextBounds(getText().toString(), 0, getText().length(), r);
int height = r.height();
int topLine = baseline + height;
3) Tried with FontPadding =false android:includeFontPadding="false"
So my question is how to get the the topline like the baseline. Any help with this is greatly appreciated.
Markus A.
Try paint.getTextBounds(...) again, but use r.top, (or actually -r.top) instead of r.height:
paint.setTextSize(getTextSize());
paint.setTypeface(getCurrentTypFace());
paint.getTextBounds(getText().toString(), 0, getText().length(), r);
int ascent = r.top;
int topLine = baseline + ascent;
r.height gives the distance from the very bottom of the character to the very top, whereas r.top should give the negative of the distance from the baseline to the very top.
If this doesn't work either, you might just need to draw the text to a temporary canvas in memory and run through the pixels row by row until you find a black one to measure the ascent yourself.
In either case, make sure you use a text that has capital letters in it. If you use a text with only lower case, it will likely give you the coordinates of the orange dashed line instead.
Note that both methods will give you the coordinate of a pixel at the very top edge of the font, not in the center of the stroke. Also, some letters in some fonts might overshoot the coordinate you really want to draw by quite a bit. Your safest bet is probably to pick a standard-string for measuring, like a capital O for the blue line and a lower-case o for the orange line (if it's not a script-font that has a little squiggle in the top right corner of the O that goes above the top of the circle...) and then store some small offset for each font that tells you how thick the line-width of the stroke is, so your lines go through the top of the letter rather than above it.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: How to share RSpec let variables between shared contexts?
- Next: How to RemoveAll list rows matching a condition using linq?
Related
Related Related
- 1
Align text to top of line
- 2
How to perfectly align line boundries along both the left and right margins
- 3
How do you align an image with the top of some text with line height > 1 and allow the text to wrap around it?
- 4
How do you align an image with the top of some text with line height > 1 and allow the text to wrap around it?
- 5
How to align text on a sloping line?
- 6
How to align Label of text area to top and right?
- 7
How to align text vertically equal top CSS
- 8
How to align Label of text area to top and right?
- 9
Align Text and Images perfectly next to Each Other
- 10
Text will not align to top of div
- 11
Top align text in flexbox
- 12
How to Vertically "center" align the multi line text
- 13
How to align first row of table with a line of text
- 14
How to align first row of table with a line of text
- 15
How do I align the text in line with the picture?
- 16
How to draw a line with css and show text or image on it
- 17
How to draw a line before a text in CSS?
- 18
How to draw line chart using jfreechart from top to bottom?
- 19
How to add line on the top of the text in excel 2016
- 20
How can I align text in a cell to the top with openpyxl?
- 21
How can I align text in a cell to the top with openpyxl?
- 22
How to make the text box align on top with in the bluebox with css3?
- 23
Draw triangle at bottom or top of line
- 24
Draw vertical line on top of image
- 25
Align text on slanted line
- 26
How to draw vertical separation line between two text line android?
- 27
How to draw vertical separation line between two text line android?
- 28
How can I align the text with the text in the next line in console?
- 29
Align checkbox to top left of text
Comments