Poradnik do frameworka CreateJS #2 – Interakcja z Myszką

Dziś zajmiemy się interakcją obiektów ze wskaźnikiem myszy.


Podstawy

Model interakcji myszy z obiektami nie jest taki trudny, jakby mogło się to wydawać. Wystarczy że podepniecie „listener” do „mouse event” czyli zdarzeń wskaźnika myszy przy pomocy metody addEventListener do naszego obiektu.

circle.addEventListener("click", function(event) { alert("clicked"); })

Przykładowy kod:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
  <script>
    function init() {
      var stage = new createjs.Stage("demoCanvas");

      var circle = new createjs.Shape();
      circle.graphics.beginFill("red").drawCircle(0, 0, 50);
      circle.x = 100;
      circle.y = 100;

      circle.on("click", function() {
        alert("clicked");
      });

      stage.addChild(circle);
      stage.update();
    }
  </script>
</head>
<body onload="init();">
  <canvas id="demoCanvas" width="500" height="200">
  </canvas>
</body>
</html>

 

Demo znajdziecie poniżej:

Jest kilka eventów (zdarzeń) do których możecie dodać listener (nasłuchiwacz), aby móc nasłuchiwać obiektów. Są to między innymi: click, mousedown, dblclick, pressmove,pressup, mouseover / mouseout, and rollover / rollout.

Ostatnie cztery eventy mają dodatkowe właściwości, które aktywujesz poprzez stage.enableMouseOver(frequency).

Parametr frequency wskazuje ile razy na sekundę nasz framework EaselJS oblicza co się właśnie znajduję pod wskaźnikiem. Wyższa wartość zwiększa czułość, ale wykorzystuje też więcej zasobów. Domyślna wartość to 20 razy na sekundę.

Zwróć uwagę, że nie ma Eventu mouseup. Zamiast tego użyj  click (jeżeli wciskamy klawisz myszy, by następnie go spuścić), bądź pressup jeżeli chcesz wiedzieć kiedy mysz kliknęła na obiekt, ale została spuszczona gdzie indziej.

Metoda on jest skrótem do addEventListener i dodaje dodatkową funkcjonalność. Aby więcej się o niej dowiedzieć sprawdźcie API do frameworka: http://www.createjs.com/docs/easeljs/modules/EaselJS.html

  
circle.on(type, listener, scope, once, data, useCapture);

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *