fabricjs Samouczek
Rozpoczęcie pracy z fabricjs
Szukaj…
Uwagi
fabric.js to potężna i dość prosta biblioteka javascript dla płótna HTML5. Zapewnia interaktywną platformę do pracy z płótnem HTML5. Za pomocą tkaniny można tworzyć obiekty / kształty na płótnie od prostych kształtów geometrycznych do kształtów złożonych. Możesz nawet pracować z obrazami przy użyciu fabric.js. Fabric.js obsługuje również animacje. Zapewnia sterowanie do pracy z obrazami, takimi jak przeciąganie ich, skalowanie i obracanie. Umożliwia grupowanie kształtów / obiektów, którymi można manipulować razem. obsługuje zdarzenia nie tylko ograniczone do elementu canvas, ale także z obiektami. Zapewnia nawet funkcjonalność do szeregowania płótna do SVG lub JSON i ponownego wykorzystania go w razie potrzeby. Obsługuje nawet uruchamianie struktury pod Node.js, przy pomocy bibliotek jsdom i canvas-canvas.
Instalacja lub konfiguracja
Fabric.js jest jak każda inna biblioteka JS specyficzna dla canvas. Łatwa konfiguracja i rozpoczęcie pracy. Wszystko, co musisz zrobić, to pobrać plik fabric.js z TUTAJ i dołączyć go do swojego projektu, tak jak każdą inną bibliotekę JS, na przykład sposób, w jaki robisz to dla jQuery. Następnie utwórz plik HTML, załóżmy index.html jak:
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>
atrybut src w skrypcie odnosi się do pliku fabric.js przechowywanego w tym samym folderze, który można przechowywać w innym folderze i podać ścieżkę względną. I jesteś gotowy do wyjścia. Aby uzyskać więcej informacji o tkaninie, odwiedź oficjalną stronę . Oto bardzo podstawowa wersja demonstracyjna
Witaj świecie
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)
Przykład tworzy tekst 'Hello world From Fabric JS' przy użyciu fabricjs. Próbny