I have a square shape image which having circle view, I am drawing that image in center of circle using canvas using below code:
Bitmap bitmapCompass = BitmapFactory.decodeResource(getResources(), R.drawable.compass_rim);
float w2= (w-bitmapCompass.getWidth())/2;
float h2= (h-bitmapCompass.getHeight())/2;
canvas.drawBitmap(bitmapCompass, w2, h2, paint);
I want to rotate this image like a dialer relative to center.Facing issue to make rotation of Image around that circle center.
Used code for rotation:
Bitmap bitmapCompass = BitmapFactory.decodeResource(getResources(), R.drawable.compass_back);
float w2= (w-bitmapCompass.getWidth())/2;
float h2= (h-bitmapCompass.getHeight())/2;
Matrix matbitmapCompass = new Matrix();
matbitmapCompass.postRotate((float)90);
Bitmap bmpRotateCompass = Bitmap.createBitmap(bitmapCompass, 0,0, bitmapCompass.getWidth(), bitmapCompass.getHeight(), matbitmapCompass, true);
canvas.drawBitmap(bmpRotateCompass, w2, h2, paint);
Help will be appreciated.
Thanks
I think you're going to want to rotate the canvas:
canvas.save();
canvas.rotate(angle, rotationCenterX, rotationCenterY);
// draw here
canvas.restore();
Related
I have an image in drawable folder for clock hand. I want to rotate it in fixed point like a clock hand. I have tried below code which rotates the hand in circular path around a fixed point but not as like clock hand.
Matrix matrix = new Matrix();
matrix.reset();
matrix.preTranslate(0, 0);
matrix.postRotate(angleRotation, -0, -0);
matrix.postTranslate(240, 480);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(bitmap, matrix, null);
I am struggling for hours to get it sorted out. Any help will be greatly appreciated.
I have tried below links for help as well with no success.
SurfaceView, draw image and reduce size, rotate image
Android: How to rotate a bitmap on a center point
How to rotate a bitmap in Android about images center smoothly without oscillatory movement
I found the answer. Let px and py be any point on canvas. bitmap.getWidth()/2 is middle point along bitmap width. It can be any point for x cordinate. For y cordinate I have taken it as 10. angleRotation is the angle that is as per required.
So matrix.postTranslate(-bitmap.getWidth()/2, -10); is the point of rotation.
Below is the code.
Matrix matrix = new Matrix();
matrix.reset();
Paint paint = new Paint();
float px = 240;
float py = 480;
matrix.postTranslate(-bitmap.getWidth()/2, -10);
matrix.postRotate(angleRotation);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, paint);
Above code satisfy my requirements. Please modify it as per your need.
I use this to rotate my bitmaps.
private Bitmap rotateImage(Bitmap src,int degrees) {
Matrix matrix = new Matrix();
matrix.postRotate(degrees);
return Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
}
I am new to android,
I want to rotate a canvas bitmap without cut.
I used the below code, but when I rotate the image it cuts off a portion from the bitmap.
float px = iv_photo.getWidth()/2;
float py = iv_photo.getHeight()/2;
matrix.postTranslate(-canvas.getWidth()/2, -canvas.getHeight()/2);
matrix.postRotate(90);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, paint);
Bitmap b;
Matrix mMatrix;
mMatrix.reset();
// move the view so that it's center point is located in 0,0
mMatrix.postTranslate(-sizeX, -sizeY);
// scale the view
mMatrix.postScale(mScaleFactor, mScaleFactor);
// re-move the view to it's desired location
mMatrix.postTranslate(mTouchX, mTouchY);
canvas.drawBitmap(b, mMatrix, null);
I need to know if there is an built in method to tell the info like corner coordinates of where the Bitmap is printed, etc.
Hope it is clear.
Thanks.
yes, it's called mapRect https://developer.android.com/reference/android/graphics/Matrix.html#mapRect(android.graphics.RectF)
RectF r = new RectF(0, 0, b.getHeight(), b.getWidth());
mMatrix.mapRect(r);
// r now have the coordinates where the bitmap was drawn,
// you can test it by calling
canvas.drawRect(r, paint);
In my application,I have a long green grass bitmap.I have to fix the bitmap so that it does not move its bottom part and it should be placed at the left bottom corner of the screen.So i have to fix its pivot at the bottom center of the bitmap.After that i should move the bitmap (like grass moving by the wind) to its left,some pixels and to its right,some pixels distance.But the bitmap should not move its pivot position.I am unable to fix the pivot position and to achieve the grass moving.I am posting the code which i have done.Please help me to solve this.
private float direction = 1;
private float mangle = 0;
Bitmap green_1 = BitmapFactory.decodeResource(getResources(),
R.drawable.green_1);
private void drawPaper(Canvas canvas){
Paint paint=new Paint();
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
if (mangle >= 3) {
direction=-0.2f;
} else if (mangle<=-3) {
direction=0.2f;
}
mangle = mangle + direction;
Matrix matrix = new Matrix();
matrix.postTranslate(0,heightOfCanvas-green_1.getHeight());
matrix.postTranslate(0, mangle);
canvas.drawBitmap(green_1, matrix, paint);
}
Thanks in advance.
Just rotate the canvas using :
canvas.rotate(deg, xpivot, ypivot)
See : Canvas#rotate(float, float, float)
I want to rotate a bitmap image based on user click by 10 deg. Following numerous stackoverflow and google answers, I tried various combinations of Matrix rotation.
However the image doesn't really rotate as expected and gives a jittery view of rotation + oscillation about canvas center. To test I am increasing rotation angle by 10 deg (instead of clicks) each time object's draw method is called. The image is a symmetrical circle [64x64 enclosing rectangle] and I expect it to rotate at center of screen about it's own center like a wheel, but it rotates and moves diagonally towards right-down and moves back upto center of screen in an oscillatory fashion.
public void draw(Canvas canvas) {
Matrix matrix = new Matrix();
rotation += 10;
float px = this.viewWidth/2;
float py = this.viewHeight/2;
matrix.setRotate(rotation, bitmap.getWidth()/2, bitmap.getHeight()/2);
Bitmap newbmp = Bitmap.createBitmap(bitmap, 0, 0, getImgWidth(), getImgHeight(), matrix, true);
canvas.drawBitmap(newbmp, px - (getImgWidth()/2), py - (getImgHeight()/2), null);
}
Here is an example.
I broke it to 3 steps.
The first translate moves the bitmap so that it's center is at 0,0
Then a rotation,
and finally move the bitmap center to where you want it on the canvas.
You don't need the second bitmap.
Matrix matrix = new Matrix();
rotation += 10;
float px = this.viewWidth/2;
float py = this.viewHeight/2;
matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getHeight()/2);
matrix.postRotate(rotation);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, null);
As an optimization, create the Matrix once outside this method and replace the creation with a call to matrix.reset()
You need to translate the bitmap to the 0,0 point (or draw it at 0,0) and rotate it there, then translate it back, as such:
canvas.save();
canvas.translate(this.viewWidth, this.viewHeight);
canvas.rotate(rotation);
canvas.drawBitmap(newbmp, -(getImgWidth()/2), -(getImgHeight()/2), null);
canvas.restore();
Here I draw it with the center at 0,0 (I think), because when you rotate, it's about 0,0 and not the center of the screen as one would think. If you draw the center at 0,0 then it will rotate about the center of the bitmap.
If my code does not accomplish drawing the bitmap center at 0,0 then you can change my code to draw it at the center and it will work as you want.
Hope this helps!
// x : x coordinate of image position
// y : y coordinate of image position
// w : width of canvas
// h : height of canvas
canvas.save();
canvas.rotate(angle, x + (w/2), y + (h/2));
canvas.drawBitmap(image, x, y, null);
canvas.restore();
The steps are
Save the existing canvas
Rotate the canvas about the center of the bitmap, that you would draw on canvas with an angle of rotation
Draw the image
Restore the image