I m new to android development, currently working on App which is working on canvas and images ...
But i m stuck in middle of the process.
I want to implement such a functionality that user touches an edges of the image and if he/she drags thet image, image will be scaled ..
I googled a lot and more of it but couldnt find any tutorial or Demo s ..
Hope you SO guys help me . Such a functionality is provided by galaxy Note like this below image ..
Try this.
If user touch the image at right side and will drag that right side then the below code will scaled the image and draw scaled image.
Bitmap bmpImage;
Rect src = new Rect();
Rect dst = new Rect();
src.left = initial_Start_pos_X; // initial Start X postion of image
src.top = initial_Start_pos_Y; // initial Start Y postion of image
src.right =initial_End_pos_X; // initial End X postion of image
src.bottom = initial_End_pos_Y; // initial End Y postion of image
dst.left = initial_Start_pos_X;
dst.top = initial_Start_pos_Y;
dst.right = Draged_Pox_X; // Drag X position of image
dst.bottom = initial_End_pos_Y;
canvas.drawBitmap(bmpImage, src, dst, paint); // This line will scaled the image according to dst rect. It will take the image from src rect and draw in dst rect. so it will scaled the image.
You have to invalidate each time the view when you are dragging the image side. you have to invalidate the view in ONTOUCHMOVE.
So you have to check first, That which side of image is touched by user and dragging then you have to modify the above code.
Above code will show only scaled image in right side only
Related
I am currently using this gitup touchimageview https://github.com/MikeOrtiz/TouchImageView library.... After zoom,based on the zoom percentage I want to map the longpress coordinates to original image coordinates. Any help will be appreciated
Try to get matrix of ImageView:
float[] values = new float[9];
getImageMatrix().getValues(values);
With this array, you have position of top-left corner in terms of image on indexes 2 and 5. For example, when values[2], values[5] is -10,-10 it means, that left top corner of screen is 10,10 pixel of image. So, you can get coordinate of long press:
float imageX = (pressX - values[2])/scale;
float imageY = (pressY - values[5])/scale;
Recently I work with zoomed images, and use this library: https://github.com/chrisbanes/PhotoView
I think its a bit better, it have some predifined touches with image coordinates, and is still improved (last commit ~2 months ago)
I am trying to add an image on top of another image. The one on the top is a blurred image. I am using the following code to try and achieve this.
//First image as a background(full size)
mCanvas.drawBitmap(canvasBackImage, 0, 0, null); //draws fine
Rect rectangle = new Rect(0,0,200,200);
//Second image on top blurred 200px x 200px rectangle
mCanvas.drawBitmap(blurBuilder.blur(appContext, canvasBackImage, mX, mY), null, rectangle, null);
The image is drawn fine with the above code at coordinate 0,0 of the canvas however, if I modify the above code's line three to the following, it doesn't add the image at the 100,100 coordinate of the canvas.
Rect rectangle = new Rect(100,100,200,200);
I also tried it with 50,50 coordnate and it works. So Changing it the following works too.
Rect rectangle = new Rect(50,50,200,200);
I have no idea why this is not working as I expect it to. Am I doing something wrong?
My ultimate objective is to blur the image at the exact location that the user touched. So if user touched in the middle of the screen then that part of the image will be blurred out.
I moved the above code in onDraw method and it seems to be working as expected now.
Before I had it in a different method which was being called manually on a button click.
I have an activity where I get an image and display it full screen, I want to draw a rectangle 600 x 600 for example over the image, I want the image to be darker and inside this rectangle to be bright 100% , and with my finger to change this rectangle's position (following my finger) and when iI click a button to be able to crop the image , to get only what it is inside this rectangle (bright area), how can I create this ?
You can store all the coordinates in an arraylist and draw a clipPath line in ActionMove of onTouchListener
clipPath = new Path();
clipPath.moveTo(tdownx,tdowny);
for(int i = 0; i<your_array_list.size();i++){
clipPath.lineTo(your_array_list.get(i).getY(),your_array_list.get(i).getX( ));
}
canvas.drawPath(clipPath, paint);
You can see the output at this YouTube video
I have rotated a dial around its center with the helop from the link below:
http://mobile.tutsplus.com/tutorials/android/android-sdk-creating-a-rotating-dialer/
Now I have an icon beside the dialer and I need to rotate it around the dialer, along with the dialer in a circular path.
private void rotateLogo(float degrees){
Matrix nMatrix = new Matrix();
Bitmap peopleOrg = BitmapFactory.decodeResource(getResources(), R.drawable.peoplelogo);
float translateX = dialerWidth / 2 - dialerWidth / 2;
float translateY = dialerHeight / 2 - dialerWidth / 2;
nMatrix.preTranslate(-turntable.getWidth()/2, -turntable.getHeight()/2);
nMatrix.postRotate(degrees, translateX, translateY);
nMatrix.postTranslate(turntable.getWidth()/2, turntable.getHeight()/2);
Bitmap peopleScale = Bitmap.createBitmap(peopleOrg, 0, 0, peopleOrg.getWidth(), peopleOrg.getHeight(), nMatrix, true);
peopleLogo.setImageBitmap(peopleScale);
peopleLogo.setImageMatrix(nMatrix);
}
This just causes the image to rotate around its own center and not around the dialer's center point.
I cant find out where i am wrong :(
Updates
I basically need the logo to move in a circular path and be a clickable view.
Tried using rotateAnim but the view doesnt animate and i have trouble getting the onclick event.
Would like any help that can rotate the same using matrices
Try only rotate with peopleOrg width and height.
nMatrix.postRotate(degrees, peopleOrg.getWidth()/2, peopleOrg.getHeight()/2);
Update :
Now that you let me know that your logo should be a clickable view, merging the logo image with your dialer is not applicable. To rotate the logo view around the center of dialer you should be actually calculating the (top,left) point for your logo view and moving it around, than just rotating it.
Use sine and cosine functions to get the point on the circumference of an imaginary circle for drawing your logo view.
This post will help you with calculations : How do I calculate a point on a circle’s circumference?
I have an image, I'm using it as an image map. If the image was fixed then there would be no problem but I need to zoom and drag this image and get and use the coordinates of where the image clicked.
Do I need to keep track of exactly how much this image has moved and has been resized or can I get the 0x0 point of my image(the top left corner of my image).
Is there another way to do it
I should add I've based my image manipulation on this excellent tutorial http://www.zdnet.com/blog/burnette/how-to-use-multi-touch-in-android-2/1747?tag=rbxccnbzd1
You can get the point using the same transformation matrix that is being applied to the image. You want to transform the point between the screen's coordinate system to the image's coordinate system, reversing the effect of the original matrix.
Specifically, you want to transform the x,y coordinates where the user clicked on the screen to the corresponding point in the original image, using the inverse of the matrix that was used to transform the image onto the screen.
A bit of pseudocode assuming matrix contains the transformation that was applied to the image:
// pretend user clicked the screen at {20.0, 15.0}
float x = 20.0;
float y = 15.0;
float[] pts[2];
pts[0] = x;
pts[1] = y;
// get the inverse of the transformation matrix
// (a matrix that transforms back from destination to source)
Matrix inverse = new Matrix();
if(matrix.invert(inverse)) {
// apply the inverse transformation to the points
inverse.mapPoints(pts);
// now pts[0] is x relative to image left
// pts[1] is y relative to image top
}