使用触控设备的 HTML5 中的 touchmove 在画布内拖动或移动图像答案

【问题标题】：drag or move image inside a canvas using touchmove in HTML5 for touch devices使用触控设备的 HTML5 中的 touchmove 在画布内拖动或移动图像
【发布时间】：2014-03-31 01:59:29
【问题描述】：

我正在创建一个 HTML5 游戏，它也可以在 Android 上运行。我浏览了几篇文章，但还没有得到解决方案。我有一个通过 javascript 生成的图像，我想使用 touchmove 移动这个图像，以便我可以在我的 Android 设备中运行它。这是代码：

    gameCanvas.addEventListener("touchmove", touchXY, true);
function touchXY(e) {
        if (!e)
            var e = event;
        e.preventDefault();
        avatarX = e.targetTouches[0].pageX - gameCanvas.offsetLeft;
        avatarY = e.targetTouches[0].pageY - gameCanvas.offsetTop;

    }

这不起作用。我从https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingMouseandTouchControlstoCanvas/AddingMouseandTouchControlstoCanvas.html得到这个代码

这是我的画布：

<canvas id="gameCanvas" onclick="setUpGame();" width="400" height="300"></canvas>

这是我的图片：

avatarImage.src = "img/avatar.png";

gameCanvas.getContext("2d").drawImage(avatarImage, Math.random() * 100, Math.random() * 100);

我只想在画布内移动图像。

【问题讨论】：

标签： javascript android jquery html cross-platform

【解决方案1】：

我写了一个完整的例子，希望它不会太冗长。

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
  </head>
  <body>
    <canvas id='canvas' width='512' height='512'></canvas>
    <script>
      var c=document.getElementById('canvas'),
          ctx=c.getContext('2d'),
          activeBox='none',
          //populate the map with objects
          box=[
            {
              x:256,
              y:128,
              width:32,
              height:64
            },
            {
              x:128,
              y:64,
              width:64,
              height:64
            },
            {
              x:32,
              y:32,
              width:32,
              height:32
            },
          ];

      function draw(){
        //clear the screen, draw population
        ctx.clearRect(0,0,c.width,c.height);
        for(var i=0;i<box.length;i++){
          ctx.fillRect(box[i].x,box[i].y,box[i].width,box[i].height);
        }
        //repeat at 60fps if possible, pause if window looses focus
        requestAnimationFrame(draw);
      }

      function startTouch(e){
        //this makes it easier to write control flow later and keeps XY relative to canvas
        var xTouch=e.touches[0].pageX-c.offsetLeft,
            yTouch=e.touches[0].pageY-c.offsetTop;

        //its best to go through this loop in touchstart, because it only happens once per touch
        for(var i=0;i<box.length;i++){
          if(xTouch>box[i].x&&xTouch<box[i].x+box[i].width){
            if(yTouch>box[i].y&&yTouch<box[i].y+box[i].height){
              activeBox=i;
            }
          }
        }
      }

      function moveTouch(e){
        //grab a box by the center
        if(activeBox!='none'){
          box[activeBox].x=e.changedTouches[0].pageX-box[activeBox].width/2;
          box[activeBox].y=e.changedTouches[0].pageY-box[activeBox].height/2;
        }
      }

      function endTouch(){
        //clear active so that dragging empty space wont move the last active box
        activeBox='none';
      }

      canvas.addEventListener('touchstart',startTouch);
      canvas.addEventListener('touchmove',moveTouch);
      canvas.addEventListener('touchend',endTouch);
      window.addEventListener('load',draw);
    </script>
  </body>
</html>

为了简单起见，我使用了 fillRect，但如果你想用 drawImage 替换它，你需要为每个元素创建一个新元素，并向盒子对象数组添加一个源属性。这是一个部分示例。

//you need a new one of these for every image
var img=new Image();
    img.src='http://www.w3schools.com/images/w3logotest2.png';
var box={
      source:img,
      x:Math.floor((Math.random()*256)+1),
      y:Math.floor((Math.random()*256)+1)
    };
//make sure the image doesnt load before the script
window.onload=function(){
  ctx.drawImage(img,box.x,box.y);
}

【讨论】：