Przeciągnij i upuść na kanwie mozilla

Question

Chcę zaimplementować okienko rysunkowe (podobną, ale mniejszą wersję do tego, co visio udostępnia dla wykresów) w obszarze roboczym mozilla.

Czy istnieje wsparcie dla tego?

Użyłem jQuery do tej pory, aby utworzyć prostokąty i przenieść je. Chociaż jest to łatwe tutaj ... tworzenie linii (połączeń między obiektami) jest prawdziwym bólem. Używam jakiegoś prostego sposobu na pikowanie w pikselach w pikselach w javascriptie i nie wygląda ani dobrze, ani skalowalnie, a także potrzebuję zbudować wiele funkcji, aby połączenia przylgnęły do ​​zestawu obiektów itp.

Czy ktoś wie jeśli płótno i dostępne funkcje ułatwią mi życie.

Wszelkie wskazówki, co jest lepszym rozwiązaniem w tym przypadku. (Mam nadzieję, że to nie aplet).

Z góry dziękuję.

Answer 1

proszę poniższy link: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK czy to pomaga!

poniższe kroki mogą pomóc:
1. Utwórz i dodaj płótno do DOM:
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2. Ustawić szerokość-wysokość kanwie:
myCanvas.width=200; myCanvas.height=200;
3. Uzyskaj kontekst płótnie i rozpocząć rysowanie na nim:
var gc = myCanvas.getContext('2d');
4. Kod narysować prostokąt:
gc.strokeRect(50,50,50,50);
5. Po tym, dodać mousehandlers (MO usedown, mousemove, mouseup)/touchhandlers (touchdown, touchmove, touchup) na płótnie i odpowiednio obsługują ruch.

Answer 2

Tak, możesz użyć do tego kanwy. Rysowanie prostych kształtów i skalowanie ich jest całkiem proste.

Ale jeśli chcesz edytować kształty po ich narysowaniu, będziesz musiał zainwestować więcej pracy. Canvas rysuje w tak zwanym "trybie natychmiastowym", co oznacza, że ​​nie wie, co namalowałeś zaraz po namalowaniu. Nie śledzi malowanych kształtów. Jeśli potrzebujesz, będziesz musiał to wdrożyć na własną rękę.

Wykonałem to za pomocą funkcji isPointInPath(), której można użyć do sprawdzenia, czy użytkownik kliknie określony punkt. Śledzę moje pomalowane obiekty za pomocą wzorca MVC (Model-View-Controller), dzięki czemu mogę dowiedzieć się, który Kształt został kliknięty.

Inną alternatywą może być fabric.js, która powinna być bardzo zbliżona do potrzebnych.

Answer 3

Każda z tych jQuery wtyczek świetnie nadają się do tafli rysunek:

jCanvas Do rysowania żadnych prostych, a nawet skomplikowanych kształtów

sketch.js do rysowania w ogóle.

Oba są responsywne i kompatybilne.