i am translating and scaling image by matrix, now i have matrix values . so from matrix value i want to convert my touch coordinates to its position which is getting by matrix. so what should i do for that ?
please help me asap.
private void drawPoint(float x, float y, float pressure, float width) {
// left is tx of matrix
// top is ty of matrix
float curX = (x - left) / (scale * scale);
float curY = (y - top) / (scale * scale);
canvas.drawPoint((curX - left), (curY - top) , mPaint);
}
I know it's an old post, but I had the same problem.
I have an image which is applied a matrix transformation, first I resize it, and then I do a translation.
image = new Matrix();
image.setScale(zoom, zoom);
Paint drawPaint = new Paint();
drawPaint.setAntiAlias(true);
drawPaint.setFilterBitmap(true);
float centerScaledWidth = image_center.x * zoom / 2;
float centerScaledHeigth = image_center.y * zoom / 2;
image.postTranslate(screen_center.x - centerScaledWidth,
screen_center.y - centerScaledHeigth);
canvas.drawBitmap(bmp, image, drawPaint);
To get the points touched on the image I get trace of the matrix image and this is the method:
#Override
public boolean onTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
switch (action & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN: {
final float x = ev.getX();
final float y = ev.getY();
float[] pts = {x, y};
Matrix m = new Matrix();
// This is the magic, I set the new matrix m
// as the inverse of
// the matrix applied to the image
image.invert(m);
// transform the points using the inverse matrix
m.mapPoints(pts);
// do what you have to do
.......
Log.i("transformed", pts[0] +" "+pts[1]);
break;
}
}
return super.onTouchEvent(ev);
}
Related
I've been trying to get the mouse coordinates from scaled canvas. The canvas.scale(scale, scale) gives me the correct coordinates but if i use canvas.scale(scale, scale, pivotX, pivotY) the coordinates are wrong.
//onDraw
canvas.scale(scaleFactor, scaleFactor); //default pivot x & y = 0, 0
//canvas.scale(scaleFactor, scaleFactor, pivotX, pivotY);
private float pixelWidth = 480;
private float pixelHeight = 320;
//onTouchEvent
touchX = (int) event.getX() * pixelWidth / getWidth();
touchX = (int) event.getY() * pixelHeight / getHeight();
worldX = touchX / scaleFactor;
worldY = touchY / scaleFactor;
What do i need to do to get the correct coordinates from canvas.scale with different pivot other than default 0, 0? I've read & tried about the matrix too but no luck.
solved it using matrix and this code from https://stackoverflow.com/a/20011005/7334711
Matrix matrix = new Matrix();
public void render(Canvas canvas) {
canvas.save();
matrix.setScale(mScaleFactor, mScaleFactor, pivotX, pivotY);
canvas.setMatrix(matrix);
...
float[] mv = new float[9];
#Override
public boolean onTouchEvent(MotionEvent event) {
// Get the values from the matrix into the float array
matrix.getValues(mv);
float touchX = (event.getX()*(1/mv[4]) - (mv[2]/mv[4]));
float touchY = (event.getY()*(1/mv[4]) - (mv[5]/mv[4]));
...
I have an app in which it has a main canvas and i have added another canvas of bitmap on top of it. In the main canvas I have eraser in which it will detect when the user touches the bitmap area. I want to know the x and y inside the bitmap where the eraser touches and so on while moving from main canvas since the bitmap canvas is different from the main canvas. I want the x and y of the main canvas be the same with the bitmap canvas to be move. Thanks
Here's my snippet
public void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
mX = x;
mY = y;
}
if(istouchingBitmap(x, y) == true){
float xRatio = (float)bitmap.getWidth() / parent.getWidth();
float yRatio = (float)bitmap.getHeight() / parent.getHeight();
float xPos = lastX * xRatio;
float yPos = lastY * yRatio;
eraseBitmap(bitmap, xPos , yPos , 5);
}
}
function to detect the bitmap when touch
/**
*
* #param x The X location of the cursor in main View.
* #param y The Y location of the cursor in main View.
* #return This is only used to detect if the cursor is touching the Bitmap Image.
*/
public boolean istouchingBitmap(float x, float y) {
matrix.invert(inverse);
float[] pts = {x, y};
inverse.mapPoints(pts);
if (!bounds.contains(pts[0], pts[1])) {
return false;
}
// copy the location
lastX = x;
lastY = y;
return Color.alpha(bitmap.getPixel((int) pts[0], (int) pts[1])) != 0;
}
You only need to get the X and Y values from the touch event.
Then sustract the top,left margin/offset values respectively.
The result is the X,Y coordinate relative to the start of the bitmap.
PD: When doing this, i was having problems handling the status bar height, since the way of measuring it changes between Android version and device model.
Hope this helps.
Finally :). This code will map the screen X and Y to the x and y inside the bitmap. Hope it help others. Good luck
float[] point = new float[] {lastX, lastY};
Matrix inverse = new Matrix();
matrix.invert(inverse);
inverse.mapPoints(point);
bitmapX = point[0];
bitmapY = point[1];
canvas.drawCircle(bitmapX, bitmapY, radius, mPaint); // punch a hole
i have following problem. I have a bitmap and on this bitmap certain draw operations can be done. Like drawing a line, arrwow, etc.
This works pretty well, but the bitmap can be zoomed, dragged and rotated. For this a drawMatrix is used. Everything this works pretty good but, for drawing i need the original coordinates so that the drawings come in the right size, etc.
I can get this original coordinates with the following function. But it doesn't work with rotations. Does anybody have an idea, how to solve this?
/**
* When we have moved or zoomed we need the original image coordinates calculated from
* the screen coordinates. This function gives that back
*/
private Point translateScreenCoordsToOriginalImageCoords(MotionEvent e) {
float[] m = new float[9];
drawMatrix.getValues(m);
float transX = m[Matrix.MTRANS_X] * -1;
float transY = m[Matrix.MTRANS_Y] * -1;
float scaleX = m[Matrix.MSCALE_X];
float scaleY = m[Matrix.MSCALE_Y];
// TODO function does not work when rotated by 90 degree
if (scaleX == 0.0) {
scaleX = -1.0f;
scaleY = -1.0f;
}
int lastTouchX = (int) ((e.getX() + transX) / scaleX);
int lastTouchY = (int) ((e.getY() + transY) / scaleY);
lastTouchX = Math.abs(lastTouchX);
lastTouchY = Math.abs(lastTouchY);
return new Point(lastTouchX, lastTouchY);
}
This is how scaling is performed
/**
* Scale the canvas by
*
* #param scaleFactor e.g 2 is double
* #param focusX the center x point
* #param focusY the center y point
*
* #return true if scaling is performed
*/
private boolean doScale(float scaleFactor, int focusX, int focusY) {
if (this.scaleBoundaries(scaleFactor))
return false;
Matrix transformationMatrix = new Matrix();
// Zoom focus is where the fingers are centered
transformationMatrix.postTranslate(-focusX, -focusY);
transformationMatrix.postScale(scaleFactor, scaleFactor);
transformationMatrix.postTranslate(focusX, focusY);
drawMatrix.postConcat(transformationMatrix);
invalidate();
return true;
}
e.g. This is the draw function of a Line
#Override
public void draw(Canvas c, Matrix drawMatrix, boolean translateCoordiantes) {
float pts[] = new float[] {this.start.x, this.start.y, this.end.x, this.end.y};
if (translateCoordiantes)
drawMatrix.mapPoints(pts);
c.drawLine(pts[0], pts[1], pts[2], pts[3], this.paint);
}
Wow pskink thanks a lot! That was the answer! To get the orignal coordinates back, use:
private Point translateCoordinatesBack(MotionEvent event) {
Matrix inverse = new Matrix();
drawMatrix.invert(inverse);
float[] pts = {event.getX(), event.getY()};
inverse.mapPoints(pts);
return new Point((int) pts[0], (int) pts[1]);
}
I'm working on Android project and I'm using View class to drawing image and overlays.
I'm using this code to drawing image and circle (it is working fine):
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
if (!isInitialized) {
w = getWidth();
h = getHeight();
position.set(w / 2, h / 2);
// Scaling image to be fit screen
if(width<=height) { scale=((float)w)/width; } else { scale=((float)h)/height; }
isInitialized = true;
}
Paint paint = new Paint();
matrix.reset();
matrix.postTranslate(-width / 2.0f, -height / 2.0f);
matrix.postRotate((float)(angle*180/Math.PI));
matrix.postScale(scale, scale);
matrix.postTranslate(position.getX(), position.getY());
canvas.drawBitmap(bitmap, matrix, paint);
canvas.concat(matrix);
canvas.drawCircle(testPoint.x, testPoint.y, 20, paint );
}
Now I want to show PopupWindow windows as a tip on the image and on the same position of circle (testPoint). but the PopupWindows is not drawable object, so how can I find the new coordinates of testPoint after scaling, rotation and translating to put the coordinates of the PopupWindow same.
I'm trying to write code and it working fine, but for rotation and translating only without scaling, this is the code I wrote:
int offsetX=(int) (-(width / 2.0f)+position.getX())+rc.left;
int offsetY=(int) (-(height / 2.0f)+position.getY())+rc.top;
Point RotatedPoint = RotatePoint(testPoint, centerPoint, angle);
RotatedPoint.x +=offsetX;
RotatedPoint.y +=offsetY;
popup.update(RotatedPoint.x, RotatedPoint.y, -1, -1);
Where rc is the offset difference between bitmap view coordinates and the screen coordinates.
And I'm tested RotatePoint function and it working correctly.
Note: when the scale is equal 1 (disable scaling) the position of popup window is updating correctly if I rotate or move the image.
How can I merged the scale (if not equal 1 only) with equations?
Or there is another way to find new coordinates of overlay object on the canvas after modifying on matrix?
Please help me to solved this problem.
I will be grateful for the help.
Thank you.
try to use matrix.mapPoints()
u must have the absolute coordinates of the image
how to absolute coord?
void calculaCoordenadasImagen(MotionEvent e){
float []m = new float[9];
matrix.getValues(m);
float transX = m[Matrix.MTRANS_X] * -1;
float transY = m[Matrix.MTRANS_Y] * -1;
float scaleX = m[Matrix.MSCALE_X];
float scaleY = m[Matrix.MSCALE_Y];
lastTouchX = (int) ((e.getX() + transX) / scaleX);
lastTouchY = (int) ((e.getY() + transY) / scaleY);
lastTouchX = Math.abs(lastTouchX);
lastTouchY = Math.abs(lastTouchY);
}
then use 2 different arrays to save the points
int [] absolute = new int[2];
absolute[0]=lastTouchX;
absolute[1]=lastTouchY;
int [] points = new int[2];
points = matrix.mapPoints(absolute)
in absolute u have the absolute coordinates and in points u have the points u want know
i wish it help!
I am having a problem. I have a post draw listener where I draw a scaled version of a bitmap. The problem stems from the fact that I tend to do some scaling every time a zoom happens (zoom in scale up, zoom out scale down). The problem is I am not able to recycle the bitmap because when I try to do so after drawing
canvas.draw(scaledbitmap,0,0,null);
scaledBitmap.recycle()
i get the Canvas canot draw recycled bitmap exception
Does anyone know how I would go about recycling a bitmap after I am done with it so that another can be scaled afterwards and I don't get the OutOfMemoryException crash.
Some Code to show you exactly how I am using it:
private SpenDrawListener mPosteDrawListener = new SpenDrawListener() {
#Override
public void onDraw(Canvas canvas, float x, float y, float ratio,
float frameStartX, float frameStartY, RectF updateRect) {
if(mLineDrawingBitmap == null)
mLineDrawingBitmap = loadLineDrawingBitmap(mLineDrawingFileName);
Bitmap bm = Bitmap.createScaledBitmap(mLineDrawingBitmap, (int)(mLineDrawingBitmap.getWidth() * ratio), (int)(mLineDrawingBitmap.getHeight() * ratio), true);
/*
float pointX = (mScreenRect.width() - bm.getWidth()) / 2;
float pointY = mScreenRect.height() / 2 - bm.getHeight();
*/
float pointX = frameStartX - (x * ratio);
float pointY = frameStartY - (y * ratio);
//canvas.drawBitmap(bm, 0, 0,null);
canvas.drawBitmap(bm, pointX, pointY, null);
//bm.recycle();
}
};
After several hours of trial and error I have figured out how to scale nicely AND not crash the app with an OutOfMemoryException: Below is the code for drawing and scaling at runtime with no crash (as long as the image is not too large when decoded). I will use my own PostDrawListener but I believe it can be used anywhere with minor modification
private SpenDrawListener mPosteDrawListener = new SpenDrawListener() {
#Override
public void onDraw(Canvas canvas, float x, float y, float ratio,
float frameStartX, float frameStartY, RectF updateRect) {
if(mLineDrawingBitmap == null)
mLineDrawingBitmap = loadLineDrawingBitmap(mLineDrawingFileName);
float pointX = frameStartX - (x * ratio);
float pointY = frameStartY - (y * ratio);
//Create a new Matrix
Matrix m = new Matrix();
//Use any scaling ratio you want
m.postScale(ratio, ratio);
//Use any translation you want
m.postTranslate(pointX, pointY);
//when using below call you will not be creating a new bitmap, just
//using the original with runtime modifications
canvas.drawBitmap(mLineDrawingBitmap, m, null);
}
};