【发布时间】：2015-09-19 04:43:46
【问题描述】：
您好，我正在尝试制作一个可以在画布上绘制的 android 应用程序，我发现 html 是最容易做到这一点的。我抓住了几个代码示例并创建了一个项目，我只完成了 1/2 的方式，我被困在这个令人沮丧的小部分上。当我单击菜单中的按钮清除画布时，javascript 不会通过并清除 html 页面上的画布。这是我的代码... MainActivity.java
package tk.leoforney.ftcscorer;
import android.content.res.AssetManager;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.Reader;
import java.io.StringWriter;
import java.io.Writer;
public class MainActivity extends AppCompatActivity {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final WebView htmlWebView = (WebView)findViewById(R.id.fieldPad);
WebSettings webSetting = htmlWebView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setDisplayZoomControls(true);
htmlWebView.setWebChromeClient(new WebChromeClient(){
public void onPageFinished(WebView view, String url) {
final Button button = (Button) findViewById(R.id.clearCanvas);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
htmlWebView.evaluateJavascript("newCanvas()", null);
} else {
htmlWebView.loadUrl("javascript:newCanvas()");
}
}
});
}
});
htmlWebView.getSettings().setAllowFileAccess(true);
String htmlFilename = "index.html";
AssetManager mgr = getBaseContext().getAssets();
try {
InputStream in = mgr.open(htmlFilename, AssetManager.ACCESS_BUFFER);
String htmlContentInStringFormat = StreamToString(in);
in.close();
htmlWebView.loadDataWithBaseURL(null, htmlContentInStringFormat, "text/html", "utf-8", null);
} catch (IOException e) {
e.printStackTrace();
}
}
public static String StreamToString(InputStream in) throws IOException {
if(in == null) {
return "";
}
Writer writer = new StringWriter();
char[] buffer = new char[1024];
try {
Reader reader = new BufferedReader(new InputStreamReader(in, "UTF-8"));
int n;
while ((n = reader.read(buffer)) != -1) {
writer.write(buffer, 0, n);
}
} finally {
}
return writer.toString();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
return super.onOptionsItemSelected(item);
}
}
index.html
<!doctype html>
<html>
<head>
<title>Coaches playbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
var ctx, color = "#000";
$(document).ready(function () {
// setup a new canvas for drawing wait for device init
setTimeout(function(){
newCanvas();
}, 1000);
// reset palette selection (css) and select the clicked color for canvas strokeStyle
$(".palette").click(function(){
$(".palette").css("border-color", "#777");
$(".palette").css("border-style", "solid");
$(this).css("border-color", "#fff");
$(this).css("border-style", "dashed");
color = $(this).css("background-color");
ctx.beginPath();
ctx.strokeStyle = color;
});
// link the new button with newCanvas() function
$("#new").click(function() {
newCanvas();
});
});
// function to setup a new canvas for drawing
function newCanvas(){
//define and resize canvas
$("#content").height($(window).height());
var canvas = '<canvas id="canvas" width="'+$(window).width()+'" height="'+$(window).height()+'"></canvas>';
$("#content").html(canvas);
// setup canvas
ctx=document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = color;
ctx.lineWidth = 3;
// setup to trigger drawing on mouse or touch
$("#canvas").drawTouch();
$("#canvas").drawPointer();
$("#canvas").drawMouse();
var canvasHeight
}
// prototype to start drawing on touch using canvas moveTo and lineTo
$.fn.drawTouch = function() {
var start = function(e) {
e = e.originalEvent;
ctx.beginPath();
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
ctx.moveTo(x,y);
};
var move = function(e) {
e.preventDefault();
e = e.originalEvent;
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
ctx.lineTo(x,y);
ctx.stroke();
};
$(this).on("touchstart", start);
$(this).on("touchmove", move);
};
// prototype to start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
$.fn.drawPointer = function() {
var start = function(e) {
e = e.originalEvent;
ctx.beginPath();
x = e.pageX;
y = e.pageY;
ctx.moveTo(x,y);
};
var move = function(e) {
e.preventDefault();
e = e.originalEvent;
x = e.pageX;
y = e.pageY;
ctx.lineTo(x,y);
ctx.stroke();
};
$(this).on("MSPointerDown", start);
$(this).on("MSPointerMove", move);
};
// prototype to start drawing on mouse using canvas moveTo and lineTo
$.fn.drawMouse = function() {
var clicked = 0;
var start = function(e) {
clicked = 1;
ctx.beginPath();
x = e.pageX;
y = e.pageY;
ctx.moveTo(x,y);
};
var move = function(e) {
if(clicked){
x = e.pageX;
y = e.pageY;
ctx.lineTo(x,y);
ctx.stroke();
}
};
var stop = function(e) {
clicked = 0;
};
$(this).on("mousedown", start);
$(this).on("mousemove", move);
$(window).on("mouseup", stop);
$(document).ready(function () {
if(window.location.indexOf("newCanvas") >= 0)
{
newCanvas();
}
});
};
</script>
<style>
body {
margin:0px;
width:100%;
height:100%;
overflow:hidden;
font-family:Arial;
/* prevent text selection on ui */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* prevent scrolling in windows phone */
-ms-touch-action: none;
/* prevent selection highlight */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#content{
position: absolute;
top:0px;
bottom: 100%;
height: 100%;
width: 100%;
overflow:hidden;
background-color:#fff;
}
#canvas {
cursor: crosshair;
background: url('field.png') no-repeat center center fixed;
background-size: 100% 100%;
background-position: center top;
top:0px;
bottom: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="content"><p style="text-align:center">Loading Canvas...</p></div>
<!-- <div class="footer">
<div class="palette-case">
<div id="new" class="action-button">Clear</div>
<div class="palette-box">
<div class="palette red"></div>
</div>
<div class="palette-box">
<div class="palette blue"></div>
</div>
<div style="clear:both"></div>
</div></div> -->
</div>
</body>
</html>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="tk.leoforney.ftcscorer"
android:orientation="vertical">
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fieldPad"
android:layout_width="match_parent"
android:layout_height="365dp"
/>
</LinearLayout>
menu_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
<!--
<item android:id="@+id/action_settings" android:title="@string/action_settings"
android:orderInCategory="100" app:showAsAction="never" />
-->
<item android:id="@+id/clearCanvas" android:title="@string/action_clear" android:orderInCategory="100" app:showAsAction="never" />
</menu>
如果有人能解决这个问题，那就太棒了！谢谢...
【问题讨论】：
标签： javascript java android canvas webview