jCanvas Layer Events - PullRequest
Новая
       24

jCanvas Layer Events

0 голосов
/ 28 февраля 2012

Я использую 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 Ответ

2 голосов
/ 29 февраля 2012

Нет проблем.Эта бета-версия от Калеба Эванса может помочь.Следующие события включены ...

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove

Ссылка на демо на jsFiddle .

...