Cordova (phonegap):在画布内拖动图像在浏览器中工作良好，但在移动设备中不工作

cordova(phonegap): drag image inside canvas working fine in browser but not in mobile

本文关键字：工作 移动 浏览器 phonegap 图像 拖动 布内 Cordova      更新时间：2023-09-26

我正在制作一个应用程序，我需要图像在画布和当我在画布内移动图像时，它应该返回我的图像位置的坐标。经过长时间的搜索在谷歌我得到了一个必要的代码。但是这在浏览器中工作得很好。当我为移动构建代码时，它不起作用。有人能告诉我，我怎么能使它兼容移动设备。我张贴我的代码下面是在浏览器工作。提前感谢

 <div id="divXY">aaa</div>
 <div>
 <canvas id="canvas" width="400" height="300">
 This text is displayed if your browser does not support HTML5 Canvas.
 </canvas>
 </div>
 <script type="text/javascript">
 var canvas;
 var ctx;
 var x = 75;
 var y = 50;
 var WIDTH = 400;
 var HEIGHT = 300;
 var dragok = false;
function rect(x,y,w,h)
{
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
 function clear() {
 ctx.clearRect(0, 0, WIDTH, HEIGHT);
 }
 function init() {
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d");
  return setInterval(draw, 10);
 }
 function draw() {
 clear();
 ctx.fillStyle = "#FAF7F8";
 rect(0,0,WIDTH,HEIGHT);
 ctx.fillStyle = "#444444";
 rect(x - 15, y - 15, 30, 30);
}
function myMove(e){
 if (dragok){
 x = e.pageX - canvas.offsetLeft;
 y = e.pageY - canvas.offsetTop;
 document.getElementById("divXY").innerHTML = "x: " + x + " y: " + y;  
  }
 }
function myDown(e){ 
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
 e.pageY > y -15 + canvas.offsetTop){
 x = e.pageX - canvas.offsetLeft;
 y = e.pageY - canvas.offsetTop;
 dragok = true;
 canvas.onmousemove = myMove;
 document.getElementById("divXY").innerHTML = "x: " + x + " y: " + y;  
 } 
}
function myUp(){
 dragok = false;
 canvas.onmousemove = null;
}
    init();
   canvas.onmousedown = myDown;
   canvas.onmouseup = myUp;
  </script>
  </body

我终于得到了答案。我张贴我的代码，在浏览器和移动应用程序都工作。你会从google得到(jquery.ui.touch-punch.min.js)。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
 <script src="http://192.168.1.39/dragimage/www/jquery.ui.touch-punch.min.js"></script>
 <script>
 $(function() {

  $('#canvas1').draggable({cursor: 'move', containment: '#canvas', stop: function() {
        var cont = $('#canvas').offset();
        var img = $(this).offset();
        $('#xy').text('x-axis :' + (img.left - cont.left) + ', y-axis :' + (img.top -           cont.top));
     }});
   });

</script>
<style>
#canvas {
border:1px solid red;
}
</style>
</head>
<body>
 <div id="canvas" style="overflow: hidden; height:300px; width:300px;"> 
 <img id='canvas1' src='circle.png' name='image' >
 </div>
<div id='xy'></div>
</body>
</html>
相关文章：