Android示例-JavaScript与UI控件交互（二）

本例将实现通过WebView控件的addJavascriptInterface()方法调用JavaScript脚本并使用SurfaceView实现在UI界面中进行画图。源码如下：

1.MainActivity.java

package com.lonly.example.javascriptdemo2;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MySurfaceView mySurfaceView = new MySurfaceView(this);
        setContentView(mySurfaceView);
    }
}

2.MySurfaceView.java

public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback{
    private SurfaceHolder surfaceHolder;
    private Context context;
    private Canvas canvas;

    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            surfaceHolder.unlockCanvasAndPost(canvas);
        }
    };

    public MySurfaceView(Context context) {
        super(context);
        this.context = context;
        surfaceHolder = getHolder();
        surfaceHolder.addCallback(this);
    }
    /**
     * 映射对象
     * 里面的方法必须使用@JavascriptInterface注解
     */
    public class MyObject{
        @JavascriptInterface
        public void drawCircle(int x, int y, int r){
            MySurfaceView.this.drawCircle(x,y,r);
        }
        @JavascriptInterface
        public void drawLine(int x1, int y1, int x2, int y2){
            MySurfaceView.this.drawLine(x1,y1,x2,y2);
        }
        @JavascriptInterface
        public void post(){
            handler.sendEmptyMessage(0);
        }
    }
    @Override
    public void surfaceCreated(SurfaceHolder surfaceHolder) {
        canvas = surfaceHolder.lockCanvas();

        WebView mWebView = new WebView(context);
        WebSettings mWebSetting = mWebView.getSettings();
        mWebSetting.setJavaScriptEnabled(true);
        //第一个参数：要映射的对象  第二哥参数：映射对象的名字
        mWebView.addJavascriptInterface(new MyObject(),"Pencil");

        try {
            InputStream is = getResources().openRawResource(R.raw.deaw);
            byte[] buffer = new byte[1024];

            int count = is.read(buffer);
            String drawJavaScript = new String(buffer, 0, count, "utf-8");
            mWebView.loadDataWithBaseURL(null,drawJavaScript, "text/html", "utf-8", null);
            is.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @Override
    public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2) {

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder surfaceHolder) {

    }

    public void drawCircle(int x, int y, int r){
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(3);
        paint.setColor(Color.BLUE);
        canvas.drawCircle(x,y,r,paint);
    }
    public void drawLine(int x1, int y1, int x2, int y2){
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        paint.setColor(Color.YELLOW);
        canvas.drawLine(x1,y1,x2,y2,paint);
    }
}

3.draw.js

<script language="javascript">
    var i;
    for(i=0; i < 12; i++){
        window.Pencil.drawCircle(50 + i * 20, 100, 20);
    }
    window.Pencil.drawLine(20, 100, 400, 100);
    for(i=0; i < 12; i++){
            window.Pencil.drawCircle(200, 150 +20 * i, 20);
    }
    window.Pencil.drawLine(200, 130, 200, 450);
    window.Pencil.post();
</script>

运行结果：