2013-03-18 10 views
5

Mam problem z rysowaniem złożonego obrazu za pomocą tagu canvas i przy użyciu JavaScript.Edytor płótna do rysowania

Potrzebuję narzędzia, lub możemy powiedzieć, edytora, za pomocą którego mogę narysować dowolny obraz. Zwraca kod JavaScript za pomocą obszaru roboczego, który mogę dołączyć na stronach html.

Dzięki!

Odpowiedz

5

Aby uzyskać bardzo złożone obrazy, należy użyć programu Adobe Illustrator do projektowania (światowej klasy edytor projektów).

Następnie zapisz obraz w formacie .SVG.

BTW, Możesz załadować plik (przykład "yourArt.svg") bezpośrednio do znacznika img.

Ale, bardziej na twoje pytanie, możesz użyć biblioteki rysunków płótna o nazwie FabricJS, aby przeczytać svg i narysować go na płótnie. Strona biblioteki to: http://fabricjs.com/

Alternatywnie można użyć narzędzia do konwersji online, aby przekonwertować plik yourArt.svg na wymagane polecenia rysowania na płótnie. Popularny konwerter svg-na-płótnie to: http://www.professorcloud.com/svg-to-canvas/

Słowo ostrzeżenia ... te techniki mogą wymagać poprawienia wynikowych poleceń rysowania płótna - szczególnie, jeśli kompozycja wykorzystuje bardziej zaawansowane techniki w programie Illustrator.

Twoja grafika może być bardzo skomplikowana i nadal być obsługiwana! Zapoznaj się z sekcją SVG demonstracji FabricJS: http://fabricjs.com/kitchensink/

+0

Rozglądając się trochę wydaje się jedyną realną opcją, jeśli chcesz tworzyć i manipulować kilka skomplikowanych kształtów. Oprzyrządowanie do SVG (lub innego formatu grafiki wektorowej) jest naprawdę na najwyższym poziomie. –

+0

Innym narzędziem, z którego możesz skorzystać, jest [Microsofts Expression Design] (http://msdn.microsoft.com/en-US/expression), który wydaje się teraz darmowy. Ma opcję eksportu do SVG. –

8

Mam projekt, w którym można narysować złożone kształty płótna i wyeksportować je do pliku HTML. Następnie można edytować plik jako wymagane

Mój projekt jest http://canvimation.github.com/

nadzieję, że to pomoc

+1

wow !! dats gr8 prject naprawdę .. – Anurag

+0

to świetny człowiek narzędzie, dzięki za udostępnianie, już titted –

2

Innym doskonałym narzędziem w Internecie nazywa HTML Canvas Studio.

Zachowuje się jak inne programy do malowania, a po zakończeniu można wyeksportować rysunek do HTML + JS.

Narzędzie można znaleźć tutaj:http://www.htmlcanvasstudio.com/