android中的html5 canvas

有没有什么特别的方式让Android的浏览器响应点击/按下事件？我的代码在流行的浏览器中工作正常，但是当我使用我的Android平板电脑或Android手机时，节点在拖动/按下时不会移动。android中的html5 canvas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title></title> 
</head> 
<style type="text/css"> 
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 
#blurb_canvas { 
    position: absolute; 
    top: 0px; 
    left: 150px; 
} 
#blurb_data_holder { 
    height: 100%; 
    width: 150px; 
    top: 0px; 
    left: 0px; 
    overflow-y: auto; 
} 
input.blurb_btn { 
    background-color: #eaeaea; 
    font-weight: bold; 
    border: solid 1px #c5c5c5; 
    cursor: pointer; 
    width: 9em; 
    height: 2em; 
    padding: 5px; 
} 
</style> 
<body onLoad="init();"> 

    <table id="blurb_data_holder"> 
     <tr> 
      <td align="center" valign="top"> 
      <input type="submit" title="" value="Data 1" id="data_1" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br /> 
      <input type="submit" title="" value="Data 2" id="data_2" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br /> 
      <input type="submit" title="" value="Data 3" id="data_3" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br /> 
      <input type="submit" title="" value="Data 4" id="data_4" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br /> 
      <input type="submit" title="" value="Data 5" id="data_5" class="blurb_btn" onClick="createBlurbNode(this.id);"/> <br /> 
      </td> 
     </tr> 
    </table> 




    <canvas id="blurb_canvas">If you are able to see this message, your browser does not support HTML5's canvas feature.</canvas> 


<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    var canvasLay; 
    var canvasContext; 
    var blurbNodes; 
    var x = 50; 
    var y = 50; 
    var movingObj = false; 
    var movinganotherObj = false; 
    var blurbSentences; 

    function init(){ 
     canvasLay = document.getElementById('blurb_canvas'); 
     canvasContext = canvasLay.getContext('2d'); 
     canvasLay.width = window.innerWidth-150; 
     canvasLay.height = window.innerHeight; 

     blurbNodes = []; 
     blurbNodes.push(new BlurbNode(300,75,60,1,1,'stuff here a')); 
     blurbNodes.push(new BlurbNode(600,300,60,1,1,'stuff here b')); 
     setInterval(drawScreen,25); 
     canvasLay.addEventListener("mousedown", beginMovingObj, false); 
     canvasLay.addEventListener("mousemove", moveObj, false); 
     canvasLay.addEventListener("mouseup", stopMovingObj, false); 
    } 

    function createBlurbNode(text){ 
     blurbNodes.push(new BlurbNode(100,100,60,1,1,text)); 
    } 

    function BlurbNode(positionx, positiony, radius, dx, dy, label){ 
     this.canvas = canvasLay; 
     this.context = canvasContext; 
     this.positionx = positionx; 
     this.positiony = positiony; 
     this.radius = radius; 
     this.dx = dx; 
     this.dy = dy; 
     this.label = label; 
     this.moving = false; 
     this.hasChild = false; 
     this.hasParent = false; 
    } 

    BlurbNode.prototype.Create = function(){ 
     this.context.fillStyle = '#ff0000'; 
     this.context.beginPath(); 
     this.context.arc(this.positionx, this.positiony, this.radius, 0, Math.PI*2, true); 
     this.context.closePath(); 
     this.context.fill(); 
     this.context.fillStyle = '#000000'; 
     this.context.fillText(this.label,this.positionx-20,this.positiony); 
    }; 

    function drawLineConnection(parentCenterx, parentCentery, childCenterx, childCentery){ 
     canvasContext.beginPath(); 
     canvasContext.fillStyle = '#000000'; 
     canvasContext.moveTo(parentCenterx, parentCentery); 
     canvasContext.lineTo(childCenterx, childCentery); 
     canvasContext.stroke(); 
    } 

    function drawScreen(){ 
     canvasLay.width = window.innerWidth-150; 
     canvasLay.height = window.innerHeight; 
     canvasContext.clearRect(0,0,screen.width,screen.height); 

     for(i = 0; i<blurbNodes.length; i++){ 

      if(movingObj){ 
       if(!movinganotherObj && (x > blurbNodes[i].positionx-50 && x < blurbNodes[i].positionx+50) && (y > blurbNodes[i].positiony && y < blurbNodes[i].positiony+50)){ 
        blurbNodes[i].moving = true; 
        movinganotherObj = true; 
       } 

       if(blurbNodes[i].moving && x < (canvasLay.width-60) && y < (canvasLay.height-60) && x > (60) && y > (60)){ 
        blurbNodes[i].positionx = x; 
        blurbNodes[i].positiony = y; 
       } 
      }else{ 
       blurbNodes[i].moving = false; 
      } 

      if(!blurbNodes[i].hasChild && !blurbNodes[i].hasParent && !blurbNodes[i].moving && blurbNodes[i].positiony < canvasLay.height-60){ 
       blurbNodes[i].positiony = blurbNodes[i].positiony + blurbNodes[i].dy; 
      } 
      blurbNodes[i].Create(); 


      for(j = 0; j<blurbNodes.length; j++){ 
       if(blurbNodes[i] != blurbNodes[j] && 
         Math.abs(blurbNodes[i].positionx - blurbNodes[j].positionx) < 150 && 
         Math.abs(blurbNodes[i].positiony - blurbNodes[j].positiony) < 150){ 
        drawLineConnection(blurbNodes[i].positionx, blurbNodes[i].positiony, blurbNodes[j].positionx, blurbNodes[j].positiony); 
        blurbNodes[i].hasChild = true; 
        blurbNodes[j].hasParent = true; 
       } 
      } 
     } 
    } 


    function beginMovingObj(e) { 
     movingObj = true; 
    } 
    function stopMovingObj(e) { 
     movingObj = false; 
     movinganotherObj = false; 
    } 
    function moveObj(e) { 
     if(movingObj){ 
      x = e.pageX-150; 
      y = e.pageY; 
     } 
    } 
</script> 

</body> 
</html>

来源

2012-06-15 Donnie

我建议使用jsfiddle，这样我们都可以看到你的代码是关于什么以及它是如何工作的。它总是帮助我，当我知道什么即时尝试修复。 http://www.jsfiddle.net – Xitcod13

这里是jsfiddle链接：http://jsfiddle.net/qWgNj/ – Donnie

这里，这个工程：

http://jsfiddle.net/simonsarris/W45jt/

你错过了什么真正是 'touchstart'， 'touchmove' 和 'touchend' 事件恭维你的鼠标事件。

你应该比我更好地组织它，那只是最快的代码来开始工作。

来源

2012-06-16 03:39:39

谢谢。这实际上起作用。现在唯一的问题是响应真的很慢。有任何想法，为什么这可能是？你有没有在Android平板电脑或Android手机上试用过它？ – Donnie

一般来说，我猜html5在Android设备上很慢？也许帧率？ – Donnie

我最近修改了一些代码以用于绘图，并且需要为正确的事件属性查找几个位置。以下代码适用于我。希望它会帮助你。

drawStart = function(ev) { 
     if(ev.originalEvent.touches && ev.originalEvent.touches.length) { 
      ev = ev.originalEvent.touches[0]; 
     } else if(ev.originalEvent.changedTouches && ev.originalEvent.changedTouches.length) { 
      ev = ev.originalEvent.changedTouches[0]; 
     } 

     // Calculate the current mouse X, Y coordinates with canvas offset 
     var x, y; 
     x = ev.pageX - $(doodle.canvas).offset().left; 
     y = ev.pageY - $(doodle.canvas).offset().top; 
...

来源

2012-06-15 22:47:17

你可以在代码中提供更多关于如何将其连接到画布的细节？这是一个监听器功能吗？ – Donnie

我猜你的问题是你的moveObj方法没有得到好的x和y。添加我的代码的第一部分，以确保你有一个很好的事件来获取它们。（我的ev ==你的e）。除了鼠标事件外，您还可能需要听touchstart，touchmove，touchend。 –

我不认为问题是得到错误的x，y坐标。当我点击Android设备上的画布时，整个画布突出显示，就好像它嵌入在屏幕中，就像图像或按钮一样。但我会听取您的建议并稍后检查。 – Donnie

android中的html5 canvas

回答

相关问题