2012-02-28 11 views
0

jCanvasを使用してキャンバスに図形を描画しています。私が欲しいのは、drawArc関数を使ってレイヤー上にマウスを移動すると、警告メッセージが表示され、drawRectメソッドを使用してレイヤーをホバリングすると、別の警告メッセージが表示されます。 jCanvasを使用してこれを行うことはできますか?また、長方形の上にホバリングすると何も起こりません。jCanvas Layer Events

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にデモするのmouseup
  • のMouseMove

のリンクが含まれています。