Biblioteka React do rysowania na Canvas

0

Witam,
jaką polecacie bibliotekę React, która umożliwia "wolne rysowanie" z wykorzystaniem canvas? Zależy mi, żeby była możliwość eksportowania i importowania "dzieła", żebym mógł je przechowywać w bazie danych i ponownie edytować. Zależy mi na canvas ze względu na wydajność. Biblioteka nie musi mieć zaawansowanych opcji - wystarczy ołówek, zmiana grubości i koloru.

0

Biblioteka nie musi mieć zaawansowanych opcji - wystarczy ołówek, zmiana grubości i koloru.

Do takich prostych rzeczy wystarczy czysty <canvas>, nie potrzebujesz do tego biblioteki. Inne technologie też mogą okazać się przydatne, ale pytanie, jakie dodatkowe wymagania dojdą.

Zależy mi, żeby była możliwość eksportowania i importowania "dzieła",

eksportowanie grafiki z canvas:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
żeby zaimportować, mógłbyś utworzyć najpierw element <img> z przypisanym odpowiednim src, a potem to wyświetlić za pomocą drawImage
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

żebym mógł je przechowywać w bazie danych i ponownie edytować.

Co to znaczy ponownie edytować? Czy ta edycja ma być rastrowa na zasadzie "linie się zamieniają na piksele, a później to same piksele", czy chcesz zachować informacje o geometrii, czyli działać później w trybie obiektowo-wektorowym (czyli narysuję linię, a potem edytuję kształt tej linii)?

Jeśli to pierwsze, to canvas będzie spoko, jak to drugie, to trzeba pomyśleć.

Zależy mi na canvas ze względu na wydajność.

To jest złudne.
Czy faktycznie robisz coś, co wymaga wydajności? Rysowanie kilku linii nie jest niczym, co byłoby specjalnie wymagające pod kątem wydajności.

0

Albo canvas i wydajność, albo React.

Jeżeli nałożysz na canvas abstrakcję reactową to całą wydajność i tak szlag trafi.

Więc jak natywny canvas jest zbyt "niskopoziomowy" (a potwierdzę, że jest) to szukaj po prostu jakąś "canvas helper library": https://webdesign.tutsplus.com/articles/best-free-canvas-libraries-in-javascript--cms-37317 - a to, że akurat używasz reacta nie powinno mieć tu nic do rzeczy

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