Android how to draw paint in free hand in MapView using overlay?

android, android-mapview, overlay, paint

Solution

You can free hand draw a line using the code bellow:

Code

public class HandDrawOverlay extends Overlay { 

private boolean editMode = false;
private boolean isTouched = false;
private Paint paint = new Paint(); 
private Point screenPt1 = new Point(); 
private Point screenPt2 = new Point(); 
private ArrayList<GeoPoint> points = null;

public HandDrawOverlay(){ 
    paint.setStrokeWidth(2.0f); 
    paint.setStyle(Style.STROKE); 
    paint.setColor(Color.BLUE); 
} 

@Override 
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
    if(points != null && points.size() > 1){
        mapView.getProjection().toPixels(points.get(0), screenPt1); 
        for(int i=1; i<points.size();i++){
            mapView.getProjection().toPixels(points.get(i), screenPt2);
            canvas.drawLine(screenPt1.x, screenPt1.y, screenPt2.x, screenPt2.y, paint);
            screenPt1.set(screenPt2.x, screenPt2.y);
        }
    }
}     

@Override 
public boolean onTouchEvent(MotionEvent e, MapView mapView) { 
    if(editMode){ 
        int x = (int)e.getX();
        int y = (int)e.getY();
        GeoPoint geoP = mapView.getProjection().fromPixels(x,y);

        switch (e.getAction()) {
        case MotionEvent.ACTION_DOWN:
            isTouched = true;
            points = new ArrayList<GeoPoint>();
            points.add(geoP);
            break;
        case MotionEvent.ACTION_MOVE:
            if(isTouched)
                points.add(geoP);
            break;
        case MotionEvent.ACTION_UP:
            if(isTouched)
                points.add(geoP);
            isTouched = false;
            break;
        }
        mapView.invalidate();
        return true; 
    } 
    return false; 
}

/**
 * @return the editMode
 */
public boolean isEditMode() {
    return editMode;
}

/**
 * @param editMode the editMode to set
 */
public void setEditMode(boolean editMode) {
    this.editMode = editMode;
} 
}

to use

HandDrawOverlay handDrawOverlay;
handDrawOverlay = new HandDrawOverlay();
mapView.getOverlays().add(handDrawOverlay);

//Set edit mode to true to start drwaing
handDrawOverlay.setEditMode(true);

//Set edit mode to true to stop drwaing
handDrawOverlay.setEditMode(false);

Note

This is a full functioning example to help you starting. However, you should optimize the code to make it more efficient (i.e. using `Path` to store the drawing path in `onDraw()`, reducing the number of points recorded in `onTouch()`, etc.).

Enjoy it.

Problem

In my app Draw paint in free hand on Map view but searching lot of information finally got from rectangle shape draw on mapview but i want in place of rectangle draw free hand like zigzag how to change my code Any help please.. MapOverlay.java ``` public class MapOverlay extends Overlay { private float x1,y1,x2,y2; private GeoPoint p1=null,p2=null; private MapExampleActivity mv = null; private Paint paint = new Paint(); private Path path = new Path(); private boolean isUp = false; //constructor receiving the initial point public MapOverlay(MapExampleActivity mapV,float x,float y){ paint.setStrokeWidth(2.0f); x1 = x; y1 = y; mv = mapV; p1 = mapV.getMapView().getProjection().fromPixels((int)x1,(int)y1); } //override draw method to add our custom drawings @Override public boolean draw(Canvas canvas, MapView mapView, boolean shadow, long when) { if(p1 != null && p2 != null){ //get the 2 geopoints defining the area and transform them to pixels //this way if we move or zoom the map rectangle will follow accordingly Point screenPts1 = new Point(); mapView.getProjection().toPixels(p1, screenPts1); Point screenPts2 = new Point(); mapView.getProjection().toPixels(p2, screenPts2); //draw inner rectangle paint.setColor(Color.BLUE); // paint.setStyle(Style.FILL); canvas.drawPath(path, paint); canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint); //draw outline rectangle // paint.setColor(Color.YELLOW); paint.setStyle(Style.STROKE); // canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint); canvas.drawPath(path, paint); } return true; } @Override public boolean onTouchEvent(MotionEvent e, MapView mapView) { if(mv.isEditMode() && !isUp){ if(e.getAction() == MotionEvent.ACTION_DOWN){ x1 = y1 = 0; x1 = e.getX(); y1 = e.getY(); p1 = mapView.getProjection().fromPixels((int)x1,(int)y1); } //here we constantly change geopoint p2 as we move out finger if(e.getAction() == MotionEvent.ACTION_MOVE){ x2 = e.getX(); y2 = e.getY(); p2 = mapView.getProjection().fromPixels((int)x2,(int)y2); } //---when user lifts his finger--- if (e.getAction() == MotionEvent.ACTION_UP) { isUp = true; } return true; } return false; } ``` } using this i able to draw like this rectangle shapes and draw up to again you click the toggle button(possible to draw multiple times) i want draw lines instead of rectangle like below image(draw multiple times). finally i found this link this link provide rectangle shape draw http://n3vrax.wordpress.com/2011/08/13/drawing-overlays-on-android-map-view/ just change rectangle to free draw any idea please....

Original source