Fatal编程技术网

jCanvas层事件

canvas

jCanvas层事件,canvas,jcanvas,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/xh

我用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>


无标题文件
$（文档）.ready（函数（e）{
var canvas=$（“#can”）；
canvas.attr({
宽度：$（窗口）.innerWidth（），
高度：$（窗口）。内部高度（）
});
var width=canvas.innerWidth（）；
var height=canvas.innerHeight（）
var context=canvas.get（0.getContext（'2d'）；
$（“画布”）.addLayer({
方法：“drawRect”，
fillStyle:#36b“，
x:100，y:100，
宽：80，高：40
});
$（“画布”）.addLayer({
方法：“drawArc”，
fillStyle:#36b“，
x:20，y:100，
半径：20
});
$（“画布”）.drawLayers（）；
$（窗口）.mousemove（函数（e）{
var x=e.pageX；
var y=e.pageY；
if（context.isPointInPath（x，y））
警惕（“找到了！”）；
});
});
没有问题。Caleb Evans的这篇文章可能会有所帮助。包括以下事件

  • 点击
  • dblclick
  • 穆斯敦
  • 鼠标
  • 鼠标移动
链接到上的演示