jeudi 13 août 2015

How to draw Canvas in WebView?

I'm making an app where people will be able to place circles in WebView. So, my algorithm is:

  1. Detect long click
  2. Get finger coordinates on WebView
  3. Draw circle in Canvas

I tried different methods, used different approaches - making personal DrawWebView class, detecting long press in MainActivity and then drawing circle in DrawView and list goes on, yet nothing works.

For starters I decided to set up custom WebView and draw circle in fixed position(330, 618). I manage to draw it, but when I start to zoom in, circle moves.

public class DrawWebView extends WebView{

    PointF zoomPos;
    static DrawWebView wv1;
    public DrawWebView (Context context, AttributeSet attrs)
    {
        super (context, attrs);
        wv1 = (DrawWebView) findViewById(R.id.webView1);
        wv1.loadUrl("file://" + Environment.getExternalStorageDirectory() + "/Pictures/boxes.jpg");
        wv1.getSettings().setBuiltInZoomControls(true);
        wv1.getSettings().setDisplayZoomControls(false);
        wv1.getSettings().setSupportZoom(true);
        wv1.getSettings().setUseWideViewPort(true);
        wv1.getSettings().setLoadWithOverviewMode(true); 
        wv1.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
    }

    public boolean onTouch(View v, MotionEvent event) {

        int action = event.getAction(); 


        switch (action) { 
        case MotionEvent.ACTION_DOWN:
            break;
        case MotionEvent.ACTION_MOVE:
            this.invalidate();
            break;

        case MotionEvent.ACTION_UP: 
            this.invalidate();
            break;
        case MotionEvent.ACTION_CANCEL:

            break; 

        default: 
            break; 
        }
        return true;
    }


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

        zoomPos = MainActivity.zoomPos;
        Paint p = new Paint();
        p.setColor (Color.RED);
        canvas.drawCircle(330, 618, 10, p);
        //canvas.drawCircle(100, 100, 100, p);


    }
}

If you know how to do this or know a good tutorial - it would be much appreciated.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire