Question

我正在尝试在HTML5画布上创建虚拟触控操纵杆。我找到了几个解决方案，其中一个真正有效，但是我修改起来太复杂了，所以我自己做了很多工作，但是它有一些问题。它一次不支持两个操纵杆，而且速度非常慢:(请告诉我应该去的方式。我的HTML代码看起来像这样：

<!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;
}

我试图尽可能简单地做，因为我需要快速。但是我还没有成功。感谢您的建议

Answer 1

我正在考虑做同样的事情，但网上没有太多。我在“For Dummies”一书中找到了这个例子...... Virtual Joystick for Your HTML5

Answer 2

我知道我的答复太迟了6年，但是您在游戏的渲染循环中遇到“性能”问题的原因是因为您将操纵杆的运动与{{1} }事件被触发。这比画布的刷新速度慢。

相反，您应该执行以下操作：

在鼠标按下时检测并设置
In your refresh loop，是否根据鼠标是否移动逻辑来鼠标按下
在鼠标悬停时检测并取消设置

HTML5 Canvas触摸操纵杆性能问题

2 个答案: