0

我正在使用 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>
4

1 回答 1

2

No issues. This beta build by Caleb Evans might help. Following events are included...

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove

Link to demo on jsFiddle.

于 2012-02-29T17:13:07.850 回答