2012-02-28 97 views
0

我使用jCanvas在画布上绘制形状。我想要的是当我用drawArc函数悬停在图层上时我收到一条警报消息,并且在使用drawRect方法悬停在图层上时,我得到了不同的警报消息。可以使用jCanvas来完成。在悬停在矩形上也没有任何反应。jCanvas图层事件

PS:KineticJS可以做到!

下面的代码...

<!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>Untitled Document</title> 
<script type="text/javascript" src="../../javascript/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="../../javascript/jcanvas.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
    var canvas = $('#can'); 
    canvas.attr({ 
     width:$(window).innerWidth(), 
     height:$(window).innerHeight() 
    }); 
    var width = canvas.innerWidth(); 
    var height = canvas.innerHeight() 
    var context = canvas.get(0).getContext('2d'); 

    $("canvas").addLayer({ 
     method: "drawRect", 
     fillStyle: "#36b", 
     x: 100, y: 100, 
     width: 80, height: 40 
    }); 

    $("canvas").addLayer({ 
     method: "drawArc", 
     fillStyle: "#36b", 
     x: 20, y: 100, 
     radius: 20 
    }); 

    $("canvas").drawLayers(); 

    $(window).mousemove(function(e) { 
     var x = e.pageX; 
     var y = e.pageY; 
     if(context.isPointInPath(x,y)) 
      alert("Found it!"); 
    }); 

}); 
</script> 
</head> 

<body> 
<canvas id="can"></canvas> 
</body> 
</html> 

回答

2

没有问题。 Caleb Evans的beta build可能有帮助。以下事件被列入...

  • 点击
  • DBLCLICK
  • 鼠标按下
  • 鼠标松开
  • 鼠标移动

链接到jsFiddle演示。

相关问题