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

Question

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....

Answer 1

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.