fabricjs учебник
Начало работы с fabricjs
Поиск…
замечания
fabric.js - мощная и довольно простая библиотека javascript для холста HTML5. Он предоставляет интерактивную платформу для работы с холстом HTML5. Используя ткань, вы можете создавать объекты / фигуры на холсте от простых геометрических фигур до сложных форм. Вы даже можете работать с изображениями, используя fabric.js. fabric.js также поддерживает анимацию. Он предоставляет элементы управления для работы с изображениями, например, перетаскивая их, масштабируя их, вращая их. Он позволяет группировать фигуры / объекты, которые можно манипулировать вместе. он поддерживает события, которые не только ограничиваются элементом canvas, но и объектами. Он даже предоставляет функции, чтобы сериализовать холст в SVG или JSON и повторно использовать его по мере необходимости. Он даже поддерживает работу с тэгом под Node.js, с помощью jsdom и библиотек узлов.
Установка или настройка
Fabric.js похож на любую другую JS-библиотеку, специфичную только для холста. Легко настроить и начать работу. Все, что вам нужно сделать, это загрузить fabric.js из ЗДЕСЬ и включить его в свой проект, как и любую другую JS-библиотеку, например, как вы это делаете для jQuery. Затем создайте файл html, предположим, index.html:
<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>
атрибут src в скрипте относится к файлу fabric.js, хранящемуся в той же папке, которую вы можете сохранить в другой папке, и укажите относительный путь. И тебе хорошо идти. Для получения дополнительной информации о посещении Fabric Offcial Page . Вот очень простая демонстрация
Привет, мир
<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)
В примере создается текст 'Hello world From Fabric JS' с использованием fabricjs. демонстрация