Biblioteka JS pozwalająca rysować i manipulować prostymi kształtami geometrycznymi.

0

Mam przed sobą dość ciekawy projekt do zrealizowania. Opiera się on w głównej mierze na rysowaniu prostych kształtów (głównie wielokątów) oraz ich manipulacją (przesunięcie, skalowanie itp).
Nie mniej jednak zastanawiam się czy są jakieś "pomocne" biblioteki JS, które ułatwiają bądź rozszerzają możliwości czystego canvas.

Zagadnienia, które mnie interesują - fajnie jakby ktoś doświadczony w canvas określił czy da się to wykonać.

  1. rysowanie wielokątów bazując na punktach tworzonych w miejscu kliknięcia myszką (to już mam i w canvas da się bez zbędnych bajerów ogarnąć)
  2. potrzebuję dla takiego wyrysowanego wielokąta dodać offset - czyli ogólniej mówiąc narysować taki sam wielokąt wpisany w ten pierwotny, gdzie każda ściana jest odsunięta od oryginalnej o np 100px
  3. manipulacja kształtami. Np mam kwadrat, który jest wpisany w ten wyrysowany wielokąt. Potrzebuję móc nim manipulować ale tylko w granicach tego wielokąta - aby nie dało się wyjść poza jego obszar.
  4. Pozostaje jeszcze kwestia responsywności. O ile pozycje na np PC dość łatwo da się ogarnąć o tyle już na telefonie z tym ciężej aby całość nie wyszła poza wielkość ekranu urządzenia.
    Myślałem aby tutaj zamiast punktów użyć wartości procentowych względem obszaru roboczego.
    Czyli zamiast punktu A(50, 80) dać odpowiednio A(10%, 19.3%) i ustawiać figury w odległości od punktu 0,0 - pytanie czy figury w canvas takie wartości w ogóle przyjmą?

Poszukałem, poczytałem i trafiłem na jCanvas
niby lekki, spoko, ale nie widzę w tej bibliotece nic nadzwyczajnego co mogłoby mi pomóc z wyżej wymienionymi punktami.

Być może jest jakieś lepsze narzędzie, które do takiej prostej pracy posłuży lepiej niż canvas?
Każda sugestia/pomysł będzie pomocna.

4

Nie mniej jednak zastanawiam się czy są jakieś "pomocne" biblioteki JS, które ułatwiają bądź rozszerzają możliwości czystego canvas.

Np. fabric, pixi.js, jeśli chodzi o biblioteki do canvasa.

natomiast zastanów się, czy chcesz to na canvas robić, bo może lepiej byłoby to zrobić na SVG.

Canvas jest rastrowe oraz bezmyślne (nie możesz manipulować tym, co narysujesz ani nawet podczepić zdarzeń np. zrobisz kółko, to nie możesz podczepić onClick pod kółko, a tylko pod całego Canvasa) i dopiero biblioteki dają ci wektory czy pewien model obiektowy czy podczepianie zdarzeń.

Natomiast SVG od początku jest już wektorowe i od początku wszystko, co zrobisz, to obiekt). Wtedy też albo możesz to robić bez żadnej biblioteki, jechać na samym JS + SVG + CSS, albo możesz użyć do animacji D3 czy nawet React.

Na twoim miejscu pozaglądałbym po dokumentacjach i zobaczył, czego potrzebujesz i co dana biblioteka może ci dać. A potem zrobił kilka prototypów w najbardziej obiecujących bibliotekach, żeby sprawdzić, czy dany efekt graficzny da się osiągnąć w danej bibliotece itp.(dobra, niekoniecznie musisz wszystkie sprawdzac, ale chodzi o to, że "jak nie ta, to inna").

BTW Jeszcze p5.js jest, ale z tego akurat nie korzystałem, ale możesz zerknąć, może ci się przyda https://p5js.org/learn/

pytanie czy figury w canvas takie wartości w ogóle przyjmą?

nie wiem, ale SVG + CSS przyjmie.

1
LukeJL napisał(a):

Nie mniej jednak zastanawiam się czy są jakieś "pomocne" biblioteki JS, które ułatwiają bądź rozszerzają możliwości czystego canvas.

Np. fabric, pixi.js, jeśli chodzi o biblioteki do canvasa.

natomiast zastanów się, czy chcesz to na canvas robić, bo może lepiej byłoby to zrobić na SVG.

Ja tam się nie znam, ale... ostatnio sporo czytam o tych web-mada-faka technologiach to podzielę się co znalazłem :)

Movable wspiera SVG:
https://www.npmjs.com/package/moveable
No i wspiera pokaźną liczbę popularnych (jak React, Vue, Angular), jak i mniej popularnych (np. Svelte) frejmłorków.

nie wiem, ale SVG + CSS przyjmie.

IMO na pewno, ponieważ SVG to wybawienie w obszarze grafiki dla RWD.

1 użytkowników online, w tym zalogowanych: 0, gości: 1