I have a custom view that extends SurfaceView. I am drawing an image on the canvas. When the user touches a point on the canvas, i want to show a magnified view of the area around the touched co-ordinates. And preferably, as the finger moves around, i would like to update the magnified view's content accordingly.
I was wondering if the android platform supports such a functionality natively. If not, can one of you point me to a good example that can get me started or share ideas on how to implement it. I don't do much 2D or 3D graphics of this sort and am still trying to understand the Canvas and Matrix Classes to see what i can be use.
I searched the forum for a similar question but could not find any. So, pls don't flag me for asking a question that already exists.
And no - i am not using OpenGL-ES or any such 3rd party library (yet).
Thanks All.
To zoom the image you're drawing on the canvas:
Create a BitmapShader (using the bitmap of the image you're drawing), a Matrix and a Paint:
shader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
matrix = new Matrix();
shaderPaint = new Paint();
shaderPaint.setShader(shader);
On a touch event record the touch position (e.g. in a PointF):
zoomPos.x = event.getX();
zoomPos.y = event.getY();
...and set up the shader's matrix (I do this on each touch, there's probably a better way):
matrix.reset();
matrix.postScale(2f, 2f);
matrix.postTranslate(-zoomPos.x, -zoomPos.y);
shader.setLocalMatrix(matrix);
Then in the drawing code, draw a circle using the shader Paint.
canvas.drawCircle(zoomPos.x, zoomPos.y, size_of_the_circle, shaderPaint);
Edit
The two lines:
matrix.postScale(2f, 2f);
matrix.postTranslate(-zoomPos.x, -zoomPos.y);
Can be replaced with one:
matrix.postScale(2f, 2f, zoomPos.x, zoomPos.y);
This allows the scale factor to be changed without breaking the offset.
Related
I got a requirement to display only face from an image. But, I am trying to use only android native methods to implement this.
I have gone through the following link
Crop Image with face detection in android
But, the code mentioned in the above link is not working for all images.
Please guide me if anyone has already got the same requirement.
Thanks.
A face detection algorithm is never (and will never be) accurate. Even humans sometimes see the face of jezus in a toast. How can you expect computers to detect a face 100% correctly, if even the reference implementation (the human brain) contains bugs.
You should include a fallback scenario, when there is no (or more as one) face detected. Or do some quality check on the pictures before they are used.
You can use this rounded rectangle code with bigger corner radius to achieve a circle (recipe by Romain Guy):
BitmapShader shader;
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);
RectF rect = new RectF(0.0f, 0.0f, width, height);
// rect contains the bounds of the shape
// radius is the radius in pixels of the rounded corners
// paint contains the shader that will texture the shape
canvas.drawRoundRect(rect, radius, radius, paint);
I am drawing a number of shapes on a canvas. One such shape is a bitmap. Say the center of the bitmap on the canvas is at center xCenter, yCenter such that to draw I call
xLeft = xCenter+mBitmap.getWidth()/2;
yTop = yCenter+mBitmap.getHeight()/2;
canvas.drawBitmap(mBitmap, x,y, mFilledPaint);
So far everything works fine. The next step is to rotate the bitmap around the center xCenter, yCenter. My code below is not doing it. It moves the bitmap all over the place, whereas all I want is for the image to rotate in place around its own center. How can I fix the code below? I already looked at Android: How to rotate a bitmap on a center point and at best I don't understand the responses there.
My code
xLeft = xCenter+mBitmap.getWidth()/2;
yTop = yCenter+mBitmap.getHeight()/2;
matrix.postRotate(30f, xLeft, yTop);
canvas.drawBitmap(mBitmap, matrix, mFilledPaint);
also replacing xLeft and yTop with 0 does not seem to work.. any idea ??
Edit:
xCenter, yCenter is not the center of the canvas. It's just the point where the center of the bitmap lands.
i guess you mean, you can not understand following code:
this.matrix.reset();
this.matrix.setTranslate(this.floatXpos, this.floatYpos);
this.matrix.postRotate((float)this.direction, this.getCenterX(), this.getCenterY());
I think i could give some explanation about this, since i done this task in my project before:
the first line to rest it to identity, which means do thing, because any thing times identity matrix get itself.
the second line, move the original point to the target position,this is actually specify xLeft and yTop to which the bitmap will draw in canvas.
the thrid line, rotate around center point (xLeft+bitmapWidth/2,yTop+Height/2)
To understand this, you need to know how the matrix is used.basically, you bitmap (the points in bitmap is a matrix actually) times the matrix you created here, then it get a new matrix, canvas just draw that new matrix.
I would like to display a transperent PNG of a "light" line shape according to user's sliding path.
I'd like to make similar effect like Fruit Ninja has, and leave a track after user slides his finger.
I already have the x,y points of his finger - using onTouch method, and checking the x,y on MotionEvent.ACTION_DOWN and MotionEvent.ACTION_UP but how do i draw an image that will be tilted and displayed at those positions? all i know is to add padding/margin to an image, not how to place it using x,y, or how to rotate it..
For positioning and rotating use a canvas (getSurfaceHolder().lockCanvas()) and draw inside it using drawBitmap.
public void drawBitmap (Bitmap bitmap, Matrix mtx, Rect dst, Paint paint)
the matrix can include the rotation:
Matrix mtx = new Matrix();
mtx.postRotate(90);
You might want to se the code from API demos, FingerPaint.
I want to skew (correct me if this is not the correct word) a bitmap so that it appears to have depth. A good way to visualize what I am asking for is how the credits of Star Wars are angled to show depth.
I have tried the following:
canvas.getMatrix().postSkew(kx,ky,px,py);
and
canvas.skew(sx,sy);
But I have not had much success. The above methods seem to always transform the bitmap into a parallelogram. Is there a way to transform the bitmap into a trapezoid instead?
Here is a snippet of code that I took from the examples that Romain pointed me to.
canvas.rotate(-mOrientation[0] + mHeading, mCenterX, mCenterY);
camera.save();
if (mReverse) {
camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
}
camera.rotateX(mOrientation[1]);
camera.applyToCanvas(canvas);
canvas.drawPath(mPath, mPaint);
canvas.drawCircle(mCenterX, mCenterY, mRadius - 37, mPaint);
camera.restore();
I spent a lot of time working on this today (ran into the same problem) and came up with the code below.
Key thing to note, you need to set preTranslate() and postTranslate() to the center (or somewhere else) of your Canvas area. It seems to mean that it uses the center of the image to apply the transformation from, instead of the upper left corner (x=0,y=0) by default. This is why you would get a parallelogram instead of what you would expect, a trapezoid (Thanks for teaching me the names of those).
The other important thing that I picked up is the Save/Restore functions on the Canvas/Camera. Basically, if you call the Rotate functions consecutively three times without restoring the state back each time, you would keep rotating your object around and around each time you draw. That might be what you want, but I certainly didn't in my case. Same applies to the canvas as you are basically applying the Matrix from the Camera object to the Canvas and it needs to be reset otherwise the same thing occurs.
Hope this helps someone, this is not well documented for beginners. Tip to anyone reading this, check out the APIDemos folder in the SDK Samples. There is a Rotate3dAnimation.java file which demonstrates this as well.
//Snippet from a function used to handle a draw
mCanvas.save(); //save a 'clean' matrix that doesn't have any camera rotation in it's matrix
ApplyMatrix(); //apply rotated matrix to canvas
Draw(); //Does drawing
mCanvas.restore(); //restore clean matrix
//
public void ApplyMatrix() {
mCamera.save();
mCamera.rotateX(-66);
mCamera.rotateY(0);
mCamera.rotateZ(0);
mCamera.getMatrix(mMatrix);
int CenterX = mWidth / 2;
int CenterY = mHeight / 2;
mMatrix.preTranslate(-CenterX, -CenterY); //This is the key to getting the correct viewing perspective
mMatrix.postTranslate(CenterX, CenterY);
mCanvas.concat(mMatrix);
mCamera.restore();
}
You cannot achieve the effect you want with skew(). However, you can use a Camera object and 3D rotations to achieve this effect. The Camera will generate a Matrix for you that you can then apply on the Canvas. Note that the result will not be perspective correct, but good enough for your purpose. This how 3D rotations are done in Honeycomb's Launcher for instance (and many other apps.)
I don't think the "Star Wars effect" is an affine transformation, which I think are the only operations supported by Matrix.
I'm currently writing an android side-scrolling game and am having trouble filling a path with a repeating bitmap image. I'm creating a path from a number of coordinates to make up the "ground" area. I have a character who is fixed in the middle of the canvas and screen and am moving the path to represent the movement of the character. I've been able to fill the path with a repeating image using a BitmapShader. Also I can move the path shape from side to side on the screen. However, the Bitmapshader seems to be using a default origin of 0,0 which means the shader is always drawing the ground repeating image in the same place. This means that even though the path is moving the ground repeated image never appears to move. Does anyone have any idea how to change the origin of the shader or know of a better way to fill the path with a repeating image?
Alternatively, can anyone suggest a better solution for filling a drawable shape with an image?
Thanks
Andy
Thanks, had a look at those...Replica Island seems to use OpenGL quite a lot which is a bit beyond me at present and Snake didn't quite do what I was looking for...eventually got there..
//Shape pathShape = this.getPathShape();
Bitmap groundImage = ImageHandler.getmGroundImage();
int offset = groundImage.getWidth()-(xPosition%groundImage.getWidth());
Path path = new Path();
path.moveTo(coordinates.get(0).getmX(), coordinates.get(0).getmY());
for ( ShapeCoordinate coordinate : coordinates ) {
path.lineTo(coordinate.getmX(), coordinate.getmY());
}
path.lineTo(coordinates.get(coordinates.size()-1).getmX(), mYBase);
path.lineTo(coordinates.get(0).getmX(), mYBase);
path.lineTo(coordinates.get(0).getmX(), coordinates.get(0).getmY());
path.close();
PathShape shape = new PathShape(path,canvas.getWidth(),canvas.getHeight());
BitmapShader bs = new BitmapShader(groundImage, Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
Matrix matrix = new Matrix();
matrix.reset();
matrix.setScale(1,1);
matrix.preTranslate(offset, 0);
bs.setLocalMatrix(matrix);
ShapeDrawable sd = new ShapeDrawable(shape);
sd.setColorFilter(Color.argb(255, 50*(mLevel+1), 50*(mLevel+1), 50*(mLevel+1)), Mode.LIGHTEN);
sd.getPaint().setShader(bs);
sd.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
sd.draw(canvas);
Have you looked at the Snake example in the android sdk? Also Replica Island is another example of how to do a tile engine in android.