please help me to draw a text with rounded rectangle as background. I have to draw many texts on a canvas and the text has rounded background. SO what I am trying is to write a function "createTextBitmap" which return a bitmap image so that we can draw image(which return by the function) on a main canvas.
the 'createTextBitmap'function can return a created bitmap, the bitmap image is the one,which contains the text with rounded edge background...
i have tried one, which gives below.
private Bitmap ProcessingBitmap(String text,Paint paint, boolean lastPoint){
Bitmap bm1 = null;
Bitmap newBitmap = null;
Rect bounds = new Rect();
paint.getTextBounds(text, 0, text.length(), bounds);
float width = bounds.width();
float height =bounds.height();
float radius;
if (width > height){
radius = height/4;
}else{
radius = width/4;
}
Paint paint1 = new Paint();
paint1.setColor(Color.GREEN);
paint1.setStrokeWidth(5);
paint1.setStyle(Paint.Style.FILL);
float center_x, center_y;
center_x = width/4;
center_y = height/4;
final RectF rect = new RectF();
rect.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
Canvas canvas2 = new Canvas();
canvas2.drawRoundRect(rect, 0, 0, paint);
canvas2.drawText(text, 0, 0, paint);
return newBitmap;
}
and my question is How can we convert this canvas2 to a bitmap image? and image has the size of text bounds,
which look like
to convert your canvas into bitmap please do the following :
public Bitmap convertCanvasToBitmap(int width , int height) {
Bitmap drawnBitmap = null;
try {
drawnBitmap = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(drawnBitmap);
// now draw anything you want to the canvas
} catch (Exception e) {
e.printStackTrace();
}
return drawnBitmap;
}
so the idea is just pass the bitmap to the canvas , draw with the canvas it will be drawn into your bitmap .
and please refer to this answer here to see how to deal with the text size in the bitmap .
and please give me some feedback
Hope that helps .
you can create a bitmap, then call draw on that bitmap, something like this:
newBitmap = Bitmap.createBitmap(rect.width, rect.height, Bitmap.Config.ARGB_8888);
Canvas canvas2 = new Canvas(newBitmap);
Related
When drawing the text though, it gets blurred and not that crisp like when using below code. The only code I've used for the text painting on image can some one help me to solve this issue
code
public static Bitmap drawMultilineTextToBitmap(Context gContext, Bitmap bitmap, String gText) {
// prepare canvas
Resources resources = gContext.getResources();
float scale = resources.getDisplayMetrics().density;
//Bitmap bitmap = BitmapFactory.decodeResource(resources, gResId);
android.graphics.Bitmap.Config bitmapConfig = bitmap.getConfig();
// set default bitmap config if none
if (bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
// so we need to convert it to mutable one
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
TextPaint paint = new TextPaint(Paint.LINEAR_TEXT_FLAG|Paint.ANTI_ALIAS_FLAG);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
paint.setColor(Color.rgb(0, 0, 0));
paint.setFakeBoldText(true);
paint.setTextSize(10);
int textWidth = canvas.getWidth() - (int) (16 * scale);
// init StaticLayout for text
StaticLayout textLayout = new StaticLayout(gText, paint,
canvas.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f,
false);
// get height of multiline text
int textHeight = textLayout.getHeight();
// get position of text's top left corner
float x = (bitmap.getWidth() - textWidth);
float y = (bitmap.getHeight() - textHeight);
// draw text to the Canvas Left
canvas.save();
//canvas.translate(x, y);
canvas.translate((canvas.getWidth() / 2) - (textLayout.getWidth() / 2), y);
textLayout.draw(canvas);
canvas.restore();
return bitmap;
}
image
I guess here:
paint.setAntiAlias(true);
should be false. And two more methods which may relate to this issue:
paint.setAntiAlias(false);
paint.setFilterBitmap(false);
paint.setDither(true);
`
There is an requirement in my project to set any bitmap into mug and also edit bitmap and wright some text on image then past this bitmap to mug just like attached image .
I need a solution in Android or any supported library, Before I have tried to do this with Android Canvas and its method to draw arc But not reached my requirement.
/**
* Draw one image over other using the canvas paint and path drawing.
*/
public Bitmap createMaskedImageInImageCenterRightMug(Drawable back,
Bitmap bitmapToDrawInTheCenter) {
Bitmap backgroundBitmap = ((BitmapDrawable) back).getBitmap();
int hieghtBack = backgroundBitmap.getHeight();
int widthBack = backgroundBitmap.getWidth();
int hieghtFront = bitmapToDrawInTheCenter.getHeight();
int widthFront = bitmapToDrawInTheCenter.getWidth();
int widthToDrawOnMug = widthBack / 2;
backgroundBitmap = Bitmap.createScaledBitmap(backgroundBitmap, (int) canvas_width, hieghtBack, true);
// Create mask
Bitmap backgroundBitmapMask = Bitmap.createBitmap(backgroundBitmap, 7, 0, (int) (canvas_width / 2), hieghtBack);
if (widthToDrawOnMug <= widthFront) {
bitmapToDrawInTheCenter = Bitmap.createBitmap(
bitmapToDrawInTheCenter, (widthFront * 40) / 100, 0,
(widthFront * 60) / 100, hieghtFront);
}
Bitmap backgroundBitmapScaledMask = Bitmap.createScaledBitmap(
backgroundBitmapMask, widthToDrawOnMug, hieghtBack - 50, true);
bitmapToDrawInTheCenter = Bitmap.createScaledBitmap(
bitmapToDrawInTheCenter, backgroundBitmapScaledMask.getWidth(),
backgroundBitmapScaledMask.getHeight(), true);
Bitmap resultBitmap = Bitmap.createBitmap(
backgroundBitmapScaledMask.getWidth(),
backgroundBitmapScaledMask.getHeight(),
backgroundBitmapScaledMask.getConfig());
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(backgroundBitmapScaledMask, 0, 0, null);
canvas.drawBitmap(bitmapToDrawInTheCenter, 0, 0, paint);
return resultBitmap;
}
/**
* Draw one image over other using the canvas paint and path drawing.
*/
public Bitmap pasteOverMugForRightMug(Drawable back,
Bitmap bitmapToDrawInTheCenter) {
Bitmap backgroundBitmap = ((BitmapDrawable) back).getBitmap();
Bitmap resultBitmap = Bitmap.createBitmap(backgroundBitmap.getWidth(), backgroundBitmap.getHeight(), backgroundBitmap.getConfig());
Canvas canvas = new Canvas(resultBitmap);
canvas.drawBitmap(backgroundBitmap, new Matrix(), null);
Paint paint = new Paint();
canvas.drawBitmap(bitmapToDrawInTheCenter, 0, 25, paint);
return resultBitmap;
}
Here is my code . Some hard code values are used according plain Mug image Aspect Ratio.
Also Tried to do this with Open GL but it was very complex .
And and could not find method for cylinder shape in one of the image processing library Image magic.
if any one have an idea please share .
I have a square bitmap being displayed underneath a semi-transparent circle. The user can touch and drag the bitmap to position it. I want to be able to crop what ever part of the bitmap is under the circle. How can I do this?
have a look at RoundedBitmapDrawable in the support library
all you have to do is give it the bitmap and the corner radius
RoundedBitmapDrawable img = RoundedBitmapDrawableFactory.create(getResources(),bitmap);
img.setCornerRadius(radius);
imageView.setImageDrawable(img);
You Can make your imageview circular using RoundedBitmapDrawable
here is the code for achieving roundedImageview:
ImageView profilePic=(ImageView)findViewById(R.id.user_image);
//get bitmap of the image
Bitmap imageBitmap=BitmapFactory.decodeResource(getResources(), R.drawable.large_icon);
RoundedBitmapDrawable roundedBitmapDrawable=
RoundedBitmapDrawableFactory.create(getResources(), imageBitmap);
roundedBitmapDrawable.setCornerRadius(50.0f);
roundedBitmapDrawable.setAntiAlias(true);
profilePic.setImageDrawable(roundedBitmapDrawable);
You can use the power of PorterDuff to get your bitmap in any shape or path...
Here is an example:
public static Bitmap getCircular(Bitmap bm, int cornerRadiusPx) {
int w = bm.getWidth();
int h = bm.getHeight();
int radius = (w < h) ? w : h;
w = radius;
h = radius;
Bitmap bmOut = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmOut);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(0xff424242);
Rect rect = new Rect(0, 0, w, h);
RectF rectF = new RectF(rect);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawCircle(rectF.left + (rectF.width()/2), rectF.top + (rectF.height()/2), radius / 2, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bm, rect, rect, paint);
return bmOut;
}
Here is a link to a sample project. It has a transparent square over an image. You can pinch zoom or drag the bottom image and can corp it.
https://github.com/tcking/ImageCroppingView.
The square is made by using canvas. you can change it to any shape as u desired by changing canvas. Hop it helps you.
Hi, genious!
What's the problem?
I tried to draw text in front of marker. I'm going to get clear bitmap and draw text but bitmap is still clear - where is the text?
I tried to convert View to bitmap but it's also wasn't good idea.
PS: scale >= 1
mMap.addMarker(new MarkerOptions()
.position(new LatLng(56.83789, 60.5986)) .icon(BitmapDescriptorFactory.fromBitmap(drawTextToBitmap(getApplicationContext(), R.drawable.ic_maps_marker,"19"))));
//here I'm trying to draw text bitmap
public static Bitmap drawTextToBitmap(Context gContext,int gResId,String gText) {
Resources resources = gContext.getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap =
BitmapFactory.decodeResource(resources, gResId);
android.graphics.Bitmap.Config bitmapConfig =
bitmap.getConfig();
if(bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLACK);
paint.setTextSize((int) (14 * scale));
paint.setShadowLayer(1f, 0f, 1f, Color.WHITE);
Rect bounds = new Rect();
paint.getTextBounds(gText, 0, gText.length(), bounds);
int x = (bitmap.getWidth() - bounds.width())/2;
int y = (bitmap.getHeight() + bounds.height())/2;
canvas.drawText(gText, x * scale, y * scale, paint);
return bitmap;
}
Density was only necessary to determinate the size of the text. To draw text on canvas should not use scale, because of displacements x and y calculated for particular bitmap.
Try this:
canvas.drawText(gText, x, y, paint);
This work on 4 devices:
I'm trying to draw a text on the center of a bitmap however I can't do it even though I used align.center. The code is:
public Bitmap drawTextToBitmap(Context gContext, String gText) {
Resources resources = gContext.getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap =
BitmapFactory.decodeResource(resources, R.drawable.blank_marker);
android.graphics.Bitmap.Config bitmapConfig =
bitmap.getConfig();
// set default bitmap config if none
if(bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
// resource bitmaps are imutable,
// so we need to convert it to mutable one
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
// new antialised Paint
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
// text color - #3D3D3D
paint.setColor(Color.rgb(61, 61, 61));
// text size in pixels
paint.setTextSize((int) (25 * scale));
// text shadow
paint.setShadowLayer(1f, 0f, 1f, Color.WHITE);
// draw text to the Canvas center
Rect bounds = new Rect();
paint.setTextAlign(Align.CENTER);
paint.getTextBounds(gText, 0, gText.length(), bounds);
int x = (bitmap.getWidth() - bounds.width())/2;
int y = (bitmap.getHeight() + bounds.height())/2;
canvas.drawText(gText, x * scale, y * scale, paint);
return bitmap;
}
What am I doing wrong?
It's a lot more straightforward than you think.
Draw the text at half the Bitmap's width and height (center point) in combination with Paint.setTextAlign(Align.CENTER).
The alignment property will take care of the rest.
I guess none of the answers given above are good enough so I post my answer. Try it out guys, it will work on all devices and is not complex at all:
String text = "Text"; //your string
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(activity.getResources().getColor(R.color.white));
paint.setTextSize(30);
// draw text to the Canvas center
Rect boundsText = new Rect();
paint.getTextBounds(text, 0, text.length(), boundsText);
int x = (bitmap.getWidth() - boundsText.width()) / 2;
int y = (bitmap.getHeight() + boundsText.height()) / 2;
canvas.drawText(text, x, y, paint);
Where is the text drawing? The issue might be since you changed the text align to Align.CENTER. Your code calculating x and y assumes the text rendering is using Align.LEFT, I believe.
Either use setTextAlign(Align.CENTER) and render at the actual bitmap center, or use setTextAlign(Align.LEFT) and use the current x and y calculations you are using.