Wczytywanie obrazka z dysku oraz tworzenie przerywanej linii w EaselJS

Wczytywanie obrazka z dysku oraz tworzenie przerywanej linii były to moje dwa główne problemy które zabrały mi najwięcej czasu podczas jednego z moich ostatnich projektów. Z tego względu postanowiłem na ten temat coś napisać.

Projekt nad którym pracowałem było to narzędzie do rysowania perspektywy:

Znajdziecie go pod tym adresem: http://www.noob-programmer.com/perspektywa/

Cały projekt jest natomiast na moim GitHubie: https://github.com/petercrowed/PerspectiveTool (zignorujcie organizację kodu, jest to wersja robocza, która zostanie jeszcze rozwinięta).

Póki co jest to wczesna wersja i trzeba na razie linie rysować samemu, ale zamierzam zautomatyzować ten proces.

A tymczasem przejdźmy do problemów.

Wczytywanie obrazka.

Wczytywanie obrazów z dysku jest połączone z JavaScriptem. Czyli obrazek najpierw ładujemy z dysku, aby następnie wczytać go poprzez:

var input = document.getElementById("file");

Event Listener przy wczytaniu pliku (zmianie) wywoła naszą funkcję previewFile, która wczyta nasz plik, stworzy nową bitmapę i doda go do sceny.

Tworzenie przerywanej linii.

Kolejny przykład to zmiana kształtu kwadratu z „pełnego” na przerywany. Aby to wykonać będziemy musieli użyć prototypów, gdyż ta opcja nie jest jeszcze wbudowana we frameworka easel.js

Linijką kodu odpowiedzialną za stworzenie kształtu będzie:

shape.graphics.s("black").dash([10,5]).dr(10,10,100,100);

Podobnie przy pomocy prototypów wykonacie animacje i krzywe beziera:

Jeżeli będziecie chcieli stworzyć linię przerywaną to wystarczy, że lekko zmodyfikujecie kod i zamiast kwadratu stworzycie linie.

Linijka odpowiadająca za stworzenie linii:

line.graphics.s("#0xFFFFFF").dash([10, 5]).mt(0, 100).lt(1000, 100);

Parametr znajdujący się za .dash, czyli

.dash([10, 5]

Pozwala wam ustalić długość kresek oraz ich oddalenie.

Problemy nie są skomplikowane. Jedynie pewne ograniczenia frameworka zmuszają nas do znalezienia innych rozwiązań. Czasem aby je rozwiązać tracimy pół dnia… ale koniec końców się nam udaje. I zdobywamy nowe doświadczenie.

Dodaj komentarz

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