jCanvas图层事件

时间:2012-02-28 12:41:34

标签: canvas jcanvas

我正在使用jCanvas在画布上绘制形状。我想要的是当我使用drawArc函数将鼠标悬停在图层上时,我会收到一条警告消息,并且在使用drawRect方法将鼠标悬停在图层上时,我会收到不同的警报消息。可以使用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>

1 个答案:

答案 0 :(得分:2)

没问题。 Caleb Evans的beta build可能有所帮助。以下活动包括在内......

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

链接到jsFiddle上的演示。