Szukam ramy / biblioteki, która pozwala mi wykonać kilka zadań na płótnie HTML5.

Potrzebuję tego, że mechanizmy dostępu do obiektów po ich rysowaniu, dzięki czemu można je zmienić i analizować do XML. Ponadto muszę być w stanie przeciągnąć i upuść pewne obiekty z kursorem.

Próbowałem już kilka ram, ale żaden z nich nie daje możliwości przypisać słuchaczy do obiektu (tylko na płótno). Możliwe jest wdrożenie takiego zachowania ręcznie, ale staje się skomplikowane, ponieważ muszę poradzić sobie z znacznie więcej niż jednym obiektem na płótnie. Również wydajność jest ważnym kryterium, więc byłoby dobrze, gdybym mógł użyć zoptymalizowanych funkcji bibliotecznych, a nie mój własny nieszczęśliwy kod. Znam SVG jako alternatywy, więc proszę, nie próbuj mnie pchać w ten sposób. Muszę to zrobić z płótnem, aby porównać występy obu.

Myślę więc, czego szukam, to ramy, które pozwalają mi przypisać słuchaczy do płótna. Umiejętności animacji nie są tak ważne, ponieważ wszystko skoncentruje się na wejściu użytkownika przez mysz.

Czy ktoś znany o takiej ramie / bibliotece, która pasuje do moich potrzeb i może podzielić się pewnym doświadczeniem? Cieszę się, że nie będę zmuszony do przetestowania wszystkich ram i bibliotek dla HTML5-Canvas.

Z góry dziękuję.

Edytuj: Jedna rzecz, o której zapomniałem wspomnieć: Oprócz obiektów geometrycznych, muszę również móc narysować ścieżki (tj. Poniżary) i analizuj je. Chociaż nie jest konieczne, aby zapewnić im ładowarki, byłbym szczęśliwy, gdybym nie musiał wdrażać tego poza biblioteką.

4
j0ker 3 listopad 2011, 18:50

5 odpowiedzi

Najlepsza odpowiedź

Świetna biblioteka, która emuluje obiekty za pomocą przeciągania / upuść, zmienić rozmiar, obrócić. Może również importować dane SVG, które mogą pomóc w importowaniu grafiki wektorowej.

Biblioteka nazywa się fabric.js: https://github.com/kangax/fabric.js

Możesz zobaczyć jakieś demina i poczujesz, jak to może odpowiadać: http://kangax.github.com/fabric .js / demos / index.html

6
Variant 7 listopad 2011, 08:10

Nie ma takiej rzeczy, jak można wybrać "Obiekty na płótnie", na zewnątrz wszystkiego, co opisujesz z niestandardowymi zajęciami i takimi. Po narysowaniu czegoś, co to jest, przeglądarka widzi go jako jedna duża kolekcja pikseli.

Jedynym sposobem, w jaki możesz robić to, co opisujesz, jest przechwytywanie współrzędnych zdarzeń myszy i porównuje go przed wszystkimi rzeczami, o których wiesz, że przyciągnąłeś na płótno, biorąc pod uwagę kolejność, w jakiej zostały narysowane.

1
beeglebug 3 listopad 2011, 15:58

Aby zmienić płótno, musisz go usunąć i przerysować. Zwykle każda ramka. Cake.js sprawia, że jest to łatwe.

Rozwiązanie A) Aby mieć interakcję myszy, będziesz musiał zachować tablicę obiektów i indeksów Z, a następnie, gdy użytkownik kliknie, określ OffsetX i offsety na kliknięcie i określ, na co kliknęli.

Rozwiązanie B) dodaj absolutnie pozycjonowane divs z indeksem Z-indeksem i pozycjonowaniem odzwierciedlającym obrazy, które przyciągnąłeś na płótnie bazowym. Weź swoje kliknięcie / Przeciągnij wydarzenia z tych div.

1
circusdei 3 listopad 2011, 16:12

Nie mam biblioteki, aby sugerować, ale używana technika jest dodanie niewidzialnego imagemap nad płótnem. Następnie dodałem area elementy odpowiadające obiektom na płótnie.

Tagi reagują na wszystkie rodzime wydarzenia myszy przeglądarki. Pozwala to zapewnić bogatą interakcję użytkownika. Imagemape są również obsługiwane przez każdą przeglądarkę mobilną i stacjonarną i działa lepiej niż jakikolwiek punkt-in-wielokąt algorytm wdrożone w JavaScript.

Zapewnienie, że elementy area w ImageMap zawsze znajduje się z pokazami obiektów w płótnie, dodają pewną złożoność kodu, ale w praktyce nie jest zbyt trudne do pokonania. Uwaga, w chromie możesz wpaść do niektórych problemy jeśli chcesz zmienić współrzędne Tag area, który jest już w domu.

Oto przykład roboczy tego Techinque: http://xavi.co/drag-shapes
A oto kod: https://github.com/xavi-/drag-shapes

Mam nadzieję, że to pomoże.

1
Xavi 3 listopad 2011, 20:17

Użyłem kinetic.js do obrywach skrzynek i kolizji na płótnie.

Prawdopodobnie musisz utworzyć własne zajęcia. http://www.kinetytjs.com/

1
Mirko 3 listopad 2011, 20:37