How to make route drawing more efficient?

Question

This is the code I'm using to draw route. When i have 1000 of points, route severely slows ui. Maybe someone could provide a code snippet or a link which explains how to do route drawing more efficiently? I know that one way to solve this is caching path to bitmap, but have no idea how to do it.

public class PathOverlay extends Overlay{

private GeoPoint startPoint;
private GeoPoint finishPoint;
private ArrayList<GeoPoint> pathPoints;
private Paint paint;
private Path path;
private Point pathStartPoint;
private Point pathEndPoint;

private float dx;
private float dy;


public PathOverlay(GeoPoint startPoint, GeoPoint finishPoint, ArrayList<GeoPoint> pathPoints, int color){
    this.startPoint = startPoint;
    this.finishPoint = finishPoint;
    this.pathPoints = pathPoints;
    this.paint = new Paint();
    this.paint.setAntiAlias(true);
    this.paint.setDither(true);
    this.paint.setColor(color);
    this.paint.setAlpha(150);
    this.paint.setStrokeWidth(4);
    this.paint.setStyle(Paint.Style.STROKE);
}

@Override
public void draw(Canvas overlayCanvas, MapView mapView, boolean shadow) {
    if(path == null) {
        path = getPath(mapView);
    } else {
        path = transformPath(mapView);
    }
    overlayCanvas.drawPath(path, paint);
    super.draw(overlayCanvas, mapView, shadow);
}

private Path getPath(MapView mapView) {
    Projection projection = mapView.getProjection();
    if(path == null) {
        path = new Path();
        path.setFillType(FillType.WINDING);
    } else {
        path.rewind();
    }
    Point point = new Point();
    pathStartPoint = new Point();
    pathEndPoint = new Point();

    projection.toPixels(startPoint, point);
    projection.toPixels(startPoint, pathStartPoint);
    path.moveTo(point.x, point.y);
    path.addCircle(point.x, point.y, (float) 2.0, Direction.CCW);
    if (pathPoints != null) {
        for(int i=0;i<pathPoints.size();i++) {
            projection.toPixels(pathPoints.get(i), point);
            path.lineTo(point.x, point.y);
        }
    }
    projection.toPixels(finishPoint, point);
    projection.toPixels(finishPoint, pathEndPoint);
    path.lineTo(point.x-5, point.y);
    path.addCircle(point.x-5, point.y, (float) 2.0, Direction.CCW);


    return path;
}

private Path transformPath(MapView mapView) {
    Projection projection = mapView.getProjection();

    Point sPoint = new Point();
    Point ePoint = new Point();
    projection.toPixels(startPoint, sPoint);
    projection.toPixels(finishPoint, ePoint);

    float sx = ((float)ePoint.x - (float)sPoint.x)/((float)pathEndPoint.x - (float)pathStartPoint.x);
    float sy = ((float)ePoint.y - (float)sPoint.y)/((float)pathEndPoint.y - (float)pathStartPoint.y);

    if(sx != 1.0 && sy != 1.0) {
        Log.i("PathOverlay", "resized");
        return getPath(mapView);
    } else {
        Log.i("PathOverlay", "moved");
        Matrix matrix = new Matrix();

        dx = (float)sPoint.x - (float)pathStartPoint.x;
        dy = (float)sPoint.y - (float)pathStartPoint.y;

        matrix.postTranslate(dx, dy);
        pathStartPoint = sPoint;
        pathEndPoint = ePoint;
        path.transform(matrix);

        return path;
    }
}

}

Answer 1

You can draw the path to a transparent Bitmap object (whatever size you see fitting - the bigger it is, the better the detail of the path yet higher memory consumption).

Make sure you create it with Bitmap.config.ARGB_8888 for transparency.

Once you've done this, you'll be using two rectangles to display the path on the Overlay:

• A source rectangle to determine which part of the path is visible
• A destination rectangle to determine where you want to display this piece of the path on the Overlay's canvas.

You'll be using Canvas.drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)

Shouldn't be too difficult, you've done most of the important calculations in your transformPath method.

Added:

You can actually do a combination of both holding a path drawn to a Bitmap and redrawing the actual path points. Use the technique described above for when the user moves around the map or zooms in/out then redraw the path when the user lets go of the screen.

Answer 2

Best way to increase speed of drawing is reducing number of point the path includes. Probably they are not necessary - lot of them just lays between previous and next, so you can filter them by:

minimal distance from previous point (easy way)

minimal bearing change (a bit harder, although Location class and it's method bearingTo() should help.

Answer 3

1. You should know that draw() method draws one draw cycle about 50 times. I do not know why, but you can test it. This slows down the performance. And if you have to draw 1000 object and draw() draws them 30-50 each...it is getting very very clumsy.. To avoid this, you should create a cache overlay.This cache will draw all objects only once and will reject the other draws.

2. To speed up the process, draw in background thread with low priority.

3. The fastest way to draw a line between multiple points is to use the method Canvas.drawLines(float[] pts, int offset, int count, Paint paint). I have tested all methods and this is the fastest method that android offers.