Poradnik do frameworka CreateJS #1

Jako że nie ma żadnych materiałów do tej technologi w języku polskim to postanowiłem kilka rzeczy potłumaczyć, a kilka sam napisać. A przy okazji utrwalić już zdobytą przeze mnie wiedzę.

Zacznę może od EaselJS, który wchodzi w skład pakietu CreateJS.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script>
        function init() {
            // twój kod.
        }
    </script>
</head>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="500">
        // dodatkowa zawartość 
    </canvas>
</body>
</html>

Kod przedstawiony powyżej stworzy wam Canvas  o rozmiarach 500 na 500. Canvas jest to swego rodzaju okno (w dokładnym tłumaczeniu płótno), na którym odbywać się będzie cała przez was zaprogramowana logika. Poruszanie się elementów, tworzenie elementów, animacja, etc.

Jeżeli nic się wam nie pojawiło, to się nie przejmujcie. To jest tylko szablon startowy.

Tworzenie sceny (Stage).

var stage = new createjs.Stage("demoCanvas");

Powyższa linijka tworzy scenę, która wskazuje na wasz Canvas. Scena posiada wszystkie obiekty, które zostaną pokazane przedstawione na Canvasie.

Jak widzisz definicja klasy znajduje się wewnątrz przestrzeni nazw createjs. To powoduje, że nasza biblioteka nie koliduje z innymi.

Tworzenie kształtu (shape).

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

Pierwsza linijka tworzy instancję obiektu „Shape”. Shape są to wszystkie kształty, które zostaną narysowane pod postacią grafik wektorowych na naszym Canvasie (inaczej mówiąc, wyświetlą się w naszej przeglądarce na ekranie monitora).

Wszystkie te obiekty dzielą podobne właściwości, aby mieć możliwość wyświetlenia i ich transformacji. Tak jak jest to w naszym przykładzie, zmienne x oraz y, które określają stworzenie obiektu na podanych współrzędnych.

Kształty posiadają również specjalną właściwość zwaną „graphics”, która wskazuje na instancję „Graphics”, która przechowuje wszystkie metody, których używać będziemy, aby zdefiniować nasze Wektory. W przykładzie powyżej mówimy obiektowi „graphics”, aby narysowała kółko o promieniu „50” pixeli i centrum (0, 0) (w odniesieniu do pozycji kształtu) i żeby nasz kształt przybrał kolor czerwony.

Aby nasz kształt został narysowany, musimy go dodać do Sceny. Widać to w 5 linijce kodu.

EaselJS wspiera również skróty, więc tą samą linijkę możecie zapisać w ten sposób.

stage.addChild(new createjs.Shape()).set({x:100,y:100}).graphics.f("red").dc(0,0,50);

 Aktualizacja Sceny (Update).

Ustaliliśmy co chcemy wyświetlić, gdzie oraz dodaliśmy element do sceny. Jedynie zostało nam ją zaktualizować przy pomocy tej linijki kodu.

stage.update();

Tu mówimy scenie, aby wyczyściła canvas, odczytała wszystkie obiekty children i na końcu je wyświetliła.

Cały działający kod możecie zobaczyć w przykładzie poniżej.

<!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;
      stage.addChild(circle);
      // stage.addChild(new createjs.Shape()).setTransform(100,100).graphics.f("red").dc(0,0,50);
      stage.update();
    }
  </script>
</head>
<body onload="init();">
  <canvas id="demoCanvas" width="500" height="200">
    alternate content
  </canvas>
</body>
</html>

 

Jeżeli wszystko zadziałało jak powinno to powinniście otrzymać taki obraz jak poniżej:
EaselJS demo: Getting started alternate content

To tyle w części pierwszej. W części drugiej zajmiemy się ciekawszymi rzeczami, a mianowicie interakcją ze wskaźnikiem myszy.

Oryginał znajdziecie pod tym adresem: http://www.createjs.com/tutorials/Getting%20Started/

Oficjalna strona frameworka: http://www.createjs.com/

Dodaj komentarz

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