I have a bitmap flush with the bottom of my screen. When the user clicks a button I want it to rotate to the right by one degree. I am able to accomplish this but the problem is that the bottom of the item is no longer flush with the screen. I need it to appear to rotate on its bottom axis. I could use some hack to increment the x and y when its rotated (using trial and error I suppose) but is there a formula or something more elegant I can use?
public void rotate(int degrees)
{
Matrix mat = new Matrix();
mat.postRotate(degrees);
bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), mat, true);
}
Could you not instead use the following method that Matrix also has:
postRotate (float degrees, float px, float py)
It enables rotation on the specified point.
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 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
I'm basically trying to implement something similar to this. Sadly, it's an iOS tutorial.
I have googled in most possible keywords to move something in circular manner, but couldn't find any to start off. Can any one atleast provide any hints on how this can be hacked on android? Please.
Thanks.
i used rotate animation to rotate an image about a point.
double r = Math.atan2(evt.getX() - turntable.getWidth() / 2, turntable.getHeight() / 2 - evt.getY());
rotation = (int) Math.toDegrees(r);
if (evt.getAction() == MotionEvent.ACTION_MOVE)
{
x= (int)evt.getX();
y = (int)evt.getY();
rotateAnim = new RotateAnimation(angle,rotation-50,200,100);
rotateAnim.setFillAfter(true);
ImageView.setanimation(rotateAnim );
ImageView.startAnimation(rotateAnim);
}
you can also use matrix
float newRot = new Float(rot);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.disc);
Matrix matrix = new Matrix();
matrix.postRotate(newRot - 50);
Bitmap redrawnBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
turntable.setImageBitmap(redrawnBitmap);
This would be pretty easy to do in a custom control. Just create a class that extends View and override the draw() method. Then you can listen for touches and calculate how far the user has rotated the control. Then you just need to use that data to rotate the canvas and draw the numbers on it.
-= Update =-
When you override the draw method you get a Canvas object. That object lets you draw to it what ever you want. It would look something like this:
#Override
public void draw(Canvas c)
{
c.rotate(amount);
c.drawBitmap(myImage);
}
This is a link to the full Canvas Documentation.
The issue is simple: I want to rotate an image around a certain pivot point. Here is the code I use:
Matrix matrix = new Matrix();
matrix.setTranslate(bmpWidth/2, 0);
matrix.preRotate(degrees, bmpWidth/2, 0);
Bitmap resizedBitmap = Bitmap.createBitmap(
bitmap, 0, 0, bmpWidth, bmpHeight, matrix, true);
ImageView imageView = (ImageView) findViewById(R.id.bell);
imageView.setImageBitmap(resizedBitmap);
I get the rotation degrees from the accelerometer sensor. The result is that every time the image is rotated around its center point.
I think you should try doing this:
imageView.setPivotX(desiredXPivotPoint);
imageView.setPivotY(desiredYPivotPoint);
That should do the trick.
This is kinda old, but there is a function that allows you to specify both the degrees of rotation as well as the pivot point:
imageView.setRotation(degrees, px, py)
I am facing problme in rotating image
Following code works fine
Matrix matrix = new Matrix();
matrix.postRotate(DEGREE,mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);
Bitmap m = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(),mBitmap.getHeight(), matrix, true);
canvas.drawBitmap(m, mX, mY, null);
But I dont want to create a new bitmap again and again so I am using the following code
Matrix matrix = new Matrix();
matrix.postTranslate(mX, mY);
matrix.postRotate(DEGREE,mBitmap.getWidth() / 2, mBitmap.getHeight() / 2);
canvas.drawBitmap(mBitmap, matrix, null);
In that case image goes out of the view. It is not visible.
Matrix matrix = new Matrix();
canvas.translate(mX, mY);
canvas.drawBitmap(...);
canvas.translate(-mX, -mY);
Try first rotating it then translating it, because when you translate it first the center is not in the middle any more so you are rotating it with wrong pivot coordinates.
The pivot point by default when rotating is the top left corner of the image, which is why the view goes out of view. You need to add logic to make the pivot point the center of the image. Unfortunately, geometry is not my strong suit so maybe someone who somewhat enjoys geometry can give you the calculations to make this happen.