Fabric.js — это библиотека, упрощающая написание программ Canvas. Fabric.js предоставляет Canvas недостающую объектную модель, анализатор SVG, интерактивность и целый ряд других незаменимых инструментов. Поскольку Fabric.js является зарубежным фреймворком, официальный API беспорядочен и многочисленн, а большинство соответствующих документов написаны на английском языке, и их количество невелико. Поэтому цель этой статьи — помочь новичкам быстро начать работу с Fabric.js. проект и наслаждайтесь процессом рисования Canvas.
Зачем использовать Fabric.js?Canvas предоставляет хорошие возможности Canvas, но API недостаточно дружелюбен. Рисовать простую графику на самом деле нормально, но рисовать сложную графику и писать сложные эффекты не так удобно. Для этой цели был разработан Fabric.js. Он в основном использует объекты для написания кода.
Что может Fabric.js
Внедрение Fabric.js в проект Vue
Предполагая, что вы используете в своем проекте ES6 и Webpack, вы можете начать использовать Fabric.js следующим образом:
1. В командной строке:
npm установить ткань (или пряжа добавить ткань)
2. Внесите его в файл .vue
импортировать {ткань} из "ткани" 3. Начните свое путешествие по Fabric.js с mounted: жизненного цикла одного файла в .vue
Примечание. Модуль npm Fabric по умолчанию создает довольно большие пакеты. Если у вас в Fabric.js много пакетов, которые могут вам не понадобиться, в этом случае вы можете создать свою собственную версию здесь или в командной строке.
Рисовать графику Рисуйте обычную графику1. Объявить холст
вар холст = новая ткань.Canvas('main');2. Рисуем графику
var rect = new Fabric.Rect({ left:100,//Расстояние от левой стороны холста, в пикселях top:100,//Расстояние от верха холста fill:'red',//Ширина цвета заливки :30 ,//Ширина квадрата height:30//Высота квадрата});3. Добавьте графику на холст
холст.добавить(прямой);
Другие графики правил:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.TriangleИспользуйте рисование путей: рисуйте, используя движение точек и линий. Рисуйте очень сложные формы, используя линии, кривые и дуги.
В методе Fabric.Path() M представляет команду перемещения, а M 00 представляет перемещение кисти в точку с координатами (0,0).
L представляет собой линию, L 200 100 означает использование пера для рисования линии от координат (0,0) до координат (200,100). z означает закрытие пути фигуры.
После рисования треугольника мы можем использовать метод set(), чтобы установить положение, цвет, угол, прозрачность и другие атрибуты треугольника.
Конкретный код выглядит следующим образом:
var path = new Fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ слева: 120, сверху: 120,fill:'red' });canvas.add(path); Операции над картинкамиHTML вставить картинку
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var Canvas = new Fabric.Canvas('canvas');//Объявляем холст var imgElement = document.getElementById('img');//Объявляем наше изображение var imgInstance = new Fabric.Image(imgElement,{ //Установим положение и внешний вид изображения слева:100, сверху:100, ширины:200, высоты:100, угла:30//Установим угол поворота изображения по часовой стрелке}); (imgInstance); //Добавить на холстJavaScript вставить изображение
var Canvas = new Fabric.Canvas('canvas'); Fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//Изображение уменьшается в 10 раз Canvas. добавить (оImg }); взаимодействие Взаимодействие с холстом Canvas.add(imgInstance);//Добавить на холст var Canvas = new Fabric.Canvas('canvas'); Canvas.on('mouse:down', function(options) { console.log(options.e.clientX, options.e.clientY) })Примечание. Обычно используемые события мониторинга следующие:
mouse:down : когда нажата мышьmouse:move : когда мышь движетсяmouse:up : когда мышь поднятаОперации с объектами на холсте
var Canvas = новая ткань.Canvas('canvas'); var rect = новая ткань.Rect({ ширина: 100, высота: 50, заливка: 'зеленый' }); rect.on('selected', function() { //Выбираем событие прослушивания console.log('выбран прямоугольник' }); var Circle = new Fabric.Circle({ radius: 75, fill: 'blue'); }); Circle.on('selected', function() { console.log('выделен круг'); }); Canvas.add(rect); Canvas.add(circle);Примечание. Обычно используемые события мониторинга следующие:
after:render : после перерисовки холстаobject:selected : объект выбран.object:moving : перемещение объектаobject:rotating : Объект вращается.object:added : Объект добавлен.object:removed : Объект удален.new Fabric.Group(): принимает два параметра: массив, состоящий из имен объединяемых объектов, и общих атрибутов объединяемых объектов.
var Canvas = new Fabric.Canvas('canvas'); var Circle = new Fabric.Circle({//Нарисуйте круг радиусом: 100, заливка: '#f00', масштабY: 0,5, originX: 'center',// Отрегулируйте координату центральной точки originY по оси X: 'center'//Отрегулируйте координату центральной точки по оси Y}); var text = new Fabric.Text('Hello World', {//Draw text FontSize: 30, originX: 'center', originY: 'center' }) //Объединяем var group = new Fabric.Group([circle, text], { left: 150, top: 100, angular: 10 }) Canvas.add ( группа); Сериализация и десериализациясериализация
var Canvas = новая ткань.Canvas('canvas'); var rect = новая ткань.Rect({ ширина: 100, высота: 100, заливка: 'красный' }); .stringify(canvas.toJSON()));Десериализация
var Canvas = новая ткань.Canvas('canvas'); Canvas.loadFromJSON('{objects:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var Canvas = новая ткань.Canvas('canvas'); var rect = новая ткань.Rect({ ширина: 100, высота: 100, заливка: 'красный' }); холст.добавить(rect).toSVG()); ;Справочная документация: http://fabricjs.com/articles/.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.