Drawing canvas into Android WebView and zooming

Question

I'm new to Android programming. I want to draw lines onto an image and allow the user to zoom in and out. Since ImageView did not seem to have in-built zoom controls, I decided on using WebView. I extended WebView class and overwrote the onDraw method to let me draw lines on canvas. I then loaded my image into the WebView. This shows me the lines I draw in the canvas placed over the image within the WebView.

Though I am able to zoom in and out of my image in WebView, the lines I drew in the canvas do not scale accordingly; my image is enlarged, but the line (canvas) remains the same size on the screen. Is there some way to also zoom in my canvas when I zoom in my WebView?

This code is in my main activity:

    final CustomWebView webview = (CustomWebView) findViewById(R.id.webView1);
    webview.loadUrl("file:///android_asset/myimage.png");
    WebSettings websettings;
    websettings = webview.getSettings();
    websettings.setBuiltInZoomControls(true);

This code is in my CustomWebView and draws one straight line:

public CustomWebView (Context context, AttributeSet attrs)
{
    super (context, attrs);
}

@Override
protected void onDraw(Canvas canvas) 
{
    super.onDraw (canvas);

    Paint p = new Paint();
    p.setColor (Color.RED);
    canvas.drawLine (20, 10, 300, 400, p);
}

I also tried loading the image directly on to the canvas in CustomWebView using a bitmap and then drew the line on it.

map = BitmapFactory.decodeResource(getResources(), R.drawable.demo);
canvas.drawBitmap(map, 0, 0, null);

But this does not allow me to zoom in the canvas. Plus it is really very slow when panning the image.

Should I choose this rather than using the WebView way? If yes, is there maybe some way to make it more efficient? Or is there some better way to implement what I'm trying to achieve?

Pinki Pinki · Accepted Answer · 2012-04-24T06:22:20

use

webview.loadUrl("file:///android_asset/myimage.png");
    WebSettings websettings;
    websettings = webview.getSettings();
    websettings.setBuiltInZoomControls(true);

that lines in constructor of CustomWebView

Drawing canvas into Android WebView and zooming

1 Answers