I have a custom font String (Font-Awesome Icon) and I want to draw it into a FloatingActionButton. For this reason I must convert the String to a Drawable like this.
The problem is that the icon is never centered, even if I try something like this:
public override void Draw(global::Android.Graphics.Canvas canvas)
{
Rect bounds = new Rect();
paint.GetTextBounds(text, 0, text.Length, bounds);
float x = (canvas.Width / 2f) - (bounds.Width() / 2f)
float y = (canvas.Height / 2f) - (bounds.Height() / 2f);
canvas.DrawText(text, x, y, paint);
}
The result will be something like this:
I can't figure out the problem.
Thanks in advance.
Edit:
If I do GetBounds, this is the result:
Related
I'm trying to use the PorterDuff library to trim a canvas circle and rectangle to form a quarter of a square in my custom view for my app, I managed to get it to work but not fully because it trims the square out but keeps the rest of the circle in, I'm using the SRC_IN mode which seems like the right mode to use from looking at the android documentation for it but it's not working as expected, this is a snippet of the onDraw method in my custom view class:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int height = getHeight();
int width = getWidth();
canvas.drawCircle(width / 2, height / 2, (width + height) / 10, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
Rect rectangle = new Rect(0, 0, width / 2, height / 2);
paint.setColor(Color.RED);
canvas.drawRect(rectangle, paint);
}
I'm drawing the circle in the center of the screen and then drawing the square in the top left of the screen and the PorterDuff mode should basically get the intersected part between the shapes but it just trims non-intersected square part out but doesn't do the same for the circle.
This is what it looks like:
I can't tell what i'm doing wrong here, hopefully someone can point it out.
the issue is with the source, the rectangle is the source in this context, draw the rectangle first then use PorterDuff.Mode.SRC_IN to cut the circle based on it.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int height = getHeight();
int width = getWidth();
Rect rectangle = new Rect(0, 0, width / 2, height / 2);
paint.setColor(Color.RED);
canvas.drawRect(rectangle, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawCircle(width / 2, height / 2, (width + height) / 10, paint);
}
I am trying to draw a text at the centre of canvas, Since canvas starts drawing text at BaseLine, I am not able to Place it at centre. If i can get the baseLine, then i can calculate the centre.
I have tried with paint.getFontMetrics() this gives ascent and descent but not baseLine.
Did you try this code
private void drawCenter(Canvas canvas, Paint paint, String text) {
canvas.getClipBounds(r);
int cHeight = r.height();
int cWidth = r.width();
paint.setTextAlign(Paint.Align.LEFT);
paint.getTextBounds(text, 0, text.length(), r);
float x = cWidth / 2f - r.width() / 2f - r.left;
float y = cHeight / 2f + r.height() / 2f - r.bottom;
canvas.drawText(text, x, y, paint);
}
All the calculations of paint.getFontMetrics() will happen with respect to baseLine. So if i just subtract (getMeasuredHeight() / 2f) - (fontMetrics.ascent / 2f) it will draw from center
I have a custom View which is supposed to draw some text bottom aligned.
Size of text should be 50% of view height.
How should I change this code to work correctly?
#Override
protected void onDraw(Canvas canvas)
{
float h = getMeasuredHeight();
float textHeight = h*0.5f;
paint.setTextSize(textHeight);
String str = "Abcdefghijklm";
paint.getTextBounds(str, 0, str.length(), bounds);
float height = bounds.height();
float yPos = height;
canvas.drawText(str, 0, yPos, paint);
}
Replace your yPos to:
float yPos = getHeight() - bounds.getHeight();
In hardware accelerated custom View added in ScrollView or ListView both of the following code snippets produces same result: (please ignore best practises for a sec)
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// centering stuff
float centerX = getWidth() / 2f;
float centerY = getHeight() / 2f;
float size = 80;
float halfSize = size / 2f;
float left = centerX - halfSize;
float top = centerY - halfSize;
RectF oval = new RectF(left, top, left + size, top + size);
Path path = new Path();
path.addArc(oval, 160, 359);
Paint paint = new Paint();
paint.setTextSize(30);
paint.setStyle(Style.STROKE);
canvas.drawTextOnPath("Hello world", path, 0, 0, paint); //<--- line A
canvas.drawCircle(centerX, centerY, 10, paint); //<--- line B
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// centering stuff
float centerX = getWidth() / 2f;
float centerY = getHeight() / 2f;
float size = 80;
float halfSize = size / 2f;
float left = centerX - halfSize;
float top = centerY - halfSize;
RectF oval = new RectF(left, top, left + size, top + size);
Path path = new Path();
path.addArc(oval, 160, 359);
Paint paint = new Paint();
paint.setTextSize(30);
paint.setStyle(Style.STROKE);
canvas.drawCircle(centerX, centerY, 10, paint); //<--- line B
canvas.drawTextOnPath("Hello world", path, 0, 0, paint); //<--- line A
}
Same Result:
But with later code snippet, as soon as you scroll the ScrollView (I have invisible dummy View below so I can scroll) and helloworld touches ActionBar, something very intersting happens and you see something that intelligent humankind used to see in old Windows OS .
I know drawTextOnPath() is not supported in hardware accelration mode, but then why it works if you call it first?
drawTextOnPath() is supported by hardware acceleration after Android 4.1
This is mentioned officially here: https://code.google.com/p/android/issues/detail?id=37925
but the next comment seems to indicate your problem in a way so maybe a bug.
Of course for pre 4.1 just dont make it use HW accel - Set a software layer type on your View by calling View.setLayerType(View.LAYER_TYPE_SOFTWARE, null) and try to get a tradeoff on perf vs errors
I have a line that should get thinner the longer it gets. The problem is, that you can clearly see a jump when it gets a pixel thinner. Is there a way to do subpixel rendering/antialiasing on Android?
canvas.drawRect() takes float values, but it's ignoring those. Here's the code:
#Override
protected void onDraw(Canvas canvas) {
float width = getMeasuredWidth() / (float) getMeasuredHeight() * getMinimumHeight();
float left = (getMeasuredWidth() - width) / 2.0f;
canvas.drawRect(left, 0, left + width, getMeasuredHeight(), paint);
super.onDraw(canvas);
}
The paint object has ANTI_ALIAS_FLAG enabled and contains a solid color.
This is the default line:
This is when it gets longer and thinner. It should have some anti aliasing on the sides, though to make the whole transition seems smoother.
This seems to do a better job:
#Override
protected void onDraw(Canvas canvas) {
float width = getMeasuredWidth() / (float) getMeasuredHeight() * getMinimumHeight();
float left = (getMeasuredWidth() - width) / 2.0f;
paint.setStrokeWidth(width * getResources().getDisplayMetrics().density);
canvas.drawLine(left, 0, left, getMeasuredHeight(), paint);
super.onDraw(canvas);
}