Cut off a part of canvas - java

I have a canvas with graph, i get it from server. Sometimes the graph is not in the center. Now i want to cut off the rest part of canvas. I have the graph max and min x,y points. Ho to cut off the rest part of canvas? I can't find a solution.

First create a tempBitmap of size full width and Height like this
Bitmap tempImage = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Bitmap finalBitmap = Bitmap.createBitmap(tempImage, (int) minX, (int) minY, width, height);
here finalBitmap is that which you want.
You can draw it in canvas and also save as bitmap.

Related

Resize Bitmap to 512x512 Without changing original aspect ratio

I have a created bitmaps. Sizes are not specific. Sometimes 120x60 , 129x800 , 851x784. Its not have a specific value... I want to make these bitmaps resizing to 512x512 always but without changing original images aspect ratio. And without cropping. New image must have canvas 512x512 and original image must be center without any cropping.
I was resizing my bitmaps with this function but it makes images really bad because image fitting X and Y . I don't want image to fit x and y on same time fits one of it and keeps its aspect ratio.
public Bitmap getResizedBitmap(Bitmap bm, int newWidth, int newHeight) {
int width = bm.getWidth();
int height = bm.getHeight();
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// CREATE A MATRIX FOR THE MANIPULATION
Matrix matrix = new Matrix();
// RESIZE THE BIT MAP
matrix.postScale(scaleWidth, scaleHeight);
// "RECREATE" THE NEW BITMAP
Bitmap resizedBitmap = Bitmap.createBitmap(
bm, 0, 0, width, height, matrix, false);
bm.recycle();
return resizedBitmap;
}
What I have;
What I want;
Ok, so you're really close. I can't test this right now, but basically what needs to be changed is
1) You need to apply the same scale to both X and Y, so you need to pick the smaller one (try the bigger one if that doesn't work).
matrix.postScale(Math.min(scaleWidth, scaleHeight), Math.min(scaleWidth, scaleHeight));
2) The result will be a bitmap where at least one side is 512px large, the other one will be smaller. So you need to add the padding to fit that side to 512px (equally left and right/top and bottom for centering). In order to do so, you need to create an new bitmap of the desired size:
Bitmap outputimage = Bitmap.createBitmap(512,512, Bitmap.Config.ARGB_8888);
3) and lastly depending on what side of the resizedBitmap is 512px you need to draw resizedBitmap to the correct position in outputImage
Canvas can = new Canvas(outputimage);
can.drawBitmap(resizedBitmap, (512 - resizedBitmap.getWidth()) / 2, (512 - resizedBitmap.getHeight()) / 2, null);
Note here, that 512 - resizedBitmap.getWidth() results in 0 and therefor no padding at the side with correct size.
4) Now return outputImage
Here's a simplification in Kotlin that does both the scale and the translation with the matrix, skipping the intermediate bitmap.
Note that it also sets the background color to white for new pixels, which I needed for my image pipeline. Feel free to remove that if you don't need it.
fun resizedBitmapWithPadding(bitmap: Bitmap, newWidth: Int, newHeight: Int) : Bitmap {
val scale = min(newWidth.toFloat() / bitmap.width, newHeight.toFloat() / bitmap.height)
val scaledWidth = scale * bitmap.width
val scaledHeight = scale * bitmap.height
val matrix = Matrix()
matrix.postScale(scale, scale)
matrix.postTranslate(
(newWidth - scaledWidth) / 2f,
(newHeight - scaledHeight) / 2f
)
val outputBitmap = Bitmap.createBitmap(newWidth, newHeight, bitmap.config)
outputBitmap.eraseColor(Color.WHITE)
Canvas(outputBitmap).drawBitmap(
bitmap,
matrix,
null
)
return outputBitmap
}

Draw a circle partially filled dynamically

I'm trying to play with canvas. I could draw some triangles and fill it partially drawing a path and paint it.I used Path, Points and Line. It was a great exercise to remember trigonometry. For now I would like to do the same with a circle, as you can see below. I want set a percentage and to fill this circle until the circle's height * percentage. How could me draw a circle like that with canvas or some lib?
You should think about it a little differently. The way I'd do it is to draw a coloured rectangle (where the height is a percentage of the circle's intended height) and then crop it with a circle. This answer explains how to crop an image in a circular shape (I'd rather link than retype the code here).
I finally got do it. I created two methods. As roarster suggested, I created a white rectangle as mask where the height is a percentage of the circle's intended height.
private Bitmap drawWithPorterDuff(Bitmap original, Bitmap mask, PorterDuff.Mode mode) {
Bitmap bitmap = Bitmap.createBitmap(original.getWidth(), original.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint maskPaint = new Paint();
maskPaint.setAntiAlias(true);
canvas.drawBitmap(original, 0, 0, null);
maskPaint.setXfermode(new PorterDuffXfermode(mode));
canvas.drawBitmap(mask, 0, 0, maskPaint);
Bitmap edge = BitmapFactory.decodeResource(getResources(), R.drawable.edge);
maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.ADD));
canvas.drawBitmap(edge, 0, 0, maskPaint);
return bitmap;
}
public Bitmap createMask(int width, int height) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
paint.setAntiAlias(true);
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawRect(0, 0, width, height, paint);
return bitmap;
}
At view's constructor I created a init() method with the folling code
PorterDuff.Mode mode = PorterDuff.Mode.SRC_IN;
Bitmap original = BitmapFactory.decodeResource(getResources(), R.drawable.blue_graph);
Bitmap mask = createMask(original.getWidth(), (int) ((original.getHeight()) * (1 - percentage)));
Bitmap result = drawWithPorterDuff(original, mask, mode);
imageView.setImageBitmap(result);

Set Bitmap to specific size inside imageview

Trying to resize a bitmap and set to a specific part of an imageview. The imageview is square and I wish to have the bitmap in the bottom right corner. Width to be 10% of imageview and height to be 30%.
int w = imageview.getWidth();
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.vertical_bar_green);
imageview.setImageBitmap(Bitmap.createScaledBitmap(bm, w/10, w*30/100, false));
imageview.setScaleType(ScaleType.FIT_END);
The result is the bitmap is the full height of the imageview and the width is much larger.
How can I set specific points to place the bitmap?
From the documentation for END (the matrix used by FIT_END).
Compute a scale that will maintain the original src aspect ratio, but
will also ensure that src fits entirely inside dst. At least one axis
(X or Y) will fit exactly. END aligns the result to the right and
bottom edges of dst.
You will probable want to use a custom matrix for this, probably built with setRectToRect().
For example:
Matrix matrix = new Matrix();
RectF from = new RectF(0, 0, bm.getIntrinsicWidth(), bm.getIntrinsicHeight());
RectF to = new RectF(view.getWidth() * 0.9, view.getHeight() * 0.7, view.getWidth(), view.getHeight());
matrix.setRectToRect(from, to, Matrix.ScaleToFit.FILL);
view.setScaleType(ScaleType.MATRIX);
view.setImageMatrix(matrix);
(I'm not sure if you wanted to keep the original proportions or not, if you want it then use FIT_END for setRectToRect()).

Rotate image without shrinking on Android

I need to create a compass on an app i am working on. So i tried to create a new view called CompassView which basically extends imageview, shows a bitmap that has east west north south pointed on it, uses sensors to find the degrees the phone is pointed at, and rotate the image accordingly so that it would create an actual compass. But the problem is if i try to rotate the image to some angles like 45 degrees, it shrinks down. Here are some images to explain it better.
As you can see, the second image is shrinked down when i try to rotate around 45. What i want it to do is this:
Here is the code i am currently using:
Bitmap bMap = BitmapFactory.decodeResource(getResources(),
R.drawable.compass);
Matrix xMatrix = new Matrix();
xMatrix.reset();
xMatrix.postRotate(360-mValue, 75, 75); //This is 75 because 150 is the image width
Bitmap bMapRotate = Bitmap.createBitmap(bMap, 0, 0,
bMap.getWidth(), bMap.getHeight(), xMatrix, true);
setImageBitmap(bMapRotate);
Any help would be appreciated. THanks
EDIT: (SOLUTION)
I finally got it working thanks to the accepted answer. Here is the code i am using for anyone who wants to know how it worked:
RotateAnimation rAnimAntiClockWise = new RotateAnimation(
360 - mValue, 360 - event.values[0],
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
//mValue is the angle in degrees and i subtracted it from 360 to make it anticlockwise, and event.values[0] is the same thing as mValue
rAnimAntiClockWise.setFillAfter(true);
rAnimAntiClockWise.setInterpolator(new LinearInterpolator());
rAnimAntiClockWise.setDuration(0);
startAnimation(rAnimAntiClockWise);
You can use a alternative trick which will work like same as rotate and doesn't resize the image. I actually rotate the image with 45 degree angle and remain changes after animation.
rAnimAntiClockWise = new RotateAnimation(0.0f, 45.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
rAnimAntiClockWise.setFillAfter(true);
rAnimAntiClockWise.setInterpolator(new LinearInterpolator());
bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.rotate);
rAnimAntiClockWise.setDuration(100);
img_rotate.startAnimation(rAnimAntiClockWise);
The issue is that your new image is actually larger, due to the corners of the source "sticking out", and so the view is scaling it down to fit.
A few possible approaches:
After the above code, call Bitmap.createBitmap(Bitmap source, int x, int y, int width, int height), copying the center region of the correct size. Easy given the code you have, but creates a useless intermediate bitmap.
Instead of giving the transform and source image to createBitmap, just create a mutable Bitmap of the correct size , wrap it in a Canvas , and tell the Canvas to render the rotated image .
bMapRotate = Bitmap.createBitmap(
bMap.getWidth(), bMap.getHeight(), bMap.getConfig());
Canvas canvasRotate = new Canvas(bMap);
canvasRotate.drawBitmap(bMap, xMatrix, paint); // any opaque Paint should do
Keep the code you have, but tell the view to crop rather than scale when rendering.

java image crop

I am aware of BufferedImage.getSubimage However, it cant deal with cropping images that are smaller than the cropping size throwing the exception:
java.awt.image.RasterFormatException: (y + height) is outside raster
I want to be able to crop either a PNG/JPG/GIF to a certain size however if the image is smaller than the cropping area centre itself on a white background. Is there a call to do this? Or do I need to create an image manually to centre the image on if so, how would I go about this?
Thanks
You cannot crop an image larger, only smaller. So, you start with the goal dimension,let's say 100x100. And your BufferedImage (bi), let's say 150x50.
Create a rectangle of your goal:
Rectangle goal = new Rectangle(100, 100);
Then intersect it with the dimensions of your image:
Rectangle clip = goal.intersection(new Rectangle(bi.getWidth(), bi.getHeight());
Now, clip corresponds to the portion of bi that will fit within your goal. In this case 100 x50.
Now get the subImage using the value of clip.
BufferedImage clippedImg = bi.subImage(clip,1, clip.y, clip.width, clip.height);
Create a new BufferedImage (bi2), the size of goal:
BufferedImage bi2 = new BufferedImage(goal.width, goal.height);
Fill it with white (or whatever bg color you choose):
Graphics2D big2 = bi2.getGraphics();
big2.setColor(Color.white);
big2.fillRect(0, 0, goal.width, goal.height);
and draw the clipped image onto it.
int x = goal.width - (clip.width / 2);
int y = goal.height - (clip.height / 2);
big2.drawImage(x, y, clippedImg, null);

Categories