I wan to draw a image (get from camera) on surfaceview. After drawing the image i want to reduce the size of the image, change the image location on surface view with touch. rotate the image. currently i draw the image on surface view but how the remaining task is not done. Please some body help me.
Thanks
public void drawImage(Canvas canvas, Bitmap bitmap, int x, int y, int rotationAngle, float scalingfactor){
Matrix matrix = new Matrix();
matrix.postRotate(rotationAngle, bitmap.getWidth()/2, bitmap.getHeight()/2);
matrix.postScale(scalingfactor, scalingfactor, bitmap.getWidth()/2, bitmap.getHeight()/2);
matrix.postTranslate(x, y);
canvas.drawBitmap(bitmap, matrix, null);
}
Use above code to rotate and scaling image in surfaceview.
if scalingfactor 1.0f means, image size will be same. If you want to reduce the size use like 0.5f.
rotationAngle is 0 to 360
This is more flexible, you can draw bitmap based on scaling or specific width and height:
public void drawImage(Bitmap bitmap, int x, int y, int rotationAngle, float scalingfactor, int width, int height){
Matrix matrix = new Matrix();
matrix.postRotate(rotationAngle, bitmap.getWidth()/2, bitmap.getHeight()/2);
if(scalingfactor == 0) {
matrix.postScale((float) width / bitmap.getWidth(), (float) height / bitmap.getHeight());
}
else
matrix.postScale(scalingfactor, scalingfactor, bitmap.getWidth()/2, bitmap.getHeight()/2);
dstRectF.set(x, y, x + width, y + height);
matrix.postTranslate(x, y);
canvas.drawBitmap(bitmap, matrix, null);
}
Related
I'm trying to crop a picture from camera but it is shown zoomed. the width and height are ok but it's zoomed a lot.
This is my code :
This is the code I use for scaling bitmaps, the wantedWidth and wantedHeight would be the width and height of your view.
public static Bitmap scaleBitmap(Bitmap bitmap, int wantedWidth, int wantedHeight) {
Bitmap output = Bitmap.createBitmap(wantedWidth, wantedHeight, Config.ARGB_8888);
Canvas canvas = new Canvas(output);
Matrix m = new Matrix();
m.setScale((float) wantedWidth / bitmap.getWidth(), (float) wantedHeight / bitmap.getHeight());
canvas.drawBitmap(bitmap, m, new Paint());
return output;
}
I want to place the watermark on the bottom right of the picture. But, in some mobiles it is coming perfectly and in some mobile phones, the watermark is coming on the whole image.
Here is my code:
rotatedBitmap = Bitmap.createBitmap(loadedImage, 0, 0,
loadedImage.getWidth(), loadedImage.getHeight(),
rotateMatrix, false);
int w = rotatedBitmap.getWidth();
int h = rotatedBitmap.getHeight();
Bitmap result = Bitmap.createBitmap(w, h, rotatedBitmap.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(rotatedBitmap, 0, 0, null);
Bitmap waterMark = BitmapFactory.decodeResource(getResources(), R.drawable.watermark2);
int ww = waterMark.getWidth();
int hh = waterMark.getHeight();
canvas.drawBitmap(waterMark,(w-ww),(h-hh), null);
EDIT: Here are the screenshots of the result. In second picture, the watermark is coming perfectly and in first picture, it is coming on the whole picture.
Make use of aspect ratio. Calculate aspect ratio of device and accordingly calculate appropriate size for your water mark.
How to calculate aspect ratio?
Check for width and height of screen whichever is bigger divide it by smaller one
example:
if(screen_width > screen_height){
aspectRatio = screen_width/screen_height
}else{
aspectRatio = screen_height/screen_width
}
now that you have calculated aspect ratio multiply it with size of you water mark and scale it accordingly.
like:
float ww = watermark.getWidth()*aspectRatio;
float wh = watermark.getHeight()*aspectRatio;
and use these values.
Hope this helps...
Just Give ratio and you go to go,try changing ratio values that best fit for your src bitmap .
Embeds an image watermark over a source image to produce a
watermarked one.
#param source The source image where watermark should be placed
#param ratio A float value < 1 to give the ratio of watermark's
height to image's height,
try changing this from 0.20 to 0.60 to obtain right results
public static Bitmap addWatermark(Context context, Bitmap source, float ratio)
{
Canvas canvas;
Paint paint;
Bitmap bmp;
Matrix matrix;
RectF r;
int width, height;
float scale;
Bitmap waterMark = BitmapFactory.decodeResource(context.getResources(), R.drawable.watermark3x);
width = source.getWidth();
height = source.getHeight();
// Create the new bitmap
bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG);
// Copy the original bitmap into the new one
canvas = new Canvas(bmp);
canvas.drawBitmap(source, 0, 0, paint);
// Scale the watermark to be approximately to the ratio given of the source image height
scale = (float) (((float) height * ratio) / (float) waterMark.getHeight());
// Create the matrix
matrix = new Matrix();
matrix.postScale(scale, scale);
// Determine the post-scaled size of the watermark
r = new RectF(0, 0, waterMark.getWidth(), waterMark.getHeight());
matrix.mapRect(r);
// Move the watermark to the bottom right corner
matrix.postTranslate(width - r.width(), height - r.height());
// Move the watermark to the bottom left corner
// matrix.postTranslate(0 , height - r.height());
// Move the watermark to the top-left corner
// matrix.postTranslate(0 ,0);
// Move the watermark to the top right corner
// matrix.postTranslate(width - r.width(), 0l̥);
// Draw the watermark
canvas.drawBitmap(waterMark, matrix, paint);
return bmp;
}
I've got a strange problem with Bitmap rotation.
That's my code:
in onDraw method
int cx_gear_big = (getWidth() - gear_big.getWidth()) >> 1;
int cy_gears_big = (getHeight() - gear_big.getHeight()) >> 1;
canvas.drawBitmap(rotateGear(gear_big, bigGearAngle), cx_gear_big,cy_gears_big, null);
That's my method which returns rotated Bitmap:
public static Bitmap rotateGear(Bitmap source, int angle)
{
Matrix matrix = new Matrix();
matrix.postRotate(angle);
return Bitmap.createBitmap(source, 0, 0, source.getWidth(), source.getHeight(), matrix, true);
}
I have few gears in my canvas, but it doesn't really matter.
My problem is:
When I'm rotating my Bitmap (a gear) it moves down and left (it depends on the angle of rotation) then it comes back...
Where can my problem be in this case?
UPD:
Translation of Bitmap is not linear. It's like bouncing.
So ideal way to solve this problem is translate matrix before rotation and translate it back. Code example:
Matrix m = new Matrix();
float px = getWidth()/2;
float py = getHeight()/2;
m.postTranslate(-bitmap.getWidth()/2, -bitmap.getHeight()/2);
m.postRotate(angle);
m.postTranslate(px, py);
canvas.drawBitmap(bitmap, m, null);
Just use this code
matrix.setRotate(angle, bitmap.getWidth()/2, bitmap.getHeight()/2);
I have two ImageView/Bitmap, one for visible background and it not movable one, Another one is movable bitmap on the background view. The movable bitmap have pinch zoom and rotate with matrix. Finally find movable co-ordinates/rect position and crop background bitmap using those rect position. My question is how to calculate/get rect position?.
For my sample, what i need for your view. Pleas post your idea here, it help to every one.
I spend more time to search and after few weeks for get this result.
private Bitmap getCroppedBmp(Bitmap childBmp, Bitmap ParentBmp) {
// viewBmp is movable bitmap, orgBitmap is Parent Bitmap
Bitmap viewBmp = childBmp;
Bitmap orgBitmap = ParentBmp;
float[] v = new float[9];
// get Matrix from View
cropImage.savedMatrix.getValues(v);
float left = v[Matrix.MTRANS_X];
float top = v[Matrix.MTRANS_Y];
// calculate the degree of rotation
float rAngle = Math.round(Math.atan2(v[Matrix.MSKEW_X],
v[Matrix.MSCALE_X]) * (180 / Math.PI));
// Rotate viewBmp
Matrix m = new Matrix();
m.postRotate(rAngle, viewBmp.getWidth() / 2, viewBmp.getHeight() / 2);
Bitmap bmap = Bitmap.createBitmap(viewBmp, 0, 0, viewBmp.getWidth(),
viewBmp.getHeight(), m, true);
// calculate real scale
float rScale = (float) Math
.sqrt((v[Matrix.MSCALE_X] * v[Matrix.MSCALE_X])
+ (v[Matrix.MSKEW_Y] * v[Matrix.MSKEW_Y]));
// Scale viewBmp
Matrix m1 = new Matrix();
m1.postScale(rScale, rScale, width / 2, height / 2);
Bitmap scaledBitmap = Bitmap.createBitmap(bmap, 0, 0, width, height,
m1, true);
// Finally Get cropped Bitmap
Bitmap resultingImage = Bitmap.createBitmap(orgBitmap, (int) left,
(int) top, scaledBitmap.getWidth(), scaledBitmap.getHeight());
return resultingImage;
}
For example I want a white border of 10pixel around all 4 side of the bitmap. I am not using it for imageview
I am currently using this code to crop image. May I know how I could add a white border into it?
public Bitmap scaleCenterCrop(Bitmap source, int newHeight, int newWidth) {
int sourceWidth = source.getWidth();
int sourceHeight = source.getHeight();
// Compute the scaling factors to fit the new height and width, respectively.
// To cover the final image, the final scaling will be the bigger
// of these two.
float xScale = (float) newWidth / sourceWidth;
float yScale = (float) newHeight / sourceHeight;
float scale = Math.max(xScale, yScale);
// Now get the size of the source bitmap when scaled
float scaledWidth = scale * sourceWidth;
float scaledHeight = scale * sourceHeight;
// Let's find out the upper left coordinates if the scaled bitmap
// should be centered in the new size give by the parameters
float left = (newWidth - scaledWidth) / 2;
float top = (newHeight - scaledHeight) / 2;
// The target rectangle for the new, scaled version of the source bitmap will now
// be
RectF targetRect = new RectF(left, top, left + scaledWidth, top + scaledHeight);
// Finally, we create a new bitmap of the specified size and draw our new,
// scaled bitmap onto it.
Bitmap dest = Bitmap.createBitmap(newWidth, newHeight, source.getConfig());
Canvas canvas = new Canvas(dest);
canvas.drawBitmap(source, null, targetRect, null);
return dest;
}
I wrote a function for this:
private Bitmap addWhiteBorder(Bitmap bmp, int borderSize) {
Bitmap bmpWithBorder = Bitmap.createBitmap(bmp.getWidth() + borderSize * 2, bmp.getHeight() + borderSize * 2, bmp.getConfig());
Canvas canvas = new Canvas(bmpWithBorder);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(bmp, borderSize, borderSize, null);
return bmpWithBorder;
}
Basically it creates a new Bitmap adding 2 * bordersize to each dimension and then paints the original Bitmap over it, offsetting it with bordersize.
As for a way of doing this. You make your bitmap bigger than the one your adding to it and then fill the canvas with the background you want. If you need to add other effects you can look into the canvas options for clipping the rect and adding rounded corners and such.
RectF targetRect = new RectF(left+10, top+10, left + scaledWidth, top + scaledHeight);
Bitmap dest = Bitmap.createBitmap(newWidth+20, newHeight+20, source.getConfig());
Canvas canvas = new Canvas(dest);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(source, null, targetRect, null);
You can draw 4 rectangles after painting your bitmap's stuff.
point 0,0,3,sizey
point 0,0,sizex,3
point 0,sizey-3,sizex,sizey
point sizex-3,0,sizex,sizey
the accepted answer is nice but in the cases that bitmap contains a transparent background, it fills all over the background of source bitmap with white pixels. so it doesn't work fine for all cases.
a better way to achieve this goal is using Canvas#drawLine method like the following code:
Bitmap drawBorder(Bitmap source) {
int width = source.getWidth();
int height = source.getHeight();
Bitmap bitmap = Bitmap.createBitmap(width, height, source.getConfig());
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setStrokeWidth(50);
paint.setColor(Color.WHITE);
canvas.drawLine(0, 0, width, 0, paint);
canvas.drawLine(width, 0, width, height, paint);
canvas.drawLine(width, height, 0, height, paint);
canvas.drawLine(0, height, 0, 0, paint);
canvas.drawBitmap(source, 0, 0, null);
return bitmap;
}
in this way we first create a second bitmap using source bitmap width, height and config and use drawline() mathod four times to draw four lines using coordinates of end points of each line around the second bitmap and then draw the source bitmap on the second bitmap that must be returned.
A super easy way of doing it would be to set the ImageView background to white and add a padding value.
If that doesn't work, create a FrameLayout with w/h of wrap_content, set its background to white, put the ImageView in there, and set the ImageView's margins to the desired border width.
Its not elegant but you can always just draw a rectangle behind it, you already have the code to do this and any performance impact is going to be unnoticeable
You can create your targetRectangle 20px wider and 20px higher
RectF targetRect = new RectF(left, top, left + scaledWidth + 20, top + scaledHeight + 20);
and paint the background white
Try this it will also add border to your canvas
canvas.drawLine(0, 0, canvas.getWidth(), 0, paint2);
canvas.drawLine(0, 0, 0, canvas.getHeight(), paint2);
canvas.drawLine(0, canvas.getHeight(), canvas.getWidth(),
canvas.getHeight(), paint2);
canvas.drawLine(canvas.getWidth(), 0, canvas.getWidth(),
canvas.getHeight(), paint2);