When I rotate the image to 45 degrees overlay going out of bounds in android

Question

here I have a quick question regarding cropping related.

I used this library to trim

here is some fragment code in MainActivity cropperSample:

rotateButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { cropImageView.rotateImage(45); } }); 

https://github.com/edmodo/cropper

here cropping works fine, I have no questions on cropping.but, but my question is when I rotate the image 45 degrees overlapping the borders of the image. image shown below.

My requirement is that the overlay should be inside and move to any angle that does not go beyond the boundaries of the image if the image is at any angle.

I googled and tried so many ways, but did not use.

If anyone has an idea, please help me ..

Thanks in advance.

Answer 1

According to your requirement:

The overlay should be inside and move to any angle does not go beyond the image, if the image is at any angle.

You can easily achieve this by following these steps:

• If you used gradle compile 'com.edmodo:cropper:1.0.1' to include the average value of Cropper, delete this line.
• Download and import cropping as a module in Android studio and add as a dependency to your application.
• Since the default color used to draw the border between the overlay and the image is translucent(#B0000000) , change it to Black(#000000) . It is defined in com.edmodo.cropper.util.PaintUtl.java # DEFAULT_BACKGROUND_COLOR_ID . Now, if you create and run, you will get the desired result, as shown below:

Note. My personal suggestion, I encountered OutOfMemoryException several times, the library is not ready for production. Please go for some good alternative libraries.

Answer 2

Instead of rotating the bitmap inside, you can rotate the whole view around the center. Then, the crop rectangle will also be rotated. So then the code will look like this:

 rotateButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { cropImageView.setPivotX(cropImageView.getWidth() / 2); cropImageView.setPivotY(cropImageView.getHeight() / 2); cropImageView.setRotation(45); } }); 

This gives me the following result as expected:

Hope this helps!

EDIT:

I finally got a solution. You must rotate the cropped bitmap and change its background color to transparent if the whole view is rotated. There are two ways to do this:

The first way , you can convert and change the source code of the getCroppedImage() method in the CropImageView class:

 public Bitmap getCroppedImage() { final Rect displayedImageRect = ImageViewUtil.getBitmapRectCenterInside(mBitmap, mImageView); // Get the scale factor between the actual Bitmap dimensions and the // displayed dimensions for width. final float actualImageWidth = mBitmap.getWidth(); final float displayedImageWidth = displayedImageRect.width(); final float scaleFactorWidth = actualImageWidth / displayedImageWidth; // Get the scale factor between the actual Bitmap dimensions and the // displayed dimensions for height. final float actualImageHeight = mBitmap.getHeight(); final float displayedImageHeight = displayedImageRect.height(); final float scaleFactorHeight = actualImageHeight / displayedImageHeight; // Get crop window position relative to the displayed image. final float cropWindowX = Edge.LEFT.getCoordinate() - displayedImageRect.left; final float cropWindowY = Edge.TOP.getCoordinate() - displayedImageRect.top; final float cropWindowWidth = Edge.getWidth(); final float cropWindowHeight = Edge.getHeight(); // Scale the crop window position to the actual size of the Bitmap. final float actualCropX = cropWindowX * scaleFactorWidth; final float actualCropY = cropWindowY * scaleFactorHeight; final float actualCropWidth = cropWindowWidth * scaleFactorWidth; final float actualCropHeight = cropWindowHeight * scaleFactorHeight; // Crop the subset from the original Bitmap. Bitmap croppedBitmap = Bitmap.createBitmap(mBitmap, (int) actualCropX, (int) actualCropY, (int) actualCropWidth, (int) actualCropHeight); //rotate cropped bitmap and change it background color to transparent if (getRotation() > 0 && getRotation() < 360) { Matrix matrix = new Matrix(); matrix.postRotate(getRotation()); croppedBitmap = Bitmap.createBitmap(croppedBitmap, 0, 0, croppedBitmap.getWidth(), croppedBitmap.getHeight(), matrix, true); Bitmap result = Bitmap.createBitmap(croppedBitmap.getWidth(), croppedBitmap.getHeight(), croppedBitmap.getConfig()); Canvas canvas = new Canvas(result); canvas.drawColor(Color.TRANSPARENT); canvas.drawBitmap(croppedBitmap, 0, 0, null); return result; } return croppedBitmap; } 

The second way, if you do not want to fork the repo, you can do it like this:

  findViewById(R.id.crop_btn).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Bitmap croppedBitmap = cropImageView.getCroppedImage(); //rotate bitmap and change it background color to transparent if (cropImageView.getRotation() > 0 && cropImageView.getRotation() < 360) { Matrix matrix = new Matrix(); matrix.postRotate(cropImageView.getRotation()); croppedBitmap = Bitmap.createBitmap(croppedBitmap, 0, 0, croppedBitmap.getWidth(), croppedBitmap.getHeight(), matrix, true); Bitmap result = Bitmap.createBitmap(croppedBitmap.getWidth(), croppedBitmap.getHeight(), croppedBitmap.getConfig()); Canvas canvas = new Canvas(result); canvas.drawColor(Color.TRANSPARENT); canvas.drawBitmap(croppedBitmap, 0, 0, null); } resultImageView.setImageBitmap(result); } }); 

The result will be like this:

Hope this is what you want.