Введение
Что такое Fabric.js?
Fabric.js — это библиотека, упрощающая программирование на Canvas.
Fabric.js предоставляет Canvas недостающую объектную модель, парсер svg, взаимодействия и целый набор других необходимых инструментов. Поскольку Fabric.js является чужим фреймворком, официальный API запутан, а многие связанные документы в основном на английском языке, а документов не так много, поэтому эта статья призвана помочь новичкам быстро начать работу с Fabric.js в проекте и получить удовольствие от работы с ним. процесс рисования холста.
Зачем использовать Fabric.js?
Canvas предоставляет хорошие возможности холста, но API недостаточно дружелюбен. Можно рисовать простую графику, но не так удобно делать какую-то сложную графику и писать какие-то сложные эффекты. Для этой цели разработан Fabric.js, и он в основном используется для написания кода в виде объектов.
Что может Fabric.js
Создавайте и заполняйте графику (включая изображения, текст, обычную графику и сложные пути для формирования графики) на холсте. Залейте график градиентным цветом. Комбинированная графика (включая комбинированную графику, графический текст, картинки и т.п.). Задает набор графических анимаций для взаимодействия с пользователем. Создание данных JSON, SVG и т. д. Генерация объекта Canvas имеет собственную функцию перетаскивания.
Начало
Vue Project представил Fabric.js Допустим, ваш проект использует ES6 и WebPack, вы можете начать использовать Facebory.js следующим образом: 1, в командной строке:
npm install fabric（或yarn add fabric）
2. Вставьте его в файл .vue
import { fabric } from 'fabric'
3. Начните свое путешествие по Fabric.js с установленного: жизненного цикла одного файла в .vue. Примечание. Ткань по умолчанию
Модули npm создают довольно большие пакеты, если у вас есть много пакетов в Fabric.js, которые вам могут не понадобиться, и в этом случае вы можете создать свою собственную версию здесь или в командной строке.
рисовать графику
рисовать обычную графику
1. Холст заявлений
var canvas =new fabric.Canvas('main');
2. Рисование графики
var rect = new fabric.Rect({
left:100,//距离画布左侧的距离，单位是像素
top:100,//距离画布上边的距离
fill:'red',//填充的颜色
width:30,//方形的宽度
height:30//方形的高度
});
3. Добавьте графику на холст
canvas.add(rect);
Другая обычная графика:
нарисовать квадрат var rect = новая ткань.Rect
нарисовать круг var circle = новая ткань.Круг
нарисовать треугольник var треугольник = новая ткань.Треугольник
рисовать неправильные формы
Рисуйте с помощью контуров: рисуйте с помощью движения точек и линий. Рисуйте очень сложную графику с помощью линий, кривых и дуг.
В методе 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({ left: 120, top: 120,fill:'red' });
canvas.add(path);
<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,{ //设置图片位置和样子
left:100,
top:100,
width:200,
height:100,
angle:30//设置图形顺时针旋转角度
});
canvas.add(imgInstance);//加入到canvas中
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('./2.png', function(oImg) {
oImg.scale(0.1);//图片缩小10倍
canvas.add(oImg);
});
Взаимодействие Взаимодействие с холстом
canvas.add(imgInstance);//加入到canvas中
var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function(options) {
console.log(options.e.clientX, options.e.clientY)
})
Примечание. Обычно используются следующие события мониторинга:
мышь:вниз: когда мышь опущена
мышь: двигаться: когда мышь движется
мышь: вверх: когда мышь поднята
Операции над объектами на холсте
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {//选中监听事件
console.log('selected a rectangle');
});
var circle = new fabric.Circle({ radius: 75, fill: 'blue' });
circle.on('selected', function() {
console.log('selected a circle');
});
canvas.add(rect);
canvas.add(circle);
Примечание. Обычно используются следующие события мониторинга:
after:render: после перерисовки холста
object:selected: объект выбран
object:moving: объект движется
object:rotating: объект вращается
объект: добавлено: объект был добавлен
object:removed: объект был удален
комбинация
new fabric.Group(): принимает два параметра: массив имен объектов для группировки и общие свойства объектов для группировки.
var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({//绘制圆形
radius: 100,
fill: '#f00',
scaleY: 0.5,
originX: 'center',//调整中心点的X轴坐标
originY: 'center'//调整中心点的Y轴坐标
});
var text = new fabric.Text('Hello World', {//绘制文本
fontSize: 30,
originX: 'center',
originY: 'center'
})
//进行组合
var group = new fabric.Group([circle, text], {
left: 150,
top: 100,
angle: 10
})
canvas.add(group);
Сериализация и десериализация
Сериализация
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
console.log(JSON.stringify(canvas.toJSON()));
десериализовать
var canvas = new fabric.Canvas('canvas');
canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null}')
  SVG
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
canvas.add(rect);
canvas.toSVG();
Справочная документация:fabricjs.com/articles/ сегмент fault.com/ah/119000001…