使触摸屏立即响应HTML查看器,并停止Android在触摸屏上振动



>摘要:我想在安卓应用程序中触摸我的网络视图时停止嗡嗡声。我希望在第一次触摸 Web 视图时没有延迟,并使触摸尽可能响应。

编辑:我已经设法摆脱了嗡嗡声。它被称为触觉反馈。您可以通过将以下代码行放在我的onCreate函数的末尾来删除它:webview.setHapticFeedbackEnabled(false);.

编辑2:我现在发现第一次触摸有300毫秒的延迟,以检查缩放和其他东西。这可以通过将以下内容放在html文件的<head>部分中来关闭:<meta name="viewport" content="width=device-width, user-scalable=no" />

所以这个问题得到了回答,除非有人知道任何其他提示。

我有一个非常基本的安卓应用程序。您可以在Android Studio中使用"空活动"仅使用java创建它。然后更新生成的代码,如下所示。

注意:它基本上是一个Web视图,其中index.html文件包含在文件夹assets/www中。

蓝色斑点将响应您的触摸。当您按下它们时,它们会根据您触摸的每个圆圈的哪一侧而着色为青蓝色。(一个是左/右按钮,一个是向上/向下按钮。

问题1:第一次触摸屏幕时和松开所有手指后再次触摸时,会发出烦人的嗡嗡声。如何仅在此应用程序中删除Android代码中的此内容?

问题2:我也想让触摸尽可能灵敏。我还能做什么吗?我第一次触摸蓝色按钮时,似乎有延迟。当我在蓝色按钮上左右移动手指时,响应似乎还可以。

重要的 html:

<!DOCTYPE html>
<html>
<head>
<title>Test Touch Screen</title>
</head>
<body onload="MyOnLoad();" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden;">
<div id="divMain" style="display: none;">
<br /><br /><br />
<button onclick="MyButton();" style="font-size:xx-large">Click</button>
</div>
<div id="divCanvas" style="display: block; width: 100%; height: 100%; min-height: 100vh; overflow-x: hidden; overflow-y: hidden;
margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">
<canvas id="mycanvas" oncontextmenu="return false;"></canvas>
</div>
<!-- JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
var g_StopTouchAndMouseFiringTwice = true;
var g_PosUpDownX = 0;
var g_PosUpDownY = 0;
var g_PosLeftRightX = 0;
var g_PosLeftRightY = 0;
var g_PosReturnX = 0;
var g_PosReturnY = 0;
var g_Radius = 0;
var g_UpDown = 0; // -1, 0, 1
var g_LeftRight = 0; // -1, 0, 1
var g_TouchPoints = [];
function MyOnLoad() {
// The Resize code - need to add early due to maximize
addEventListener("resize", MyWindowResize, false);
if ((canv = document.getElementById("mycanvas")) !== null && typeof (canv) !== "undefined") {
canv.addEventListener("mousemove", mycanvasOnMouseMove, false);
canv.addEventListener("mousedown", mycanvasOnMouseDown, false);
canv.addEventListener("mouseup", mycanvasOnMouseUp, false);
canv.addEventListener("touchstart", mycanvasOnTouchStart, false);
canv.addEventListener("touchmove", mycanvasOnTouchMove, false);
canv.addEventListener("touchend", mycanvasOnTouchEnd, false);
canv.addEventListener("touchcancel", mycanvasOnTouchCancel, false);
}
// Prevent scrolling when touching the canvas
// Stops all mouse events as well
document.body.addEventListener("touchstart", function (e) {
if (g_StopTouchAndMouseFiringTwice && e.target.id === "mycanvas")    {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function (e) {
if (g_StopTouchAndMouseFiringTwice && e.target.id === "mycanvas")     {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function (e) {
if (g_StopTouchAndMouseFiringTwice && e.target.id == "mycanvas")    {
e.preventDefault();
}
}, false);
Layout();
setTimeout("Animate();", 50);
}
function Layout() {
var width, height;
width = $(window).width();
height = $(window).height();
var widthDoc = $(document).width(), heightDoc = $(document).height();
$("#divCanvas").css("overflow-x", "hidden");
$("#divCanvas").css("overflow-y", "hidden");
$("#divCanvas").width(width);
$("#divCanvas").height(height);
$("#mycanvas").css("overflow-x", "hidden");
$("#mycanvas").css("overflow-y", "hidden");
$("#mycanvas").width(width);
$("#mycanvas").height(height);
mycanvas.width = width;
mycanvas.height = height;
var buffer;
g_Radius = Math.floor(0.2 * Math.min(width, height));
buffer = Math.floor(1.1 * g_Radius);
g_PosUpDownX = width - buffer;
g_PosUpDownY = height - buffer;
g_PosLeftRightX = buffer;
g_PosLeftRightY = height - buffer;
g_PosReturnX = buffer;
g_PosReturnY = buffer;
}
function Animate() {
var border = 20, borderX2 = 2 * border, piX2 = 2 * Math.PI;
var i, start;
var width, height;
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
width = c.width;
height = c.height;
SetUpDownLeftRight();
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#00FF00";
ctx.fillRect(border, border, width - borderX2, height - borderX2);
for (i = 0; i < 2; i++) {
start = i === 0 ? 0 : Math.PI;
ctx.fillStyle = ((i === 0 && g_UpDown < 0) || (i === 1 && g_UpDown > 0)) ? (Math.abs(g_UpDown) > 1 ? "#FFFFFF" : "#00FFFF") : "#0000FF";
ctx.beginPath();
ctx.arc(g_PosUpDownX, g_PosUpDownY, g_Radius, start, start + Math.PI);
ctx.closePath();
ctx.fill();
//ctx.closePath();
}
for (i = 0; i < 2; i++) {
start = i === 0 ? (0.5 * Math.PI) : (1.5 * Math.PI);
ctx.fillStyle = ((i === 0 && g_LeftRight < 0) || (i === 1 && g_LeftRight > 0)) ? (Math.abs(g_LeftRight) > 1 ? "#FFFFFF" : "#00FFFF") : "#0000FF";
ctx.beginPath();
ctx.arc(g_PosLeftRightX, g_PosLeftRightY, g_Radius, start, start + Math.PI);
ctx.closePath();
ctx.fill();
//ctx.closePath();
}
//ctx.fillStyle = "#0000FF";
//ctx.beginPath();
//ctx.arc(g_PosReturnX, g_PosReturnY, g_Radius, 0, 2 * Math.PI);
//ctx.closePath();
//ctx.fill();
////ctx.closePath();
setTimeout("Animate();", 50);
};
function SetUpDownLeftRight() {
var i, len, xDist, yDist, rXr;
g_LeftRight = 0
g_UpDown = 0;
rXr = g_Radius * g_Radius;
for (i = 0, len = g_TouchPoints.length; i < len; i++) {
xDist = g_TouchPoints[i].clientX - g_PosUpDownX;
yDist = g_TouchPoints[i].clientY - g_PosUpDownY;
if ((xDist * xDist + yDist * yDist) < rXr) {
// Do the + so see if multiple ones
g_UpDown += yDist < 0 ? 1 : -1; // Up is in the negative y  direction
}
xDist = g_TouchPoints[i].clientX - g_PosLeftRightX;
yDist = g_TouchPoints[i].clientY - g_PosLeftRightY;
if ((xDist * xDist + yDist * yDist) < rXr) {
// Do the + so see if multiple ones
g_LeftRight += xDist > 0 ? 1 : -1;
}
}
}
function MyWindowResize(e) {
Layout();
};
function MyButton() {
var el;
if ((el = document.getElementById("divMain")) !== null && typeof (el) !== "undefined") {
el.style.display = "none";
}
if ((el = document.getElementById("divCanvas")) !== null && typeof (el) !== "undefined") {
el.style.display = "block";
Layout();
}
}
function mycanvasOnMouseMove(e) {
var found;
var i, len = g_TouchPoints.length;
//// Only add it if it is already there
//for (i = len - 1, found = false; i >= 0; i--) {
//    if (g_TouchPoints[i].identifier === -1) {
//        if (!found) {
//            found = true;
//            g_TouchPoints[i].clientX = e.clientX;
//            g_TouchPoints[i].clientY = e.clientY;
//        } else {
//            g_TouchPoints.splice(i, 1);
//        }
//    }
//}
//if (!found) g_TouchPoints.push({ identifier: -1, clientX: 0,  clientY: 0 });
// Only update it if it is already there
for (i = len - 1, found = false; i >= 0; i--) {
if (g_TouchPoints[i].identifier === -1) {
if (!found) {
found = true;
g_TouchPoints[i].clientX = e.clientX;
g_TouchPoints[i].clientY = e.clientY;
} else {
g_TouchPoints.splice(i, 1);
}
}
}
};
function mycanvasOnMouseDown(e) {
var i, len = g_TouchPoints.length;
// Remove any previous
for (i = len - 1; i >= 0; i--) {
if (g_TouchPoints[i].id === -1) {
g_TouchPoints.splice(i, 1);
}
}
g_TouchPoints.push({ identifier: -1, clientX: e.clientX, clientY:  e.clientY });
};
function mycanvasOnMouseUp(e) {
var i, len = g_TouchPoints.length;
for (i = len - 1; i >= 0; i--) {
if (g_TouchPoints[i].identifier === -1) {
g_TouchPoints.splice(i, 1);
}
}
};
function touchesRedo(e) {
var i, len;
g_TouchPoints.length = 0; // Also gets rid of mouse ones
for (i = 0, len = e.touches.length; i < len; i++) {
g_TouchPoints.push({ identifier: e.touches[i].identifier, clientX: e.touches[i].clientX, clientY: e.touches[i].clientY });
}
}
function mycanvasOnTouchStart(e) {
touchesRedo(e);
};
function mycanvasOnTouchMove(e) {
touchesRedo(e);
};
function mycanvasOnTouchEnd(e) {
touchesRedo(e);
};
function mycanvasOnTouchCancel(e) {
touchesRedo(e);
};
</script>
</body>
</html>

主要活动.java

package touchscreen.com.touchscreentest;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,    WindowManager.LayoutParams.FLAG_FULLSCREEN);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webview = (WebView) findViewById(R.id.webView);
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
webview.setWebChromeClient(new WebChromeClient());
webview.loadUrl("file:///android_asset/www/index.html?IsAndroidWebview=true"); // This is a cheat to tell the html we are calling in AndroidApp
// These things allegedly make it faster
settings.setLoadWithOverviewMode(true);
settings.setUseWideViewPort(true);
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(false);
//settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
settings.setDomStorageEnabled(true);
webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webview.setScrollbarFadingEnabled(true);
// NEW FOR Sound
settings.setAllowFileAccess(true);
if (Build.VERSION.SDK_INT > 17) {
settings.setMediaPlaybackRequiresUserGesture(false);
}
// NEW FOR Sound
settings.setAllowContentAccess(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
}
}

安卓清单.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="touchscreen.com.touchscreentest">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
/* The android:configChanges="orientation|screenSize"
is needed to stop the program from reloading on an orientation     change */
<activity android:name=".MainActivity"   android:configChanges="orientation|screenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER"     />
</intent-filter>
</activity>
</application>
</manifest>

正如问题中提到的,我设法回答了它。

我已经设法摆脱了嗡嗡声。它被称为触觉反馈。您可以通过将以下代码行放在我的onCreate函数的末尾来删除它:webview.setHapticFeedbackEnabled(false);.

我现在发现第一次触摸有 300 毫秒的延迟来检查缩放和其他东西。这可以通过将以下内容放在 html 文件的部分来关闭:<meta name="viewport" content="width=device-width, user-scalable=no" />.

最新更新