I have drawn a circle in a canvas with image in it on click event in one activity. And I have taken the x and y coordinates of that circle. In another activity i want to draw the same circle at the same position but the image size is not same so it is pointing to different position. So, how can achieve this?
The new position of circle (newX, newY) must move at same ratio that image size change.
newX = oldX * (newImageWidth / oldImageWidth)
newY = oldY * (newImageHeight / oldImageHeight)
You may want to change the size of the circle same way.
Related
I have tried various methods but I want to get bitmap's coordinates when the activity loads so that I can use it to set polygon view.
I have tried using the imageview width and height but the polygon views occupy all of the screen I want the polygon view to be restricted to bit map for that I need the bitmap coordinates.
I want the (x,y) coordinates which are written in blue as depicted below.any help would be appreciated.the image
If I understood you Q correctly then you need a mathematical sol here to get x,y positions. 1st use bitmap to be set as ImageView.ScaleType= CENTER_INSIDE.
So, your image position is fixed & will touch either X or Y axis.
Calculate ratios:
Br(BitmapRatio) = Bw (bitmapWidth) / Bh (bitmapHeight)
Ir(ImageViewRatio) = Iw / Ih
Now, use below formula:
if(Ir > Br) {
y = 0;
x = Br*Ih/2;
} else {
x = 0;
y = (Iw/Br)/2;
}
I have an Image View which displays an image (e.g 2000x1000 pixels) and I have a coordinate (X,Y) on that image (not the image view). The canvas of my Image View is 600x800 for example. How can I convert the point (X,Y) to screen coordinate so that I can draw a path with them on the OnDraw(...) method of Image View. Any help is appreciated! Thank you.
Update: If I use matrix to draw the path between coordinates, it works but the path and objects i draw become really small. Here is the code i used.
final Matrix matrix = canvas.getMatrix();
matrix.preConcat( _view.getImageMatrix() );
matrix.preScale( 1.0f /_inSampleSize, 1.0f / _inSampleSize);
canvas.setMatrix( matrix );
//I draw the path here
Update: I add a picture to show the effect when using matrix to draw the path. I would like to have the 4 line and the 4 corner balls to be in normal size. The red color is the boundary of the Image View which holds the picture.
I think that might depend on how exactly you are displaying your image. Your ImageView (600x800) is not the same aspect ratio as your bitmap (2000x1000).
You are keeping the bitmap's aspect ratio stable as you scale it down? If so, which part (height or width) takes up the full screen and which has black (or whatever else) as padding? This will help you determine your scale factor.
scale_factor = goal_height/height1; //if height is what you are scaling by
scale_factor = goal_width/width1; //if width is what you are scaling by.
I would try:
x_goal = x1 * scale_factor;
y_goal = y1 * scale_factor;
That is, if you have a point (1333, 900) in your image, and your image takes up the full width, you would multiply both x and y by 600/2000 to get (399.9, 270). (you might want to round that decimal).
If you are NOT keeping the bitmaps aspect ratio stable (that is, you're squeezing it to fit), then you'd have a height_scale_factor and a width_scale factor. So you'd take (1333,900) and multiply x by 600/2000 and y by 800/1000 to get (399.9,720).
I want to calculate rotated image size, Image is inside rectangle. I have rectangle width, height and angle of rotated image. Any one tell me
how to calculate rotated image size?
So you have width, height and angle means you already got RotatedRect.
Now using the method
Rect RotatedRect::boundingRect();
you can easly calculate the bounding box for rotated rect.
for more info see RotatedRect.
Edit:
As per your comment below is the way how to find the width and height of rotated rect.
So you know the four corners of rectangle, lets say (x1,y1),(x2,y2),(x3,y3),(x4,y4), now you need to find the transformed point after rotation by the given angle, let it be (xT1,yT1),(xT2,yT2),etc...
where
xT = x0+(x-x0)*cos(theta)+(y-y0)*sin(theta)
yT = y0-(x-x0)*sin(theta)+(y-y0)*cos(theta)
here (x0,y0) is the center around which you are rotating. and theta = angle * CV_PI / 180.0
Using above calculate four transformed points, finally calculate the height and width by finding the distance between transformed points.
I'm trying to make a custom view with clickeable areas for my app. Those areas are relative to the image pixel coords that will fill that view. I've placed those images at drawable-nodpi to avoid system scaling.
My custom view takes one of those images, resizes it keeping the aspect ratio to fit its parent and then resizes the view to the size of the resulting image. So at this point I have a view that maintains the ratio of the source, so the resulting view click (onTouch event.getX and event.getY) coordinates are relative to the original image pixel coords.
From the other hand I have all the coordinates of the shapes that define the clickeable areas in a xml file wich I load when my activity starts. Those areas are defined by a type: circle or rect.
circle: center x-y and radius in px according to the original image
rect: center x-y, width and height in px according to the original image
Now I need to detect if my touch x-y is inside of the coordinates of any of those areas, but keeping in mind the scaling that my original image suffered.
How could I detect the "collitions" between my touch coordinates and the clickeable areas coords? I mean how do I calculate that even without resizing my original image?
I have made a View like this myself,
i added objects containing an image and x/y coords.
Now u need to have a list of those Objects, and in case you get an ontouchEvent, you iterate over that list do something like objectHit()
public boolean objectHit(int x, int y){
int touchdistance = Math.sqrt((double)(this.getX()-x)*(double)(this.getX()-x)) + ((double)(this.getY()-y)*(double)(this.getY()-y));
return touchdistance <= this.getTouchableArea();
}
And you implement getTouchableArea for the Object basicly the same way.
public double getTouchAbleArea() {
return Math.sqrt(Math.pow(getBitmap().getHeight(),2)+Math.pow(getBitmap().getWidth(),2))/2;
}
So what you are doing with this code is, you determine if the touch is within the size of the Image representing the object.
This is what I ended up doing
for(i=0;i<level.getDiffs();i++){
DifferencesData diff = level.getDifference(i);
if(!diff.getFinded()){
x = diff.getX();
y = diff.getY();
if(diff.getType() == 0){
double d = Math.sqrt(Math.pow(x - event.getX(),2) + Math.pow(y - event.getY(),2));
if(d <= diff.getRadius()){
hit = true;
break;
}
}else{
double dx = Math.sqrt(Math.pow(x - event.getX(),2));
double dy = Math.sqrt(Math.pow(y - event.getY(),2));
if(dx <= (diff.getWidth() / 2) && dy <= (diff.getHeight() / 2)){
hit = true;
break;
}
}
}
}
First I scaled the original coordinates by the same scale that my image was scaled by. Then, inside an OnTouchListener I calculated the distance of my touch to the ratio of the circle, or to the half width and half height of my rectangles.
Thank you Daniel for your help!
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?