I want to Rotate Image according to a specific angle in android ,some thing like a compass...
I have this code...it works on drawPath()
but i want to replace the path and the Drawing thing with image..
I tried to create a bitmap image ,DrawBitmapImage , but the image does not Rotate like the path..Any Help PLease?
public void draw(Canvas canvas) {
double angle = calculateAngle(currentLongitude, currentLatitude, targetLongitude, targetLatitude);
//Correction;
angle-=90;
//Correction for azimuth
angle-=azimuth;
if((getContext() instanceof Activity) && ((Activity)getContext()).getWindowManager().getDefaultDisplay().getOrientation()==Configuration.ORIENTATION_PORTRAIT)angle-=90;
while(angle<0)angle=angle+360;
Rect rect = canvas.getClipBounds();
int height = rect.bottom-rect.top;
int width = rect.right-rect.left;
int left = rect.left;
int top = rect.top;
if(height>width){
top+=(height-width)/2;
height=width;
}
if(width>height){
left+=(width-height)/2;
width=height;
}
float centerwidth = width/2f;
float centerheight = height/2f;
Paint p = new Paint();
p.setColor(color);
p.setStyle(Paint.Style.FILL);
p.setAntiAlias(true);
float startX = left+(float)(centerwidth+Math.cos(deg2rad(angle))*width/3.0);
float startY = top+(float)(centerheight+Math.sin(deg2rad(angle))*height/3.0);
Path path = new Path();
path.moveTo(
startX,
startY);
path.lineTo(
left+(float)(centerwidth+Math.cos(deg2rad(angle+140))*width/4.0),
top+(float)(centerheight+Math.sin(deg2rad(angle+140))*height/4.0));
path.lineTo(
left+(float)centerwidth,
top+(float)centerheight
);
path.lineTo(
left+(float)(centerwidth+Math.cos(deg2rad(angle+220))*width/4.0),
top+(float)(centerheight+Math.sin(deg2rad(angle+220))*height/4.0)
);
path.lineTo(
startX,
startY
);
canvas.drawPath(path, p);
}
You can either rotate your bitmap when you draw it by using a matrix:
Matrix matrix = new Matrix();
matrix.setRotate(angle, imageCenterX, imageCenterY);
yourCanvas.drawBitmap(yourBitmap, matrix, null);
You can also do it by rotating the canvas before drawing:
yourCanvas.save(Canvas.MATRIX_SAVE_FLAG); //Saving the canvas and later restoring it so only this image will be rotated.
yourCanvas.rotate(-angle);
yourCanvas.drawBitmap(yourBitmap, left, top, null);
yourCanvas.restore();
Pick the one that suits you the best.
You have to rotate the canvas first and then draw whatever you want. Then the object drawn will be appeared as rotated on screen.
canvas.rotate(45); // degrees to rotate
try this its good way.
Check this tutorial you will get information about how to draw bitmap and how to rotate canvas
Check complete tutorial
This is the only one that worked for me with no problem.
private Bitmap rotateBitmap(Bitmap bitmap, int rotationAngleDegree){
int w = bitmap.getWidth();
int h = bitmap.getHeight();
int
newW=w, newH=h;
if (rotationAngleDegree==90 || rotationAngleDegree==270){
newW = h;
newH = w;
}
Bitmap rotatedBitmap = Bitmap.createBitmap(newW,newH, bitmap.getConfig());
Canvas canvas = new Canvas(rotatedBitmap);
Rect rect = new Rect(0,0,newW, newH);
Matrix matrix = new Matrix();
float px = rect.exactCenterX();
float py = rect.exactCenterY();
matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getHeight()/2);
matrix.postRotate(rotationAngleDegree);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, new Paint( Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG ));
matrix.reset();
return rotatedBitmap;
}
Based on #Sakthi 's code, but add scaling :)
Rect rect = new Rect(0,0,canvas.getWidth(), canvas.getHeight());
Matrix matrix = new Matrix();
matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getHeight()/2);
matrix.postScale(
((float)rect.width()) / bitmap.getWidth(),
((float)rect.height()) / bitmap.getHeight());
matrix.postRotate(180);
matrix.postTranslate(rect.exactCenterX(), rect.exactCenterY());
canvas.drawBitmap(bitmap, matrix, null);
#Reham: Look at this example code below,
public class bitmaptest extends Activity {
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
LinearLayout linLayout = new LinearLayout(this);
// load the origial BitMap (500 x 500 px)
Bitmap bitmapOrg = BitmapFactory.decodeResource(getResources(),
R.drawable.android);
int width = bitmapOrg.width();
int height = bitmapOrg.height();
int newWidth = 200;
int newHeight = 200;
// calculate the scale - in this case = 0.4f
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
// createa matrix for the manipulation
Matrix matrix = new Matrix();
// resize the bit map
matrix.postScale(scaleWidth, scaleHeight);
// rotate the Bitmap
matrix.postRotate(45);
// recreate the new Bitmap
Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0,
width, height, matrix, true);
// make a Drawable from Bitmap to allow to set the BitMap
// to the ImageView, ImageButton or what ever
BitmapDrawable bmd = new BitmapDrawable(resizedBitmap);
ImageView imageView = new ImageView(this);
// set the Drawable on the ImageView
imageView.setImageDrawable(bmd);
// center the Image
imageView.setScaleType(ScaleType.CENTER);
// add ImageView to the Layout
linLayout.addView(imageView,
new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT
)
);
// set LinearLayout as ContentView
setContentView(linLayout);
}
}
you have to use the matrix to rotate image look the lines
matrix.postRotate(45); -
this will rotate the image to 45 degrees
Hope this help you ...thx
Use following code. it worked for me
float rotation = 30.0f;
Bitmap bitmap = your bitmap
Rect rect = new Rect(100,100,bitmap.width, bitmap.height);
Matrix matrix = new Matrix();
float px = rect.exactCenterX();
float py = rect.exactCenterY();
matrix.postTranslate(-bitmap.getWidth()/2, -bitmap.getHeight()/2);
matrix.postRotate(rotation);
matrix.postTranslate(px, py);
canvas.drawBitmap(bitmap, matrix, null);
matrix.reset();
invalidate();
Related
I am trying to draw a avatar bitmap using this code. But the bitmap is pixelated. Here is my Code. Currently I use createScaledBitmap to resize the avatar image. Also the Text are a little smaller on some devices with a high resolution
BitmapFactory.Options opt = new BitmapFactory.Options();
opt.inMutable = true;
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.card_nodpi, opt) ;
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(40);
paint.setTypeface(Typeface.create(Typeface.DEFAULT, Typeface.BOLD));
canvas.drawText("The quick brown fox", x, y, paint);
Paint paint2 = new Paint();
paint2.setColor(Color.BLACK);
paint2.setTextSize(30);
canvas.drawText("The quick brown fox", x, y + (40), paint2);
canvas.drawText("The quick brown fox", x, y + ((40 * 2)), paint2);
if (avatar != null) {
Bitmap img = Bitmap.createScaledBitmap(avatar, 250, 250, false);
canvas.drawBitmap(img, bitmap.getWidth() - img.getWidth() - x, y - 40, new Paint(Paint.FILTER_BITMAP_FLAG));
}
imageView.setImageBitmap(bitmap);
createScaledBitmap can produce some funky/bad quality images.
Try out this solution here:
https://stackoverflow.com/a/7468636/4557530
Let me know if that does anything for you!
Alternatively,
try this, I used this code before thanks to some blog, which I don't remember anymore
Bitmap newBM = Bitmap.createBitmap(newWidth, newHeight, Config.ARGB_8888);
float scaleX = newWidth / (float) origBM.getWidth();
float scaleY = newHeight / (float) origBM.getHeight();
float pivX = 0;
float pivY = 0;
Matrix scaleMatrix = new Matrix();
scaleMatrix.setScale(scaleX, scaleY, pivotX, pivotY);
Canvas canvas = new Canvas(newBM);
canvas.setMatrix(scaleMatrix);
canvas.drawBitmap(origBM, 0, 0, new Paint(Paint.FILTER_BITMAP_FLAG));
I am struggling with bitmap rotations. I wish to rotate a graphic around an alternate axis but I can only ever get it to rotate around the center point no matter what I do, putting in postTranlate. preTranslate, set Translate in any order doesnt work I have also tried the postRotate(45,0,0) but it always rotates around the center.
Code below taken of internet what would I do to alter its rotation point, the code below uses the launcher icon which is square I am using a long thin graphic like an arrow.
// Rotate image to 45 degrees.
public void RotateImage(){
ImageView image;
Bitmap bMap;
Matrix matrix;
//Get ImageView from layout xml file
image = (ImageView) findViewById(R.id.imageView1);
//Decode Image using Bitmap factory.
bMap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
//Create object of new Matrix.
matrix = new Matrix();
//set image rotation value to 45 degrees in matrix.
matrix.postRotate(45);
//Create bitmap with new values.
Bitmap bMapRotate = Bitmap.createBitmap(bMap, 0, 0,
bMap.getWidth(), bMap.getHeight(), matrix, true);
//put rotated image in ImageView.
image.setImageBitmap(bMapRotate);
}
I have tried the code below but its still rotates around the center or at least appears too
public void RotateImage{
ImageView image;
Bitmap bMap;
Matrix matrix;
//Get ImageView from layout xml file
image = (ImageView) findViewById(R.id.imageView);
//Decode Image using Bitmap factory.
bMap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
//Create object of new Matrix.
matrix = new Matrix();
//set image rotation value to 45 degrees in matrix.
matrix.setTranslate(-100,-200);
matrix.postRotate(angle);
matrix.postTranslate(100,200);
//Create bitmap with new values.
Bitmap bMapRotate = Bitmap.createBitmap(bMap, 0, 0,
bMap.getWidth(), bMap.getHeight(), matrix, true);
//put rotated image in ImageView.
image.setImageBitmap(bMapRotate);
Thanks
If you want your Bitmap to rotate 45 degree around x axis with pivot (a,b), you can call matrix.rotate(45, a, b)
Perhaps you want to use the Camera class to rotate around X, Y or Z axis:
matrix = new Matrix();
Camera camera = new Camera();
camera.save();
camera.rotateX(45f);
camera.getMatrix(matrix);
camera.restore();
The way I understand your question is that you want to rotate the image around some point, say (x, y). Conceptually you need to perform the following transformations on the image:
Translate by (-x, -y)
Rotate by 45 degrees
Translate by (x, y)
You can use this method to rotate an object from center create this method in sprite class
public void paintFromCenter(float angle, Canvas c) {
Bitmap b = sprite;
Bitmap h = b;
// Canvas canvas = new Canvas(a);
Matrix matrix = new Matrix();
matrix.postRotate(angle, h.getWidth() / 2, h.getHeight());
matrix.postTranslate(getX(), getY());
// canvas.drawBitmap(bitmap, matrix, new Paint());
Bitmap bmp2 = Bitmap.createBitmap(h, 0, 0, frameWidth, frameHeight,
matrix, true);
c.drawBitmap(h, matrix, null);
// g.getCanvas().drawBitmap(bmp2, getX(), getY(), null);
}
Now in onTouchEvent()
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
evX = (int) event.getX();
evY = (int) event.getY();
int initX = objectSprite.getX();
int inity = objectSprite.getY();
if ((evX > objectSprite.getX()
&& evX < objectSprite.getX() + objectSprite.getWidth()
&& evY > objectSprite.getY() && evY < objectSprite.getY()
+ objectSprite.getHeight())) {
if (angle < 90) {
angle += 5;
} else if (angle < -180)
angle -= 5;
}
}
return true;
}
in draw() method paint the image/object
private void draw(Canvas canvas) {
objectSprite.paintFromCenter(angle, canvas);
}
try it
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;
}
Does anyone have a hint or explanation for the following problem ?
I draw a path with a bitmapshader. When canvas is not scaled, it looks good ( first picture ).
When I scale into ( zooming in ) the bitmapshader is not be scaled and looks very ugly. I tried several things with recreating the bitmapshader after zooming in, but did not succeed :-(. Does anyone have a hint ?
No Scaling it looks good :
when scaling it looks ugly:
Code :
canvas.scale(scalex, scaley);
canvas.translate(itranslatex, itranslatey);
fillBMP = makePatternCross(fscalex, 1, Color.GREEN/*,fscalex,fscaley*/);
fillBMPshader = new BitmapShader(fillBMP, BitmapShader.TileMode.REPEAT, BitmapShader.TileMode.REPEAT);
paintshader = new Paint();
paintshader.setShader(fillBMPshader);
canvas.drawPath(cpath.path, paintshader);
private static Bitmap makePatternCross(float fSize, float fStrokewith,int iColor) {
Log.v("Create Patter makePatternCross","makePatternCross");
float fBitmapSizeOrig = 10;
fBitmapSizeOrig=fBitmapSizeOrig*fSize;
Bitmap bm = Bitmap.createBitmap((int)fBitmapSizeOrig,(int) fBitmapSizeOrig,Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bm);
//c.scale(200, 200);
c.drawColor(Color.WHITE);
Paint p = new Paint();
p.setColor(iColor);
//p.setStrokeWidth(iStrokewith);
p.setStrokeWidth(fStrokewith/fSize);
p.setStrokeWidth((float) 0.000001);
c.drawLine(0, 0, fBitmapSizeOrig, fBitmapSizeOrig, p);
c.drawLine(0, fBitmapSizeOrig, fBitmapSizeOrig, 0, p);
if (fSize != 1) {
int iNewSize = (int) (( fBitmapSizeOrig) * fSize);
bm = Bitmap.createScaledBitmap(bm, iNewSize, iNewSize, false);
}
int width = bm.getWidth();
int height = bm.getHeight();
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
if (bm.getPixel(x, y) == Color.WHITE) {
bm.setPixel(x, y, Color.TRANSPARENT);
} else {
// bm.setPixel(x, y, bm.getPixel(x, y));
}
}
}
return bm;
}
Not sure exactly if this is what your looking for. But if you use a matrix to scale the bitmap it retains more quality than normal scaling.
Matrix matrix = new Matrix();
matrix.postScale(desiredScale, desiredScale);
Bitmap scaledBitmap = Bitmap.createBitmap(sampledSrcBitmap, 0, 0, sampledSrcBitmap.getWidth(), sampledSrcBitmap.getHeight(), matrix, true);
Also when going from a lesser resolution to a higher you can try this as well:
Options options = new BitmapFactory.Options();
options.inScaled = false;
Bitmap source = BitmapFactory.decodeResource(a.getResources(), path, options);
I am trying an application like rotating image with motion sensor....My problem is that the image does not rotate about centre properly....And my angle range is 0 to 90 and 0 to -90..
And below is my code.....
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Bitmap arrow = BitmapFactory.decodeResource(getResources(),R.drawable.arrow);
int arrowW = arrow.getWidth();
int arrowH = arrow.getHeight();
float scaleWidth = 1;
float scaleHeight = 1;
int centrex = arrowW/2;
int centrey = arrowH/2;
int X=108;
int Y=100;
int angle=0;
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
matrix.postRotate(angle, X+centrex , Y+centrey );
Bitmap resizedBitmap = Bitmap.createBitmap(arrow, 0, 0, arrow.getWidth(), arrow.getHeight(), matrix, true);
canvas.save();
canvas.drawBitmap(resizedBitmap, X, Y, null);
invalidate();
}
I am getting the angle values from onCreate method.....Using orientation sensor(roll values)..
But When I rotate the screen my image is rotating but not exactly around the image centre..
Rotation should not be concerned by X and Y :
matrix.postRotate(angle, centrex , centrey );