私はRaphaelJS」キャンバスイベントのクリックやキーボードハンドラを持つことができますか?
-
20-09-2019 - |
質問
私はRaphaelJSに新しいです。私は成功しませんキャンバスにクリックリスナーとキーボードのリスナーを追加しようとしています。誰かがラファエルにクリックリスナーとキーボードのリスナーを使用する方法を説明していただけます。小さな例では、大きな助けになるでしょう。
ありがとうございます。
解決
ここでは、クリックやマウスオーバーの例である、あなたはそれを簡単にするためにそこに多くのjQueryのを使用することができますが、私はちょうど文書レディ機能を使用していました。そこにキーボードイベントを追加しても過言ではないはずです。
<html>
<head>
<script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circ = paper.circle(250, 250, 40);
circ.node.onmouseover = function()
{
this.style.cursor = 'pointer';
};
circ.node.onclick = function()
{
circ.animate({opacity: 0}, 2000, function()
{
this.remove();
});
}
});
</script>
<style type="text/css">
#canvas_container
{
width: 500px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="canvas_container"></div>
</body>
</html>
所属していません StackOverflow