I need to crop a Bitmap, but instead of having a rectangular cropped image (which I managed successfully to do), I need it to be any form defined by coordinates.
I'm following the answer from this thread: Cutting a multipoint ploygon out of Bitmap and placing it on transparency , and trying to implement it, but unfortunatly it does not clip the image.
I did as in the description, but it seems there's a bug somewhere. The image is drawn in rectangular way.
Am I missing something?
Bitmap originalBitmap=BitmapFactory.decodeResource(getResources(), R.drawable.test_image);
// Image cropped
Bitmap croppedBitmap=Bitmap.createBitmap(originalBitmap, 10, 10, 200, 200);
Canvas canvas=new Canvas(croppedBitmap);
// Create a path
Path path=new Path();
path.setFillType(FillType.INVERSE_EVEN_ODD);
path.moveTo(0, 0);
path.moveTo(0, 100);
path.moveTo(100, 0);
path.moveTo(0, 0);
// Paint with Xfermode
Paint paint=new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
// Draw the path
canvas.drawPath(path, paint);
imageView.setImageBitmap(croppedBitmap);
I was very close to the solution. Here it is:
compositeImageView = (ImageView) findViewById(R.id.imageView);
Bitmap bitmap1=BitmapFactory.decodeResource(getResources(), R.drawable.batman_ad);
Bitmap bitmap2=BitmapFactory.decodeResource(getResources(), R.drawable.logo);
Bitmap resultingImage=Bitmap.createBitmap(320, 480, bitmap1.getConfig());
Canvas canvas = new Canvas(resultingImage);
Paint paint = new Paint();
paint.setAntiAlias(true);
Path path=new Path();
path.lineTo(150, 0);
path.lineTo(230, 120);
path.lineTo(70, 120);
path.lineTo(150, 0);
canvas.drawPath(path, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap2, 0, 0, paint);
compositeImageView.setImageBitmap(resultingImage);
Related
I have a question regarding a circular ImageView. When I try to set the background color of my ImageView, it actually ends up being a square and not a circle when in reality I would want the ImageView to be a simple circular ImageView with some text as the image. Here was my attempt.
ImageView imageView = postViewHolder.fourthCommenter;
Bitmap b=Bitmap.createBitmap(30, 30, Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(b, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setAntiAlias(true);
Canvas c = new Canvas(b);
c.drawCircle(b.getWidth()/2, b.getHeight()/2, b.getWidth()/2, paint);
c.drawText("+10",30,30,paint);
imageView.setBackgroundColor(ContextCompat.getColor(context, R.color.material_color_grey_200));
imageView.setImageBitmap(b);
All I want is to have the image show a grey circular Imageview with the word "+10" in it. What shows up is a simple square Imageview with no text in it. I can't see what I am doing wrong.
Any help would be apprecaited.
Thanks!
EDIT: Here is an example of what I would want. I want to have an image that looks exactly like the +16 image shown on this photo:
All I want is to have the image show a grey circular Imageview
Try this code
Bitmap picture = BitmapFactory.decodeResource(getResources(), R.mipmap.add_image);
ImageView imageView = (ImageView) findViewById(R.id.imgProfilePicture);
imageView.setImageBitmap(getRoundedBitmap(picture));
public Bitmap getRoundedBitmap(Bitmap bitmap){
Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setAntiAlias(true);
Canvas c = new Canvas(circleBitmap);
c.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
return circleBitmap;
}
Your xml file
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgProfilePicture"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_marginBottom="20dp"
app:civ_border_width="3dp"
app:civ_border_color="#color/light_gray" />
and add this in build.gradle
compile 'de.hdodenhof:circleimageview:2.1.0'
Cirular ImageView Done !
Not sure if it's the proper way to do it , but it should work for your case :
First use this to create the bitmap with the required circle shape :
public Bitmap getCircledBmp(Context mContext,Bitmap bmp){
Canvas canvas = new Canvas(bmp);
int color = ContextCompat.getColor(mContext, R.color.material_color_grey_200);
Paint paint = new Paint();
Rect rect = new Rect(0, 0, bmp.getWidth(), bmp.getHeight());
RectF rectFloat = new RectF(rect);
paint.setAntiAlias(true);
paint.setColor(color);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawOval(rectFloat, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bmp, rect, rect, paint);
return bmp;
}
Then add the text that you want :
public Bitmap drawText(String text, Bitmap bmp, int textSize) {
//text dimensions
TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextSize(textSize);
textPaint.setColor(Color.BLACK);
textPaint.setTextAlign(Paint.Align.CENTER);
StaticLayout mTextLayout = new StaticLayout(text, textPaint,
bmp.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);
Canvas canvas = new Canvas(bmp);
//draw text
canvas.save();
canvas.translate((canvas.getWidth() / 2), (canvas.getHeight() / 2) -
((mTextLayout.getHeight() / 2)));
mTextLayout.draw(canvas);
canvas.restore();
return bmp;
}
In the end you should get your desired image like this :
Bitmap bmp = Bitmap.createBitmap(100,100,Bitmap.Config.ARGB_8888); //change the values whatever you like
ImageView imageView = postViewHolder.fourthCommenter;
imageview.setImageBitmap(drawText("+10",getCircledBmp(this,bmp),30));
I am trying to draw multiple bitmap using this code.
Paint paint = new Paint();
Path path = new Path(); // path of crop
for (int i = 0; i < Crop.points.size(); i++) {
path.lineTo(Crop.points.get(i).x, Crop.points.get(i).y);
canvas.drawPath(path, paint);
bitmap1= highlightImage(bitmap1); //bitmap1 drawn completely
canvas.drawBitmap(bitmap1, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));// select inside part of crop
canvas.drawBitmap(bitmap2, 0, 0, paint);// draw crop part
highlightImage is a method for blurring a bitmap. This canvas first draw bitmap1 that is blurred and then draw bitmap2.
The problem is, when I use only this code:
bitmap1= highlightImage(bitmap1);
canvas.drawBitmap(bitmap1, 0, 0, paint);
the bitmap1 is blurred and drawn correctly, but when I use this
bitmap1= highlightImage(bitmap1);
canvas.drawBitmap(bitmap1, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap2, 0, 0, paint);
the bitmap1 is drawn but without the blur effect. What's the problem?
the first image is the image of blur bitmap
the second one is for the time that two bit map is drawn. you can see that is transparent without blur effect.
[first ][1]
[second ][2]
[what I want][3]
This is what I have:
Bitmap result = Bitmap.create(600, 600, Config.ARG_8888);
Canvas canvas = new Canvas(result);
canvas.clipPath(path) // custom path is a rotated rectangle that has an offset x and y within the 600x600 rectangle
canvas.drawBitmap(sourceBitmap, 0, 0, new Paint());
canvas.save();
When I check the result bitmap, I only see the clip path which is I want, but I want the result image to be the same size as the clip path and not still 600x600.
Thanks
as i said in the comment above, you can use drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) to crop your Bitmap result to the cropped one or you can do it directly:
// get the Bitmap
Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
// setup sample Path
Path path = new Path();
path.moveTo(10, 10);
path.lineTo(30, 10);
path.lineTo(30, 20);
path.close();
RectF bounds = new RectF();
path.computeBounds(bounds, true);
Rect pathBounds = new Rect();
bounds.roundOut(pathBounds);
Bitmap outBitmap = Bitmap.createBitmap(pathBounds.width(), pathBounds.height(), Bitmap.Config.ARGB_8888);
Shader shader = new BitmapShader(b, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Canvas c = new Canvas(outBitmap);
Paint paint = new Paint();
paint.setShader(shader);
c.translate(-pathBounds.left, -pathBounds.top);
c.drawPath(path, paint);
I am trying to create a circular image, by putting a circular transparent image over it...
But I want to create the circular image as in Google+, is there any other way, without using canvas?
Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader (bitmap, TileMode.CLAMP, TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
paint.setColor(Color.parseColor("#BAB399"));
Canvas c = new Canvas(circleBitmap);
c.drawCircle(bitmap.getWidth()/2, bitmap.getHeight()/2, bitmap.getWidth()/2, paint);
img.setImageBitmap(circleBitmap);
public Bitmap getCroppedBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
bitmap.getWidth() / 2, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
or use a mask that have into the center a transparent circle
In android.support.v4 a new class is introduced for creating circular image or rounded cornered image.
Which is RoundedBitmapDrawablethere's no need to use customized methods.To set any image as round cornered or circular follow the below syntax.
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(mContext.getResources(), bitmap);
roundedBitmapDrawable.setCornerRadius(pixels);
imageView.setImageDrawable(roundedBitmapDrawable);
It's that simple. Source
Can we construct a bitmap from a rect.
I draw a bitmap in a rect and want strokes drawn on the bitmap image become part of the image.
I am wondering if I can construct a bitmap from a Rect so the new bitmap has the old image and the strokes as a single image.
Thank You
You can always take a canvas to help you create an already decoded bitmap the way you want:
Bitmap originalBmp = null;//Here goes original Bitmap...
ImageView img = null;//Any imageview holder you are using...
Bitmap modifiedBmp = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);//Configure with your proper size and color
Canvas canvas = new Canvas(modifiedBmp);
//At this point the modified bitmap has the original one, starting from here, you can add any overlay you want...
canvas.drawBitmap(originalBmp, 0, 0, new Paint());
//And do all the other modifications you want here...
canvas.drawLines(new float[]{}, null);
canvas.drawCircle(x, y, radius, null);
//At this point the modified bitmap will have anything you added
img.setImageBitmap(modifiedBmp);
// IF YOU ARE OVERRIDING ONDRAW METHOD
public void onDraw(Canvas canvas){
//Here DO your DRAW BITMAP NOTE: paint must be already created...
canvas.drawBitmap(bt, 0, 0, paint);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas.drawRect(30, 30, 80, 80, paint);
super.onDraw(canvas);
}
Regards!
Yes you can , Using canvas you can draw something on your old bimtap .
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
// do some canvas drawing
canvas.drawBitmap(bitmap, rect, rect, paint);