Играйте с холстом с помощью Fabric.js

Canvas

предисловие

Ранее использовал эту структуру для написания проекта DIY карты, средние встречи, многие проблемы могут быть решены только по проблемам Google или GitHub, внутренняя информация меньше, поэтому я хочу написать эту статью, чтобы сделать резюме, надеюсь, может помочь другие люди.

Прикрепите личный адрес проекта:vue-card-diyДобро пожаловать, звезда~ ✨

Что такое Fabric.js?

Fabric.jsЭто мощная структура холста H5, которая предоставляет интерактивную объектную модель поверх собственного холста и может выполнять сложные операции на холсте через краткий API.

Фреймворк является проектом с открытым исходным кодом, адрес проекта:github

Что делает Fabric.js?

Используя Fabric.js, вы можете создавать и заполнять объекты на холсте, такие как простые геометрические фигуры — прямоугольники, круги, эллипсы, многоугольники, пользовательские изображения или более сложные формы, состоящие из сотен или тысяч простых контуров. Кроме того, эти объекты можно масштабировать, перемещать и вращать с помощью мыши, изменять их свойства - цвет, прозрачность, z-индекс и т.д. Вы также можете группировать объекты на холсте. Ниже я представлю свои часто используемые функции и сценарии, другие функции могут относиться кофициальная документация

Установить

установка нпм

npm install fabric --save

ссылка через cdn

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

инициализация

Во-первых, напишите тег холста 350 x 200 на странице html.Вы можете установить ширину и высоту с помощью js позже.

<canvas id="canvas" width="350" height="200"></canvas>

Инициализировать тканьобъект холста, создать карту (используется позжеcardпредставляет объект холста)

const card = new fabric.Canvas('canvas') 

// ...这里可以写canvas对象的一些配置，后面将会介绍

// 如果<canvas>标签没设置宽高，可以通过js动态设置
card.setWidth(350)
card.setHeight(200)

Это так просто, это создает базовый холст.

начать работу с шаблоном

Отслеживание событий на холсте

Официальный предоставляет множество событий, обычно используются следующие события:

  • object:addedдобавить слой
  • object:modifiedРедактировать слои
  • object:removedудалить слой
  • selection:createdВыберите слой в первый раз
  • selection:updatedИзменения выбора слоя
  • selection:clearedочистить выделение слоя
// 在canvas对象初始化后，通过以下方式监听
// 比如监听画布的图层编辑事件
card.on('object:modified', (e) => {
    console.log(e.target) // e.target为当前编辑的Object
    // ...旋转，缩放，移动等编辑图层的操作都监听到
    // 所以如果有撤销/恢复的场景，这里可以保存编辑状态
});

установить фон холста

// 读取图片地址，设置画布背景
fabric.Image.fromURL('xx/xx/bg.jpg', (img) => {
  img.set({
   // 通过scale来设置图片大小，这里设置和画布一样大
    scaleX: card.width / img.width,
    scaleY: card.height / img.height,
  });
  // 设置背景
  card.setBackgroundImage(img, card.renderAll.bind(card));
  card.renderAll();
});

Если вы хотите установить цвет фона холста, вы можете установить его при инициализации холста.

const card = new fabric.Canvas('canvas', {
  backgroundColor: 'blue' // 画布背景色为蓝色
});

// 或者
card.backgroundColor = 'blue';

// 或者
card.setBackgroundColor('blue');

Добавьте объект слоя на холст

Fabric.js предоставляет множество объектов в дополнение к основнымRect,Circle,Line,Ellipse,Polygon,Polyline,TriangleКроме объекта есть ещеImage,Textbox,Groupи другие более продвинутые объекты, они унаследованы от FabricОбъект.

Ниже я расскажу, как добавлять изображения и текст, другие объекты аналогичны

/**
* 如何向画布添加一个Image对象？
*/

// 方式一（通过img元素添加）
const imgElement = document.getElementById('my-image');
const imgInstance = new fabric.Image(imgElement, {
  left: 100, // 图片相对画布的左侧距离
  top: 100, // 图片相对画布的顶部距离
  angle: 30, // 图片旋转角度
  opacity: 0.85, // 图片透明度
  // 这里可以通过scaleX和scaleY来设置图片绘制后的大小，这里为原来大小的一半
  scaleX: 0.5, 
  scaleY: 0.5
});
// 添加对象后, 如下图
card.add(imgInstance);


// 方式二（通过图片路径添加）
fabric.Image.fromURL('xx/xx/vue-logo.png', (img) => {
  img.set({
    hasControls: false, // 是否开启图层的控件
    borderColor: 'orange', // 图层控件边框的颜色
  });
  // 添加对象后, 如下图
  canvas.add(img);
});


/**
* 如何向画布添加一个Textbox对象？
*/

const textbox = new fabric.Textbox('这是一段文字', {
    left: 50,
    top: 50,
    width: 150,
    fontSize: 20, // 字体大小
    fontWeight: 800, // 字体粗细
    // fill: 'red', // 字体颜色
    // fontStyle: 'italic',  // 斜体
    // fontFamily: 'Delicious', // 设置字体
    // stroke: 'green', // 描边颜色
    // strokeWidth: 3, // 描边宽度
    hasControls: false,
    borderColor: 'orange',
    editingBorderColor: 'blue' // 点击文字进入编辑状态时的边框颜色
});
// 添加文字后，如下图
card.add(textbox);

Получить текущий выбранный объект слоя

// 方式一
this.selectedObj = card.getActiveObject(); // 返回当前画布中被选中的图层 

// 方式二
card.on('selection:created', (e) => {
    // 选中图层事件触发时，动态更新赋值
    this.selectedObj = e.target
})

Повернуть слой

// 顺时针90°旋转
const currAngle = this.selectedObj.angle; // 当前图层的角度
const angle = currAngle === 360 ? 90 :currAngle + 90;
this.selectedObj.rotate(angle);
// 如果是通过滑块的方式控制旋转
// this.selectedObj.rotate(slideValue);

// 所有图层的操作之后，都需要调用这个方法
card.renderAll()

Отразить слой

// 水平翻转，同理垂直翻转改为scaleY属性
this.selectedObj.set({
    scaleX: -this.selectedObj.scaleX,
})

card.renderAll()

удалить слой

card.remove(this.selectedObj) // 传入需要移除的object
card.renderAll()

Управление иерархией слоев на холсте

Добавьте слои на холст, по умолчанию они располагаются последовательно, но когда вы выбираете слой для входаactiveКогда он находится в состоянии, слой будет помещен на верхний слой по умолчанию.Если он указан, когда выбранный слой отключен, вы можете:

// 在画布初始化后设置
card.preserveObjectStacking = true // 禁止选中图层时自定置于顶部

После настройки я выбрал вот такой логотип vue, он не будет прилипать к верху.

Как перемещать слои вверх и вниз?

// 上移图层
this.selectedObj.bringForward();

// 下移图层
this.selectedObj.sendBackwards();

// 也可以使用canvas对象的moveTo方法，移至图层到指定位置
card.moveTo(object, index);

Рекорд состояния холста

Рамки обеспечиваютtoJSONа такжеloadFromJSONФункции должны экспортировать информацию JSON текущего холста и загрузить информацию JSON Canvas для восстановления состояния Canvas.

// 导出当前画布信息
const currState = card.toJSON(); // 导出的Json如下图


// 加载画布信息
card.loadFromJSON(lastState, () => {
  card.renderAll();
});

Экспортировать холст как изображение

const dataURL = card.toDataURL({
  format: 'jpeg', // jpeg或png
  quality: 0.8 // 图片质量，仅jpeg时可用
  // 截取指定位置和大小
  //left: 100, 
  //top: 100,
  //width: 200,
  //height: 200
});

Базовое введение в Fabric.js находится здесь.Этот фреймворк очень мощный, и есть много функций, которые можно попробовать.Комментарии и обмен мнениями приветствуются!

При перепечатке этой статьи просьба указывать автора и источник статьи!

Категории