鼠標點擊不是在我的柱形圖工作在HTML5

大家好，我再次在我的圖表建設有問題，在HTML 5這一時間所做的一切以及除了一個部分或模塊。我嘗試了一些代碼，我通過互聯網獲得了點擊時畫布中矩形的一些警告。當我評論模塊它工作正常，但不是鼠標點擊。誰能幫我嗎。提前致謝。這是我的小提琴和代碼[小提琴]：http://jsfiddle.net/s8kZs/鼠標點擊不是在我的柱形圖工作在HTML5

<!doctype html> 
    <html> 
     <head> 
      <script type="text/javascript"> 
      window.onload=function() { 
       var canvas=document.getElementById('mycanvas'); 
       var ctx=canvas.getContext('2d'); 
       var graphInfo=[{data:[120,130,140,160,180,100],color:'purple',label:["a","b","c","d","e","f"]},{data:[100,120,130,140,150,190],color:'green',label:["g","h","i","j","k","l"]}]; 
       var width=45; 
       function renderGrid(gridPixelSize, color) 
     { 
      ctx.save(); 
      ctx.lineWidth = 0.5; 
      ctx.strokeStyle = color; 
      for(var i = 20; i <= canvas.height-20; i = i + gridPixelSize) 
      { 
       ctx.beginPath(); 
       ctx.moveTo(20, i); 
       ctx.lineTo(canvas.width-20, i); 
       ctx.closePath(); 
       ctx.stroke(); 
      } 
      for(var j = 20; j <= canvas.width-20; j = j + gridPixelSize) 
      { 
       ctx.beginPath(); 
       ctx.moveTo(j, 20); 
       ctx.lineTo(j, canvas.height-20); 
       ctx.closePath(); 
       ctx.stroke(); 
      } 
      ctx.restore(); 
     } 
     renderGrid(10, "grey"); 

       ctx.beginPath(); 
       ctx.strokeStyle = 'black'; 
       ctx.moveTo(20, canvas.height-20); 
       ctx.lineTo(canvas.width-20, canvas.height-20); 
       ctx.closePath(); 
       ctx.stroke(); 

       ctx.beginPath(); 
     ctx.strokeStyle = 'black'; 
       ctx.moveTo(20, 20); 
       ctx.lineTo(20, canvas.height-20); 
       ctx.closePath(); 
       ctx.stroke(); 
       ctx.font = "bold 16px Arial"; 

     function getFunctionForTimeout(j){ 
        var i=0,currx=30,info=graphInfo[j],x5=j*5; 
        var fTimeout=function(){ 
         var h=Math.max(info.data[i]-x5,0); 
         var m=info.label[i]; 
         ctx.fillStyle='black' 
         ctx.fillRect(currx+(10*x5)+2,canvas.height-h-20,width+2,h-1); 
         ctx.fillStyle=info.color;     
         ctx.fillRect(currx+(10*x5),canvas.height-h-21,width,h);     
         ctx.fillText(m, currx+(10*x5)+20, canvas.height-5); 
         currx+=120; 
         i++; 
         /*var ctx = $('#mycanvas').get(0).getContext('2d'); 
         $('#mycanvas').click(function(e) { 
     var x = e.offsetX, 
      y = e.offsetY; 

     for(var k=0;k<j;k++) { 
      if(x > currx+(10*x5) 
      && x < canvas.height-h-21 
      && y > width 
      && y < h) { 
       alert('Rectangle ' + j + ' clicked'); 
      } 
     } 
    });*/ 
         if(i<info.data.length)setTimeout(fTimeout,2000); 
        }; 
        return fTimeout; 
     } 

       for(var j=graphInfo.length-1;j>=0;j--) { 
        setTimeout(getFunctionForTimeout(j),2000); 
       } 
      }; 
      </script> 
     </head> 
     <body> 
      <canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;"> 
     </body> 
    </html>

來源

2012-07-25 Praveen Singh

有一個在if條件要檢查的警告... – GOK 2012-07-25 10:48:50

你解決您的問題的一些問題？ – GOK 2012-07-26 17:01:56

這裏是給你你在哪裏點擊畫布上鼠標位置的代碼，我只是改變了你的代碼更正爲你期待的警報，但您的狀況中存在一些問題，您將其作爲警報生成。

Njoy單擊並提醒鼠標位置;如果你想你所期望的相同的警報，改變你如果條件你會被我的位置警告得到它...

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
     <script type="text/javascript"> 
     window.onload=function() { 
      var canvas=document.getElementById('mycanvas'); 
      var ctx=canvas.getContext('2d'); 
      var graphInfo=[{data:[120,130,140,160,180,100],color:'purple',label:["a","b","c","d","e","f"]},{data:[100,120,130,140,150,190],color:'green',label:["g","h","i","j","k","l"]}]; 
      var width=45; 
      function renderGrid(gridPixelSize, color) 
      { 
       ctx.save(); 
       ctx.lineWidth = 0.5; 
       ctx.strokeStyle = color; 
       for(var i = 20; i <= canvas.height-20; i = i + gridPixelSize) 
       { 
        ctx.beginPath(); 
        ctx.moveTo(20, i); 
        ctx.lineTo(canvas.width-20, i); 
        ctx.closePath(); 
        ctx.stroke(); 
       } 
       for(var j = 20; j <= canvas.width-20; j = j + gridPixelSize) 
       { 
        ctx.beginPath(); 
        ctx.moveTo(j, 20); 
        ctx.lineTo(j, canvas.height-20); 
        ctx.closePath(); 
        ctx.stroke(); 
       } 
       ctx.restore(); 
      } 
       renderGrid(10, "grey"); 

         ctx.beginPath(); 
         ctx.strokeStyle = 'black'; 
         ctx.moveTo(20, canvas.height-20); 
         ctx.lineTo(canvas.width-20, canvas.height-20); 
         ctx.closePath(); 
         ctx.stroke(); 

         ctx.beginPath(); 
       ctx.strokeStyle = 'black'; 
         ctx.moveTo(20, 20); 
         ctx.lineTo(20, canvas.height-20); 
         ctx.closePath(); 
         ctx.stroke(); 
         ctx.font = "bold 16px Arial"; 

      function getFunctionForTimeout(j){ 
       var i=0,currx=30,info=graphInfo[j],x5=j*5; 
       var fTimeout=function(){ 
        var h=Math.max(info.data[i]-x5,0); 
        var m=info.label[i]; 
        var ctx = $('#mycanvas').get(0).getContext('2d'); 
        ctx.fillStyle='black' 
        ctx.fillRect(currx+(10*x5)+2,canvas.height-h-20,width+2,h-1); 
        ctx.fillStyle=info.color;      
        ctx.fillRect(currx+(10*x5),canvas.height-h-21,width,h);      
        ctx.fillText(m, currx+(10*x5)+20, canvas.height-5); 
        currx+=120; 
        i++; 

        $('#mycanvas').click(function(e) { 
         var canvas = document.getElementById("myCanvas"); 
         var mousePos = getMousePos(canvas, e); 
         var message = "Mouse position: " + mousePos.x + "," + mousePos.y; 
         var x = mousePos.x; 
         var y = mousePos.y; 
         alert(message); 

         for(var k=0;k<j;k++) { 
          if(x > currx+(10*x5) 
          && x < canvas.height-h-21 
          && y > width 
          && y < h) { 
           alert('Rectangle ' + j + ' clicked'); 
          } 
         } 
        }); 
        if(i<info.data.length)setTimeout(fTimeout,2000); 
       }; 
       return fTimeout; 
      }  

      for(var j=graphInfo.length-1;j>=0;j--) { 
       setTimeout(getFunctionForTimeout(j),2000); 
      } 
      function getMousePos(canvas, evt) { 
       var rect = canvas.getBoundingClientRect(), root = document.documentElement; 

      // return relative mouse position 
      var mouseX = evt.clientX - rect.top - root.scrollTop; 
      var mouseY = evt.clientY - rect.left - root.scrollLeft; 
       return { 
        x: mouseX, 
        y: mouseY 
       }; 
       } 
     }; 
     </script> 
    </head> 
    <body> 
     <canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;"> 
    </body> 
</html>

查一下getMousePos（）對同一改變你所需要

乾杯！！恩喬伊！

來源

2012-07-25 10:51:06 GOK

謝謝。我如何使代碼只感覺畫布中的矩形？ – 2012-07-25 11:28:44

var rect = canvas.getBoundingClientRect（），root = document.documentElement; \t \t \t \t //返回相對鼠標位置 \t \t \t \t變種mouseX = evt.clientX - rect.top - root.scrollTop; \t \t \t \t變種mouseY的= evt.clientY - rect.left - root.scrollLeft; – GOK 2012-07-25 11:35:27

只需檢查getMousePos（）中與您需要的相同的更改 – GOK 2012-07-25 11:36:54

鼠標點擊不是在我的柱形圖工作在HTML5

回答

相關問題