How to draw on canvas two texts with relative positioning?
Example:
User: John Doe
Status: foreigner
Code used produce text "one on top of another" issue:
Canvas canvas = page.getCanvas();
int titleBaseLine = 72;
int leftMargin = 54;
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(40);
canvas.drawText(user, leftMargin, titleBaseLine, paint);
canvas.drawText(userName, leftMargin, titleBaseLine, paint);
Final answer:
int titleBaseLine = 60;
int leftMargin = 20;
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(40);
Paint paintBold = new Paint();
paintBold.setTypeface(Typeface.create(Typeface.DEFAULT,Typeface.BOLD));
paintBold.setColor(Color.BLACK);
paintBold.setTextSize(40);
canvas.drawText(userText, leftMargin + leftMargin, titleBaseLine, paintBold);
canvas.drawText(username, leftMargin + paintBold.measureText(userText) + leftMargin + 10, titleBaseLine, paint);
canvas.drawText(statusText, leftMargin + leftMargin, titleBaseLine * 2, paintBold);
canvas.drawText(statusName, leftMargin + paintBold.measureText(statusText) + leftMargin + 10, titleBaseLine * 2, paint);
Related
I am trying to convert text into image using below code :
public Bitmap textAsBitmap(String text, float textSize) {
Paint paint = new Paint(ANTI_ALIAS_FLAG);
paint.setTextSize(textSize);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setTextAlign(Paint.Align.CENTER);
float baseline = -paint.ascent(); // ascent() is negative
int width = (int) (paint.measureText(text) + 0.5f); // round
int height = (int) (baseline + paint.descent() + 0.5f);
Bitmap image = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(image);
canvas.drawText(text, 0, baseline, paint);
return image;
}
Its convert text into image but problem is show half text.It should show "favorite subject is english"!
what i am doing wrong ? or how should i solve this problem
Choose your width & height wisely,
Something like I did in my case
public Bitmap textAsBitmap(String text, float textSize) {
Paint paint = new Paint(ANTI_ALIAS_FLAG);
paint.setTextSize(textSize);
paint.setColor(Color.BLACK);
paint.setTextAlign(Paint.Align.LEFT);
float baseline = -paint.ascent(); // ascent() is negative
int width = (int) (paint.measureText(text) + 0.0f); // round
int height = (int) (baseline + paint.descent() + 0.0f);
int actualWidth = width;
if (width > height)
height = width;
else
width = height;
Bitmap image = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(image);
canvas.drawText(text, width / 2 - actualWidth / 2, baseline, paint);
return image;
}
Problem is with paint.setTextAlign(Paint.Align.CENTER);, this property considers center as (0,0). So your text is actually at center according to (0,0).
Just remove paint.setTextAlign(Paint.Align.CENTER); and your code is working!!
I'm overriding View on Android to do some custom drawing, but the rendered view has not very good quality, especially the text. I have found a couple of solutions, but none worked for me. Attaching the code here. Thank you for any help.
#Override
protected void onDraw(Canvas canvas) {
int width = canvas.getWidth();
int height = canvas.getHeight();
Point a = new Point(0, 0);
Point b = new Point(width / 2, height);
Point c = new Point(width, 0);
Path trianglePath = new Path();
trianglePath.moveTo(a.x, a.y);
trianglePath.lineTo(b.x, b.y);
trianglePath.lineTo(c.x, c.y);
trianglePath.lineTo(a.x, a.y);
Paint paint = new Paint();
paint.setStrokeWidth(1);
paint.setColor(Color.parseColor("#7A7A7A"));
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
canvas.drawPath(trianglePath, paint);
Paint textPaint = new Paint();
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(Color.WHITE);
textPaint.setTextSize(height / 6);
textPaint.setTypeface(TypefaceUtils.getTypeface(getContext(), TypefaceUtils.AVAILABLE_FONTS.ROBOTO_THIN));
String receive = getContext().getString(R.string.receive_password).split("\n")[0];
String password = getContext().getString(R.string.receive_password).split("\n")[1];
Rect receiveBounds = new Rect();
Rect passwordBounds = new Rect();
textPaint.getTextBounds(receive, 0, receive.length(), receiveBounds);
textPaint.getTextBounds(password, 0, password.length(), passwordBounds);
canvas.drawText(
receive,
(width - receiveBounds.width()) / 2,
height / 3 - receiveBounds.height() + receiveBounds.height() / 5,
textPaint);
canvas.drawText(
password,
(width - passwordBounds.width()) / 2,
height / 3 + receiveBounds.height(),
textPaint);
canvas.scale(1, 1);
}
Try setting textpaint.setAntiAlias(true);
I have a small question. I'm painting some RectFs on my canvas, but nothing happened.
I paint one filled RectF and another stroked RectF => filled background with a border.
For the first "field" everything is ok, but not for the second "field" (rect2).
The positions are checked. The last text is printed in that RectF (rect2) where the rect is not painted.
I uploaded an image on my FTP server. For the description of my problem it might be easier to understand.
Here is my code. I think it is a logical error?
// Fill rect
rect.set(fPosition, fPositionY, pts[2] - 10, fRectHeight);
paint.setColor(Color.GREEN);
paint.setStyle(android.graphics.Paint.Style.FILL);
paint.setStrokeWidth(0);
canvas.drawRoundRect(rect, 10, 10, paint);
// Border
paint.setColor(Color.BLACK);
paint.setStyle(android.graphics.Paint.Style.STROKE);
paint.setStrokeWidth(3);
canvas.drawRoundRect(rect, 10, 10, paint);
// Text
float fTextSize = fRectHeight - 40;
TextPaint textPaint = new TextPaint();
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setTextSize(fTextSize);
float textHeight = textPaint.descent() - textPaint.ascent();
float textOffset = (textHeight / 2) - textPaint.descent();
canvas.drawText(dataStrings.getGewicht(), rect.centerX(), rect.centerY() + textOffset, textPaint);
// Leistung pro Stunde
rect2 = new RectF();
paint = new android.graphics.Paint();
fPositionY = fPositionY + fRectHeight + 50;
float fRectWidth = pts[2] / 2;
fRectHeight = (float) (pts[17] / 5);
// Fill rect
rect2.set(fPosition, fPositionY, fRectWidth, fRectHeight);
paint.setColor(Color.YELLOW);
paint.setStyle(android.graphics.Paint.Style.FILL);
paint.setStrokeWidth(0);
canvas.drawRoundRect(rect2, 10, 10, paint);
// Border
paint.setColor(Color.BLACK);
paint.setStyle(android.graphics.Paint.Style.STROKE);
paint.setStrokeWidth(3);
canvas.drawRoundRect(rect2, 10, 10, paint);
// Text
fTextSize = fRectHeight - 40;
textPaint = new TextPaint();
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setTextSize(fTextSize);
textHeight = textPaint.descent() - textPaint.ascent();
textOffset = (textHeight / 2) - textPaint.descent();
canvas.drawText(dataStrings.getLeistung(), rect2.centerX(), rect2.centerY() + textOffset, textPaint);
Marking few markers and adding names using Canvas and Paint on map. But am able to see the text only 9 characters rest are hiding (not visible). How to do it?
private Bitmap drawTitleOnMarkerIcon(MarkingInfo markingInfo) {
Bitmap bm = BitmapFactory.decodeResource(getResources(), AddLocationTypeIcon.getIcon(markingInfo.getType())).copy(
Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(bm);
Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setAntiAlias(true);
paint.setFakeBoldText(true);
paint.setTextSize(16);
paint.setTextAlign(Align.LEFT);
canvas.drawText(markingInfo.getName(), 0, 60, paint);
BitmapDrawable draw = new BitmapDrawable(getResources(), bm);
return draw.getBitmap();
}
I should able to see complete text, When I have more than 15 character just I need to wrap it to next line. search many sites and posted query previously but I got no solution. please do help to achieve this task
private Bitmap textAsBitmap(String text, float textSize, int textColor) {
Paint paint = new Paint();
paint.setTextSize(textSize);
paint.setColor(textColor);
paint.setFakeBoldText(true);
paint.setTextAlign(Paint.Align.LEFT);
int width = (int) (paint.measureText(text) + 0.5f); // round
float baseline = (int) (-paint.ascent() + 0.5f); // ascent()is negative
int height = (int) (baseline + paint.descent() + 0.5f);
Bitmap image = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(image);
canvas.drawText(text, 0, baseline, paint);
return image;
}
MarkerOptions().title(Name()).icon(BitmapDescriptorFactory.fromBitmap(textAsBitmap));
I am drawing a text on android canvas using the following piece of code
Rect rect = new Rect();
paint.getTextBounds(text, 0, text.length(), rect);
canvas.translate(xPosition + position.getX(), yPosition + position.getY());
paint.setColor(Color.BLUE);
paint.setStyle(Style.STROKE);
canvas.drawRect(rect, paint);
paint.setStyle(Style.FILL);
paint.setColor(text_color);
canvas.translate(-(xPosition + position.getX()), -(yPosition + position.getY()));
canvas.rotate(getDegreesFromRadians(angle), xPosition + position.getX() + rect.exactCenterX(), yPosition + position.getY() + rect.exactCenterY());
canvas.drawText(text, xPosition + position.getX(), yPosition + position.getY(), paint);
This code takes care of the rotation of the text and it works fine. I am drawing a blue rectangle around the text using the above code. Now my problem is that the rectangle is not rotating along with the text. It still remains the same. Is there any way to rotate the rectangle drawn in android canvas?
please use
canvas.save();
canvas.rotate();
//stuff to draw that should be rotated
canvas.restore();
else you have to compensate for every rotation afterwards
I found my own answer. I used the following code
Rect rect = new Rect();
paint.setColor(text_color);
paint.setStyle(Style.FILL);
paint.getTextBounds(text, 0, text.length(), rect);
canvas.translate(xPosition + position.getX(), yPosition + position.getY());
canvas.translate(-(xPosition + position.getX()), -(yPosition + position.getY()));
canvas.rotate(getDegreesFromRadians(angle), xPosition + position.getX() + rect.exactCenterX(), yPosition + position.getY() + rect.exactCenterY());
canvas.drawText(text, xPosition + position.getX(), yPosition + position.getY(), paint);
paint.getTextBounds(text, 0, text.length(), rect);
canvas.translate(xPosition + position.getX(), yPosition + position.getY());
paint.setColor(Color.BLUE);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(4);
rect = new Rect(rect.left - 10, rect.top - 10, rect.right + 10, rect.bottom + 10);
canvas.drawRect(rect, paint);
The thing is the whole canvas is being rotated for rotating the text. So i just need to draw the rectangle after the rotation of the canvas.