1
我試圖在HTML5畫布上創建虛擬觸摸操縱桿。我發現了幾個解決方案，其中一個確實有效，但對於我來說修改起來太複雜了，所以我自己做了很多工作，但它有一些問題。它不同時支持兩個操縱桿，也很可怕的慢:(請告訴我該走的路我的HTML代碼如下所示：HTML5畫布觸摸操縱桿性能問題
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;">
<title>Touch controller</title>
<link rel="stylesheet" href="css/virtualjoystick.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/touch.js"></script>
</head>
<body>
<div class="container" id="video">
<canvas height="977" width="1920" id="canvas"></canvas>
</div>
</body>
</html>
而且touch.js是這樣的：
//touch control JavaScript
$(document).ready(function(){
//setup
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
resetCanvas(c);
//handlers
$("#canvas").mousedown(function(e){
if(side(e.clientX) == "left"){
if(!left.isset){
//alert("left");
left.isset = true;
left.startX = e.clientX;
left.startY = e.clientY;
left.curX = e.clientX;
left.curY = e.clientY;
refreshCanvas(ctx);
}
}
else if(side(e.clientX) == "right"){
if(!right.isset){
//alert("left");
right.isset = true;
right.startX = e.clientX;
right.startY = e.clientY;
right.curX = e.clientX;
right.curY = e.clientY;
refreshCanvas(ctx);
}
}
});
$("#canvas").mousemove(function(e){
if(side(e.clientX) == "left"){
if(left.isset){
left.curX = e.clientX;
left.curY = e.clientY;
refreshCanvas(ctx);
}
}
else if(side(e.clientX) == "right"){
if(right.isset){
right.curX = e.clientX;
right.curY = e.clientY;
refreshCanvas(ctx);
}
}
});
$("#canvas").mouseup(function(e){
if(side(e.clientX) == "left"){
if(left.isset){
//alert("left");
left.isset = false;
left.startX = false;
left.startY = false;
left.curX = false;
left.curY = false;
refreshCanvas(ctx);
}
}
else if(side(e.clientX) == "right"){
if(right.isset){
//alert("left");
right.isset = false;
right.startX = false;
right.startY = false;
right.curX = false;
right.curY = false;
refreshCanvas(ctx);
}
}
});
});
var left = {isset:false};
var right = {isset:false};
function resetCanvas(c){
c.width = $(window).innerWidth();
c.height = $(window).innerHeight();
//c.scrollTo(0,0);
}
function refreshCanvas(ctx){
ctx.clearRect(0,0,1920,1080);
if(left.isset){
drawBase(ctx, left.startX, left.startY);
drawHandle(ctx, left.startX, left.startY, left.curX, left.curY);
}
if(right.isset){
drawBase(ctx, right.startX, right.startY);
drawHandle(ctx, right.startX, right.startY, right.curX, right.curY);
}
}
function drawBase(ctx, x, y){
ctx.beginPath();
ctx.lineWidth = 2;
ctx.arc(x,y,40,0,2*Math.PI);
ctx.stroke();
}
function drawHandle(ctx, startX, startY, curX, curY){
//stop handle when leaving joystick
var x = curX - startX;
var y = curY - startY;
if(((x*x) + (y*y)) >= (1600)){
var f = y/x;
if(x < 0) var invert = true;
x = 0;
y = 0;
while(((x*x) + (y*y)) <= (1600)){
y = x*f;
if(invert) x--;
else x++;
}
x += startX;
y += startY;
}
else {
x = curX;
y = curY;
}
ctx.beginPath();
ctx.lineWidth = 4;
ctx.arc(x,y,20,0,2*Math.PI);
ctx.stroke();
}
function side(x){
var c = document.getElementById("canvas");
var dead = c.width/20;
var left = (c.width - dead)/2;
var right = left + dead;
if(x < left) return "left";
else if(x > right) return "right";
else return false;
}
我試圖做到這一點儘可能簡單，因爲我需要它要快，但我沒有成功呢。謝謝你建議
我在找類似的東西，發現[Joydiv]（https://github.com/qbolec/Joydiv） –