I am trying to implement an application in which it will load an image and zoom to a face if there is any when a button is clicked. I have used the face detection APIs for the detection part and retrieved the midpoint of a face. Now, the problem that I am facing is zooming to the area around the face. I am using a custom Imageview to display the image.
Couldn't find anything much useful in previous SO questions.
Thanks in advance.
I would suggest you to use Mike Ortiz's TouchImageView, pay attention to the DoubleTapZoom, that's the class which is going to be used. You may write your own class extending TouchImageView which supports zoom to face, something like this:
private void zoomToFace (float faceX, float faceY) {
DoubleTapZoom zoom = new DoubleTapZoom(targetZoom, faceX, faceY, false);
postDelayed(zoom, 1000/60);
}
Related
I'm trying to draw a text on a face using android face detection API.
Right now, I did this
for(Landmark landmark : face.getLandmarks()){
if(landmark.getType() == Landmark.NOSE_BASE){
Bitmap moustache = BitmapFactory.decodeResource(resources, R.drawable.moustache);
canvas.drawText("=====", landmark.getPosition().x, landmark.getPosition().y, mIdPaint);
}
}
but turns out the text ===== is draw on top of the head, and I don't know why.
If someone need more code, just let me know
If you are drawing graphics over a live camera preview, you need to take a few things into account:
the device's rotation
the scale of the view relative to the size of the preview image
whether you are using the front facing camera (which will mirror the image)
The sample code for the face tracker demo has utility methods (translateX, translateY, scaleX, scaleY) to help with this:
https://github.com/googlesamples/android-vision/blob/master/visionSamples/FaceTracker/app/src/main/java/com/google/android/gms/samples/vision/face/facetracker/FaceGraphic.java#L99
https://github.com/googlesamples/android-vision/blob/master/visionSamples/FaceTracker/app/src/main/java/com/google/android/gms/samples/vision/face/facetracker/ui/camera/GraphicOverlay.java#L100
I have an ImageView panning by Matrix using
m.postTranslate(x, y);
command.
I found that I can get the touched x, y position based on ImageView coordinate
by using inverse() method.
But I cannot find that I can draw a point on the ImageView based on its coordinate.
Simply, I want to create a point of interest and save the position on a map (ImageView),
and draw them together preserving the position of the point.
Please see also the image below that describes what I want to do.
http://img197.imageshack.us/img197/3214/qwms.png
If anyone can give me some clue, I will be very appreciated.
Thank you.
you need use a custom view for use the override metod onDraw()..thats u need for draw
I would like to display an image (including scroll and zoom functionality).
Additionally, I need to add some overlays to the image dynamically. The overlays are in a relationship to the content within the image.
If the user scrolls, the overlays should move too
If the user zooms,
the overlays should not be zoomed but hold their relative position to
the image
In other words: I'd like to implement a Map with some markers, but I provide my own map material.
My main question is: How could I do this?
What I have tried so far
I tried to implement it within a WebView as it provided the basic zooming and scaling functionality. However, I did not succeed in adding overlays without using Javascript and HTML (what I thought was not a very convenient way of solving the problem)
There are projects (i.e. TouchImageView) which are implementing the scroll/zoom functionality but they make it even harder to add own overlay functionality from my point of view.
Questions
Is there a simple solution or approach to my problem?
What is the right way of adding and moving views at runtime in Android?
(Usually, I would use a basic layout and play with the margin - would that be best practice?)
Could somebody point me to the right direction, please.
Min. API Level: 10
I would suggest extending the View class and overriding onDraw method.
Take a look at the Canvas API.
You'll probably have an onDraw method that looks like :
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
canvas.translate(mPosX, mPosY); //position of your actual data
canvas.scale(mScaleFactor, mScaleFactor); // zoom factor
map.draw(canvas); //you draw your map here
canvas.restore(); //go back to saved state
//for each marker you have, do the same "save - translate - scale - draw" loop
}
Since you don't need your markers to be zoomable, you'll probably wont need scale step but you need to calculate their position properly.
Depending on your # of objects etc, you may need to have a more optimized way of drawing your markers (e.g. re-drawing only changed rectangular areas). see View.invalidate(Rect)
I Think this one can help you
Refer this project Link
it Has a Automatic Scrolling of Image and Zoom a Image When you click On it.
Have you tried subclassing View and handling yourself user gestures? It is my first choice for complex behaviours as such. It should look something like this:
In your class extending View you should instantiate the required image and overlays at creation time as Bitmap objects
OnScroll event you will calculate how the image and overlays chould be after such scroll, refresh the Bitmaps and invalidate the current view
Using a GestureDetector, you can handle pinch events and treat zoom in/zoom out events just as scroll events
Remember to always call invalidate after changing your Bitmaps
Draw the bitmaps during the onDraw method
Plenty of material about this individual tasks on StackOverflow, let me know if you need adittional help in any of these.
Checkout this example project https://github.com/jzafrilla/AndroidImageHostpot
After a long time, I found the exact answer to my solution: TileView
Setting up the map view:
#Override
protected void onCreate( Bundle savedInstanceState ) {
super.onCreate( savedInstanceState );
TileView tileView = new TileView( this );
tileView.setSize( 2000, 3000 ); // the original size of the untiled image
tileView.addDetailLevel( 1f, "tile-%d-%d.png");
setContentView( tileView );
}
Adding the marker:
tileView.addMarker( someView, 250, 500, -0.5f, -1.0f );
Code from the documentation.
I'm developing a Android board game and have a question regarding creating a board that is zoomable and scrollable. The board contains a static background, characters (players) and the actual "level" which is drawn using tiles.
My solutions is to have a collection of elements (tiles, figures, all game elements - all have x,y coordinates and width + height), a camera and a renderer that draws the collection according to cameraX,cameraY, cameraWidth and cameraHeight. So if a user would scroll to the right, the camera would just set the cameraX appropriately - and the surface is scrollable. And if a user would zoom in/out the renderer would just scale every element image appropriately.
Example code for the renderer with scrollable surface and zoom in/out
protected function draw(Canvas c){
Collection elements = collection.getElements(cameraX,cameraY,cameraWidth,cameraHeight);
if(elements.size() > 0) {
for(int i = 0; i < elements.size(); i++) {
elements.get(i).drawElement(c);
}
}
}
.
.
.
// element class drawElement function
protected drawElement function(Canvas c) {
if(this.image != null) {
int w = this.width;
int h = this.height;
if(this.zoomFactor < 1) {
w*=this.zoomFactor;
h*=this.zoomFactor;
}
c.drawBitmap(this.image,this.x,this.y,w,h);
}
}
Is this the best solutions?
Could it be achived somehow else?
Could scrolling be achived using a ScrollView?
I dont wanna use any engine, because this is for a school project.
Actually you can simplify this situation somewhat. If you are indeed seeking a flat texture plane that is simply distorted by perspective, the Android Camera class can help you. Do not confuse this with the hardware camera for taking photos. This camera is a helper class wrapped around a matrix to perform transformations on 2D objects. You can read more about this very complex rendering topic by googling "fast fourier transforms". Basically you will want to create a canvas and do your drawing in a completely 2D way. Then right before you draw to the screen, you should transform this canvas using the Camera class. Let me know if you need some clarification. There is a lot of cool mathematics going on behind the scenes!
Take a look at this sample from the Android API Demos
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/animation/Rotate3dAnimation.html
Android graphics.Camera documentation
http://developer.android.com/reference/android/graphics/Camera.html
Hi friends
I am creating one app where i put two views. first is imageview and the other one is my customeview.
i am drawing image on my custom view. my custom view code is as follow
public class DrawView extends ImageView{
#SuppressWarnings("unused")
private static final String TAG = "DrawView";
Painter painter = new Painter();
PathStack pathStack;
private DrawApplication drawApplication;
public DrawView(Context context, AttributeSet attr) {
super(context,attr);
setFocusable(true);
setFocusableInTouchMode(true);
drawApplication=(DrawApplication)context.getApplicationContext();
pathStack=drawApplication.getPainter().getPathStack();
painter=drawApplication.getPainter();
setScaleType(ScaleType.MATRIX);
}
#Override
public void onDraw(Canvas canvas) {
float scaleFactor=drawApplication.getScaleFactor();
canvas.scale(scaleFactor, scaleFactor,(float)getWidth()/2,(float)getHeight()/2);
List<DrawingPath> currentStack=pathStack.getCurrentStack();
for (DrawingPath drawPath : currentStack) {
drawPath.draw(canvas, painter);
}
}
}
many things clear from code like storing path on drawapplication etc.
now we have decided to provide zooming and panning to this view. and my drawing should also be zoomed accordingly along with imageview which in back.
also i should be able to draw correctly.
I tried canvas scaling but that is worst, because after scaling i am not able to draw to the touched point and also less drawing to the screen resulting in more drawing to the view.
drawing on widget is also very lengthy task results in performance slow down.
plz provide any way.
and also i am using api level 10.
Edit1
Well friends. i got one idea.
i have to draw path on different zoom level. so if we can calculate path ratio in different zoom level than it will solve my problem. plz provide help accordingly
Edit2
if we will be able to scale path then it can solve my problem
Edit3
i think if we draw it on bitmap than i can achieve my goal, but my problem is resizing bitmap and providing scrolling to bitmap on different zoom level
Similar questions on SO:
android pinch zoom
Pinch zoom for custom view
Can be done on Honeycomb (API lvl 11) but not properly before.
I don't think a normal view can be zoomed. You could capture the touch events and scale the view widgets correspondingly.