I need help at getting the correct coordinates when touching the canvas.
I have an image that is 1240x1756
The user can scroll around on this bitmap. It is the bitmap attached to the canvas. I do this by translating the canvas. canvas.translate()
The user can also place a new bitmap and move that anywhere around on the canvas. up to 256x256.
Up until this point I have no problem calculating the touch coordinates at scale factor of 1.0. I take the screen touch coords and add the offset of the image and then check to see if the 256x256 moveable bitmap intersects the touch coords.
However my issue is getting the correct coordinates after the canvas has been scaled. 0.1-1.0 are my minimum and maximum scaling values.
Can anyone point me in the right direction for a working algorithm?
You should be able to just multiply the pixel offset by 1/scale factor.
Related
I know the x and y coordinates in an bitmap and want to draw a rectangle there. I think this picture illustrates what I want.
Lets say I want to draw a green rectangle over the red one. I know the coordinates of the top left corner and the coordinates of the bottom left corner. Usually it should not be a problem. But I display the bitmap in an Imageview. I use this code to map the coordinates form the bitmap to the coordinates in the canvas of the imageview. For image_view_width and image_view_height I use the getHeight and getWidth form inside of the Imageview.
This solution works on my real device but on the emulator it shows the rectangle on the wrong position. Can someone help me and tell me what is wrong?
Assuming that i have an android phone with max x=400 and max y=300
I have a 5000 by 5000 px bitmap and i display a 400 by 300 part of it on screen. I scroll it around using touch events. I want to draw a smaller bitmap(30 by 30px) onto that larger bitmap at location (460,370). But i cant statically do it(as my game requires). I want to draw and undraw that smaller image according to the player's input or collision detections.
What i am confused about is that suppose currently (50,50) to (450,350) of the larger image is displayed on the screen and now ,due to a certain requirement of the game at this moment, i have to draw that 30by30 bitmap at (460,370) but this point is in two systems - 1)In the big bitmap's co-ordinate system it's 460,370 but when it will come inside the visible area of screen it will have values something between (0,0) and (400,300) depending upon its position on the screen as per the player's movements...
So how do i track that image- i mean using which co-ordinate system, and how do i go about doing all this?
I know I've put it here in a very confusing way but that's the best way i can put it and i'll be really glad, and grateful to you if somebody could help me on this.....
Terminology:
Let's call the coordinates on the big map world coordinates
Let's call the coordinates on the screen view coordinates. You are talking to the drawing system (canvas?) in view coordinates.
Your currently displayed region of the bigger map is 100% defined by an offset, let's call this (offsetX, offsetY). Formally, this offset maps your world coordinates onto your view coordinates.
If you have the small image displayed at position (x, y) in world coordinates, all you need to do is subtract your offset to get to view coordinates, i.e.
viewX = worldX - offsetX;
viewY = worldY - offsetY;
I have a bitmap out of which I'm cutting out a multipi point polygon. I'm curious what the correct process is for taking the pixels within the arbitrary shape and copying them onto a new bitmap where the rest of the pixels are transparent. The objective is to allow the user to trace the shape and then remove everything outside the polygon.
I have the polygon part worked out (as a an array of points), but now am stumped as to how to transfer just the selected pixels to a new Bitmap.
TIA
Not sure how your code works, but here's an idea on how to do it:
Calculate the bounding rectangle of the selected area (find min x, min y, max x and max y from your points).
Crop your image to the bounding rectangle using any of the Bitmap or Canvas-methods.
Create a Path from your points, all moved into your new bitmap (x-=minX, y-=minY);
Set your Paths FillType to one that is inverse (fill the outside).
On your new cropped canvas, draw the Path using a paint with the Xfermode as PorterDuff.CLEAR, which removes all color.
Android Question.
I have made a custom ImageView class and inside it I have an onDraw method which will draw a circle on particular pixels (using canvas). When I use this custom imageview and open up my image I would like to set the focus on the circle that I have drawn (e.g like google maps do with your current location. The focus is set to your current point)
What the map server does on google is deliver a customized set of tiles so that the center is displayed properly, the newer version is of course vector based so they simply draw the view so it's centered where they want it.
Without knowing the details of your application you probably need
Create your own container class, probably FrameLayout
public class myMapFrameLayout extends FrameLayout {
The override either onDraw or onDispatchDraw so that you can layout your tile appropriately
Figure out where to draw your bitmap so that the x,y you need will be in the center of the screen, then draw the other tiles that you need to fill in the blank space at the coordinates required dependent on which way the tile was moved to get centered
Think of a virtual screen that is larger than the actual screen with tiles all around it that are the same size
1 2 3
4 X 5
6 7 8
Assuming that X is the size of the display and represents the current tile you need to figure out which way to move the tile, and which other tiles 1,2,3,4,5,6,7 or 8 you need to fill in the empty space caused by move
If you had to draw the tile +x from 0,0 you need some of tile 4, drawing +y from 0,0 means some of 2 and both mean 1,2,4 are all needed and so on, so figure out the combinations and load the tiles you need, and figure out the drawing positions of each. That would give you your new virtual tile with the center displayed.
That's about as efficient as you can get I think with a bitmap drawing method on the client side.
UPDATE
Since your comment indicates you have only one very large image this is going to be a bit of a problem if the x,y you need as anything closer to the edges than the size of the display
None the less you can still draw the image where you need it, just measure the screen and draw the bitmap with the target x,y in the center
So if the screen was 500x500 and your image was 5000x5000 and the center was at position x=1000 y=1000 then
drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
where source rectangle would be 1000-250,1000-250,500,500 and dst rectangle would be 0,0,500,500
The 250 is the center x and center y of the display, 1000 are the target x/y coordinates, and 500 is the size of display.
Again, with targets that are at the edges you are going to have a blank polygon in your screen since you dont have an infinite map tile
Alternatively you could oversize your framelayout using layoutparams and just translate the canvas in the x and y to get the canvas centered to the x,y you need using similar calcs which may be more performant, not really sure
Keep in mind you are going to be using a lot of memory if your image is really big
Me used imageview to display image.
I set the scale type as ScaleType.MATRIX
There is option for scaling (zooming), dragging and all. All this are done by doing matrix manipulations mainly postTranslate and postScale
My problem now it can be drag such that the image is not in the screen
So how we get how much it is dragged.
In brief
I have two matrix (android.graphics.Matrix) one the initial stage and the other that i got after drag and zoom. Now from this 2 matrices i want to calculate how much it moved in x-direction and y-direction?
What matrix operation i need to do here.
Thank you
You can get float array of matrix's values using getValues function. The 2nd (Matrix.MTRANS_X) and 5th (Matrix.MTRANS_Y) values of matrix are transitions in x and y directions.
http://developer.android.com/reference/android/graphics/Matrix.html
You need to apply the matrix to get the transformed coordiantes. Matrix class has a few methods that will give you tranformed coordinates.
Look at
mapPoints
mapVectors
mapRect
Once you have the points (original and the transformed) you can easily calculate the distance using euclidean distance.