I have a View which draws a rectangle with a line of text inside of it. The view uses break text to ensure that no text extends outside of the rectangle; it ignores any text that does. This works fine for some characters, but often Strings made up of 'l's and 'f's extend outside of the rectangle. So, I'm in need of a sanity check here: Is there some obvious flaw in my below code, or is it possible that Paint.breakText(...) is inaccurate?
public void onDraw(Canvas canvas)
{
int MARGIN = 1;
int BORDER_WIDTH = 1;
Paint p = new Paint();
p.setAntiAlias(true);
p.setTextSize(12);
p.setTypeface(Typeface.create(Typeface.SERIF, Typeface.NORMAL));
RectF rect = getRect();
float maxWidth = rect.width() - MARGIN - BORDER_WIDTH * 2;
String str = getText();
char[] chars = str.toCharArray();
int nextPos = p.breakText(chars, 0, chars.length, maxWidth, null);
str = str.substring(0, nextPos);
float textX = MARGIN + BORDER_WIDTH;
float textY = (float) (Math.abs(p.getFontMetrics().ascent) + BORDER_WIDTH + MARGIN);
canvas.drawText(str, textX, textY, p);
p.setStrokeWidth(BORDER_WIDTH);
p.setStyle(Style.STROKE);
canvas.drawRect(rect, p);
}
This was fixed by: Paint.setSubpixelText(true);
The problem might be how you draw your rectangle. Strokes are not outside of the rectangle, half of the stroke is inside, half is outside.
Related
Been looking for a way to invert the text when I draw the texts on my canvas object. I could not find any related problem here in SO. (Maybe I am using the wrong keywords.) This is what I want to achieve with drawText():
Is this feature available in android.graphics package?
No, there isn't any similar feature in android.graphics.
But your use case is similar to the Night Mode feature. There are some ways to achieve this for example:
Using different styles for your TextView
Create a custom TextView to invert the background and text colors.
This code solved my issue.
String textToWrite = "Hello World";
int padding = 5;
int paddingTop = padding;
int paddingBottom = padding;
int paddingLeft = padding;
int paddingRight = padding;
Rect bounds = new Rect();
mPaint.getTextBounds(textToWrite, 0, textToWrite.length(), bounds);
mPaint.setColor(Color.WHITE);
Bitmap bitmap = Bitmap.createBitmap(
bounds.width() + paddingLeft + paddingRight,
bounds.height() + paddingTop + paddingBottom,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.BLACK);
int y = (bitmap.getHeight() + bounds.height() - padding)/2 ;
canvas.drawText(textToWrite, paddingLeft, y, mPaint);
If you want to add this inverted text to the rest of your canvas, simply draw bitmap to your global canvas like so:
mOriginalCanvas.drawBitmap(bitmap, mCurrentX, mCurrentY, mOriginalPaint);
I am trying to calculate the width of a multiline text paragraph. To my knowledge, the only class that can do this in Android is the StaticLayout (or DynamicLayout) class. When using this class i do no get the proper length of my text snippet but rather the measured the dimensions are sometimes smaller and sometimes greater depending on the text size.
So i am basically looking for a way to reliably measure the width of a multiline text string.
The following image shows how the measured width diverges from the actual text length in various text sizes.
The screenshot is created running the the following code in a custom View:
#Override
protected void onDraw( Canvas canvas ) {
for( int i = 0; i < 15; i++ ) {
int startSize = 10;
int curSize = i + startSize;
paint.setTextSize( curSize );
String text = i + startSize + " - " + TEXT_SNIPPET;
layout = new StaticLayout( text,
paint,
Integer.MAX_VALUE,
Alignment.ALIGN_NORMAL,
1.0f,
0.0f,
true );
float top = STEP_DISTANCE * i;
float measuredWidth = layout.getLineMax( 0 );
canvas.drawRect( 0, top, measuredWidth, top + curSize, bgPaint );
canvas.drawText( text, 0, STEP_DISTANCE * i + curSize, paint );
}
}
You could try using get text bounds.
private int calculateWidthFromFontSize(String testString, int currentSize)
{
Rect bounds = new Rect();
Paint paint = new Paint();
paint.setTextSize(currentSize);
paint.getTextBounds(testString, 0, testString.length(), bounds);
return (int) Math.ceil( bounds.width());
}
private int calculateHeightFromFontSize(String testString, int currentSize)
{
Rect bounds = new Rect();
Paint paint = new Paint();
paint.setTextSize(currentSize);
paint.getTextBounds(testString, 0, testString.length(), bounds);
return (int) Math.ceil( bounds.height());
}
I had a similar issue where the measured text width was off by a bit, once you set a Typeface to the paint this will go away.
So before you use the paint object in the StaticLayout just set the Typeface:
textPaint.setTypeface(Typeface.create("sans-serif", Typeface.NORMAL))
or whatever typeface you want.
Here's a way where you can get the multiline width of any text length. usableButtonWidth can be a given text space. I used usableButtonWidth = width of the button - padding. But any default value can be used.
Using StaticLayout, you can get the height of the text for the usableButtonWidth. Then I just try to reduce the available width by decreasing it by 1px in a loop. If the height increases then we come to know that the previously used width was the maximum permissible.
Return this value as the width of multiline text.
private int getTextWidth(){
if(this.getText().length() != 0){
Paint textPaint = new Paint();
Rect bounds = new Rect();
textPaint.setTextSize(this.getTextSize());
if(mTypeface != null){
textPaint.setTypeface(mTypeface);
}
String buttonText = this.getText().toString();
textPaint.getTextBounds(buttonText, 0, buttonText.length(), bounds);
if(bounds.width() > usableButtonWidth){
TextPaint longTextPaint = new TextPaint();
longTextPaint.setTextSize(this.getTextSize());
if(mTypeface != null){
longTextPaint.setTypeface(mTypeface);
}
StaticLayout staticLayout = new StaticLayout(this.getText(), longTextPaint, usableButtonWidth,
Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
int textLineCount = (int)Math.ceil(staticLayout.getHeight() / bounds.height());
int multiLineTextWidth = usableButtonWidth;
while ((int)Math.ceil(staticLayout.getHeight() / bounds.height()) == textLineCount && multiLineTextWidth > 1){
multiLineTextWidth--;
staticLayout = new StaticLayout(this.getText(), longTextPaint, multiLineTextWidth,
Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
}
return multiLineTextWidth+1;
} else {
return bounds.width();
}
} else {
return 0;
}
}
I need to read the text/string from database and convert them into images. I tried the following code but I am getting only blank images. Please help
public Bitmap textAsBitmap(String text, float largest, int textColor) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(textColor);
// int width = (int) (paint.measureText(text) + 0.5f); // round
paint.setAntiAlias(true);
paint.setTypeface(Typeface.MONOSPACE);
paint.setTextSize(16);
int width = 400;
// float baseline = (int) (paint.ascent() + 0.5f) + 3f;
// int height = (int) ((baseline + paint.descent() + 0.5f) + 3);
int height = 400;
Bitmap image = Bitmap.createBitmap(width, height,
Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(image);
canvas.drawText(text, 0, 5, paint);
return image;
}
I haven't tried this, but do you perhaps need to first fill your bitmap with a colour that contrasts with textColor? This would certainly seem like an important thing to do in any case -- the documentation for createBitmap() does not specify the initial content of the bitmap, so it could theoretically be anything, and may change in future versions of the system.
I've been struggling with text measuring and scaled canvases.
When the canvas is unscaled, getTextBounds and measureText deliver accurate results. However, when the canvas is scaled both methods do not deliver results that match the actual size of a printed text.
For testing I've created a subclass of View with the following onDraw method:
final float scaling = 0.51f;
final int fontSize = 50;
canvas.scale(scaling, scaling);
font = Typeface.create("Arial", Typeface.NORMAL);
Paint paint = new Paint();
paint.setColor(0xff4444ff);
paint.setTypeface(font);
paint.setTextSize(fontSize);
paint.setAntiAlias(true);
int x = 10;
int y = 100;
final String text = "Lorem ipsum dolor sit amet, consectetur adipisici elit...";
canvas.drawText(text, x, y, paint);
// draw border using getTextBounds
paint.setColor(0xffff0000);
paint.setStyle(Paint.Style.STROKE);
paint.setTypeface(font);
paint.setTextSize(fontSize);
Rect bounds = new Rect();
paint.getTextBounds(text, 0, text.length(), bounds);
bounds.offset(x, y);
paint.setColor(0x80ffff00);
canvas.drawRect(bounds, paint);
// draw border using measureText
float w = paint.measureText(text);
bounds.left = x;
bounds.right = (int) Math.ceil(bounds.left + w);
bounds.top -= 10;
bounds.bottom += 10;
paint.setColor(0x8000ffff);
paint.setPathEffect(new DashPathEffect(new float[] { 10, 10 }, 0));
canvas.drawRect(bounds, paint);
for scaling = 0.5 I get the following output:
for scaling = 0.51 the following result is shown:
The yellow solid border marks the rect delivered from getTextBounds, the dashed cyan rect is rendered using the width delivered from measureText.
As you can see, the text with scaling = 0.5 is smaller than the measured dimensions and with scaling=0.51 the drawn text is way bigger than the measured dimension.
Any help is appreciated!
Ok, just found out how to circumvent the issue.
The problem is that the Paint does not know about the Canvas scaling. Therefore measureText and getTextBounds deliver the unscaled result. But since the font size does not scale linearly (however, the drawn rect does ), you have to make up for that effect manually.
So the solution would be:
// paint the text as usual
Paint paint = new Paint();
paint.setTypeface(font);
paint.setTextSize(fontSize);
canvas.drawText(text, x, y, paint);
// measure the text using scaled font size and correct the scaled value afterwards
Paint paint = new Paint();
paint.setTypeface(font);
paint.setTextSize(fontSize * scaling);
float w = paint.measureText(text) / scaling;
Using Mono for Android I had to use display metrics as shown here:
public override System.Drawing.SizeF MeasureString(MyFont f, string text)
{
Rect r = new Rect();
f.DrawingFont.GetTextBounds(text, 0, text.Length, r);
//Manual scaling using DisplayMetrics due to Android
//issues for compatibility with older versions
Android.Util.DisplayMetrics metrics = new Android.Util.DisplayMetrics();
GetDisplay.GetMetrics(metrics);
return new System.Drawing.SizeF(r.Width(), r.Height() * metrics.Density);
}
Where f.DrawingFont is an Androdid.Text.TextPaint GetDisplay is:
private Display GetDisplay()
{
return this.GetSystemService(Android.Content.Context.WindowService).JavaCast<Android.Views.IWindowManager>().DefaultDisplay;
}
And the same method in Java is:
private Display getDisplay() {
return ((WindowManager) getContext().getSystemService(
Context.WINDOW_SERVICE)).getDefaultDisplay();
}
I encounter this problem when displaying text on SurfaceView, some chars can climb up on others, code is here:
private static void fakeDraw(Canvas c)
{
Paint mPaint = new Paint();
int color = 0xff000000;
mPaint.setColor(color);
mPaint.setStrokeWidth(2);
mPaint.setStyle(Style.FILL);
mPaint.setAntiAlias(true);
FontMetricsInt fm = mPaint.getFontMetricsInt();
int fh = Math.abs(fm.top);
int left = 0;
int top = 100;
Rect smallClip = new Rect(left, top-fh, left + 200, top + 30);
Rect bigClip = new Rect(0, 0, getW(), getH());
c.drawRect(bigClip, mPaint);
String text1 = "Evi";
String text2 = ">>";
String text3 = "Tom";
color = 0xff303030;
mPaint.setColor(color);
c.drawRect(smallClip, mPaint);
color = 0xffffffff;
mPaint.setColor(color);
c.drawText(text1, left, top, mPaint);
Rect bounds = new Rect();
mPaint.getTextBounds(text1, 0, text1.length(), bounds);
left += bounds.width();
c.drawText(text2, left, top, mPaint);
left -= bounds.width();
top += 12;
c.drawText(text3, left, top, mPaint);
mPaint.getTextBounds(text3, 0, text3.length(), bounds);
left += bounds.width();
c.drawText(text2, left, top, mPaint);
}
In the case of a second text Tom>> all displayed correctly, but the first text Evi>> not. The problem is that the chars >> draws in Evi draw space(last char "i")!! It is possible to see if you zoom the picture, what am I doing wrong and how to fix this?
screen shot can be found here: http://img192.imageshack.us/img192/2782/imagexs.png
Hm, Try specifying particular x / y co-ords? with numbers rather than pre defined strings? give the ">>" different coordinates for it's draw space.
just add some space manually
c.drawText(text2, left + 2, top, mPaint);
or add a space char (" ") at start of text2