I'm trying to cut a circle into semicircles using android canvas. The circle is loaded using Bitmap class.
Here's the example:
I've been looking for any solution, especially the ones which enable you to crop a bitmap using coordinates, but to no avail.
Any help is appreciated, thanks before..
I had the same challenge before and I solved it in a simple way, The main idea is simple! Use a Bitmap mask, Fill the pixel you want to save (in this case a pie) with the highest integer value (0xFFFFFFFF), So you can use a bitwiseAND to gain the result color, Other pixels of the mask Bitmap will be a transparent black color (0x00000000), When you're done with the mask, Create the result Bitmap and fill the pixels as the method below does:
public Bitmap applyPieMask(Bitmap src, float startAngle, float sweepAngle) {
int width = src.getWidth();
int height = src.getHeight();
//create bitmap mask with the same dimension of the src bitmap
Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mask);
canvas.drawColor(0x00000000);//fill mask bitmap with transparent black!
//init mask paint
Paint maskPaint = new Paint();
maskPaint.setColor(0xFFFFFFFF);//pick highest value for bitwise AND operation
maskPaint.setAntiAlias(true);
//choose entire bitmap as a rect
RectF rect = new RectF(0, 0, width, height);
canvas.drawArc(rect, startAngle, sweepAngle, true, maskPaint);//mask the pie
Bitmap result = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
for (int i = 0; i < height; i++) {
for (int j = 0; j < width; j++) {
//combine src color and mask to gain the result color
int color = mask.getPixel(i, j) & src.getPixel(i, j);
result.setPixel(i, j, color);
}
}
return result;
}
And here we go ...
public void doIt(View view) {
ImageView imageView = (ImageView) findViewById(R.id.iv);
Bitmap src = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(src);
canvas.drawColor(Color.BLUE);//fill src bitmap with blue color
imageView.setImageBitmap(applyPieMask(src, -90, 60));
}
Hope you find it helpful
Related
I'm trying to draw a bunch of bitmaps vertically one below the other like this :
Original Bitmap :
Result expected :
Code :
int repeater = 4;
Bitmap bitmapTextSticker = ImageUtils.drawable2Bitmap(ResourceUtils.getDrawable(R.drawable.icon));
Bitmap background = Bitmap.createBitmap(bitmapTextSticker.getWidth(), bitmapTextSticker.getHeight() * repeater, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(background);
int top = 0;
for (int i = 0; i < repeater; i++) {
top = (i == 0 ? 0 : top + bitmapTextSticker.getHeight());
canvas.drawBitmap(bitmapTextSticker, 0f, top, null);
}
The above code is working, but the output is cropped.
I'm not sure if I'm missing something in your question, but all you have to do is change the top coordinate for each bitmap when calling drawBitmap(). In your specific code, just add:
top += height;
inside the for loop
Edit: from your updated question, it sounds like a Bitmap scaling issue, not a problem with position. Even your 1st bitmap is cropped. So, you should probably use a different canvas.drawbitmap() method:
public void drawBitmap (Bitmap bitmap, Rect src, RectF dst, Paint paint)
You can specify the dimensions of the destination Rect, which should let it scale properly. So, your code should be:
for(...){
...
RectF dest = new RectF(new Rect(0, top, bitmapTextSticker.getWidth(), bitmapTextSticker.getHeight()));
canvas.drawBitmap(bitmapTextSticker, null, dest, null);
}
The issue was I didn't set the density for the bitmap and the canvas :
ArrayList<Bitmap> bitmaps = new ArrayList<>();
for (int i = 0; i < repeater; i++) bitmaps.add(bmp);
int height = 0;
for (Bitmap map : bitmaps) height += map.getHeight();
Bitmap bitmap = Bitmap.createBitmap(bmp.getWidth(), height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.setDensity(DisplayMetrics.DENSITY_MEDIUM);
bitmap.setDensity(DisplayMetrics.DENSITY_MEDIUM);
int drawHeight = 0;
for (Bitmap map : bitmaps) {
if (map != null) {
canvas.drawBitmap(map, 0, drawHeight, null);
drawHeight += map.getHeight();
}
}
return bitmap;
I have an image, and I am trying to overlay a cropped version of the image over the original. Something like this:
Original
Overlay Image
Image after the overlay image is cropped to roughly 50%
Right now, my code below reverses what I want, and returns an image like this:
public void setOverlay(ImageView image, Bitmap originalBitmap, double percentageCompleted) {
int percentHeight;
int height = originalBitmap.getHeight();
Bitmap cropped;
if(percentageCompleted == 0){
cropped = Bitmap.createBitmap(overlay, 0, 0, overlay.getWidth() , 0 );
} else {
percentHeight = (int) Math.floor(height * (percentageCompleted));
Log.d("HEIGHT", Double.toString(height));
Log.d("PERCENT Completed", Double.toString(percentageCompleted));
Log.d("PERCENT HEIGHT", Integer.toString(percentHeight));
cropped = Bitmap.createBitmap(overlay, 0, 0, overlay.getWidth() , height-percentHeight);
}
originalBitmap = overlay(originalBitmap, cropped);
//set imageview to new bitmap
image.setImageBitmap(originalBitmap );
}
public Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
Bitmap bmp3 = bmp1.copy(Bitmap.Config.ARGB_8888,true);//mutable copy
Canvas canvas = new Canvas(bmp3 );
canvas.drawBitmap(bmp2, new Matrix(), null);
return bmp3;
}
I know I could reverse the image files, but I want to start with the original image and have the overlay draw upwards, rather than starting with the overlay, and drawing the original downwards. Any help is appreciated!
You can use this method:
Canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)
Here is my overlay method that may meet your need:
public static Bitmap overlay(Bitmap base, Bitmap overlay, Float percentage) {
Bitmap resultBitmap = Bitmap.createBitmap(base.getWidth(), base.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
// base bitmap
canvas.drawBitmap(base, 0F, 0F, paint);
// overlay bitmap
int yOffset = (int) (percentage * base.getHeight());
Rect rect = new Rect(0, yOffset, overlay.getWidth(), overlay.getHeight());
canvas.drawBitmap(overlay, rect, rect, paint);
return resultBitmap;
}
I'm trying to create a bitmap to put in a notification's LargeIcon, I set the text but I can't get to set a rounded background color.
public Bitmap textAsBitmap(String text, float textSize, int textColor) {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setTextSize(textSize);
paint.setColor(textColor);
paint.setTextAlign(Paint.Align.LEFT);
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;
}
A diffrent aproach to the same result is welcome
I'm having problems while trying to rotate a picture with java android canvas.drawImage. I'm doing a little game, and I'm painting different pictures on the screen using my drawImage function. However now I want to rotate some little images, I have created a function called drawMirroredImage for this. However now this little images don't appear on the same place.
Here is my code:
public void drawImage(Image Image, int x, int y) {
canvas.drawBitmap(((AndroidImage) Image).bitmap, x, y, null);
}
public void drawMirroredImage(Image Image, int x, int y) {
canvas.save();
canvas.scale(-1.0f, 1.0f);
canvas.drawBitmap(((AndroidImage) Image).bitmap, x - canvas.getWidth(), y, null);
canvas.restore();
}
Anyone knows what I'm doing wrong?
Lot of thanks for helping
Following will work for you.
I found it somewhere on SO itself but don't remember where.
public static Bitmap getReflectionedBitmap(Context context,int resourceId,Bitmap originalImage,int reflectionGap) {
if(originalImage==null)
originalImage = BitmapFactory.decodeResource(context.getResources(),resourceId);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
// This will not scale but will flip on the Y axis
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
// Create a Bitmap with the flip matix applied to it.
// We only want the bottom half of the image
Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
height / 2, width, height / 2, matrix, false);
// Create a new bitmap with same width but taller to fit reflection
Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
(height + height / 2), Config.ARGB_8888);
// Create a new Canvas with the bitmap that's big enough for
// the image plus gap plus reflection
Canvas canvas = new Canvas(bitmapWithReflection);
// Draw in the original image
canvas.drawBitmap(originalImage, 0, 0, null);
// Draw in the gap
Paint deafaultPaint = new Paint();
deafaultPaint.setColor(0xffffffff);
canvas.drawRect(0, height, width, height + reflectionGap , deafaultPaint);
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,
originalImage.getHeight(), 0, bitmapWithReflection.getHeight()
+ reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
// Set the paint to use this shader (linear gradient)
paint.setShader(shader);
// Set the Transfer mode to be porter duff and destination in
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
+ reflectionGap, paint);
return bitmapWithReflection;
}
I tweaked the snippet a little bit to use it with resource images as well.
Pass in null as parameter in place of Bitmap if you want to create reflection for images in resource.
I'm trying to round corners of a bitmap using this code below. The problem is that no matter what I set the paint's color to, e.g. Color.TRANSPARENT , it is always black. How can I actually clip the corners of a bitmap, not just color them black?
Thanks!
public static Bitmap roundCorners(Bitmap src, int radius) {
//Create a *mutable* location, and a canvas to draw into it
int width = src.getWidth();
int height = src.getHeight();
Bitmap result = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas canvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
RectF rect = new RectF(0, 0, width, height);
Shader bitmapShader = new BitmapShader(src, TileMode.CLAMP, TileMode.CLAMP);
paint.setColor(0xFF000000);
paint.setShader(bitmapShader);
canvas.drawRoundRect(rect, radius, radius, paint);
return result;
}
There's an easier method that works in one pass. Just draw a rounded rect but set a BitmapShader on the Paint. This will fill the rounded rect with your bitmap. No need to change the xfermode or to call drawBitmap.