Fabric.js, который должен знать каждый небольшой партнер, использующий холст.

внешний интерфейс Canvas
Fabric.js, который должен знать каждый небольшой партнер, использующий холст.

Это второй день моего участия в августовском испытании обновлений.Подробности о событии смотрите:​Испытание августовского обновления

Введение

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

Fabric.js — это мощная и простая библиотека холста Javascript HTML5. Fabric предоставляет интерактивную объектную модель поверх элементов холста. Fabric также имеет парсер SVG-to-canvas (и canvas-to-SVG).

为了方便,下面我将通过 vue项目 为大家讲解如何使用 Fabric

1. Установка

yarn add fabric -S
#or
npm i fabric -S

также доступен вОфициальный сайтЗагрузите последний файл js и импортируйте его через тег script.

2. Используйте

<!-- html -->
<canvas id="canvas" width="500" height="500"></canvas>

2.1 Нарисуйте простой график

Ткань обеспечивает 7 базовых форм:

  • ткань.Круг(круг)
  • ткань.Эллипс (эллипс)
  • ткань.Линия (Линия)
  • Fabric.Polyline (несколько линий рисуются на графике)
  • ткань.треугольник(треугольник)
  • ткань.Прямая(прямая)
  • ткань.Полигон (многоугольник)
  • прямоугольник
// js

//引入fabric
import { fabric } from "fabric";

// 创建一个fabric实例
let canvas = new fabric.Canvas("canvas"); //可以通过鼠标方法缩小,旋转
// or
// let canvas = new fabric.StaticCanvas("canvas");//没有鼠标交互的fabric对象

// 创建一个矩形对象
let rect = new fabric.Rect({
    left: 200, //距离左边的距离
    top: 200, //距离上边的距离
    fill: "green", //填充的颜色
    width: 200, //矩形宽度
    height: 200, //矩形高度
});

// 将矩形添加到canvas画布上
canvas.add(rect);

Вы можете видеть, что интерфейс заполнен зеленым прямоугольником, который можно увеличивать и уменьшать с помощью мыши и вращать.
Очень удобно настраивать стили элементов в виде объектов!

  • круг и треугольник
// 创建一个圆形对象
let circle = new fabric.Circle({
    left: 0, //距离左边的距离
    top: 0, //距离上边的距离
    fill: "red", //填充的颜色
    radius: 50, //圆的半径
});
// 创建一个三角形对象
let triangle = new fabric.Triangle({
    left: 200, //距离左边的距离
    top: 0, //距离上边的距离
    fill: "blue", //填充的颜色
    width: 100, //宽度
    height: 100, //高度
});
// 将图形形添加到canvas画布上
canvas.add(circle, triangle);

Мы можем установить следующие свойства, чтобы решить, можем ли мы взаимодействовать со связанными элементами.

canvas.selection = false; // 禁止所有选中
rect.set("selectable", false); // 只是禁止这个矩形选中

2.2 Рисование картинок

В основном есть два способа рисовать через теги url и img.

//通过url绘制图片
fabric.Image.fromURL(
    //本地图片需要通过require来引入,require("./xxx.jpeg")
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.thaihot.com.cn%2Fuploadimg%2Fico%2F2021%2F0711%2F1625982535739193.jpg&refer=http%3A%2F%2Fimg.thaihot.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630940858&t=e1d24ff0a7eaeea2ff89cedf656a9374",
    (img) => {
        img.scale(0.5);
        canvas.add(img);
    }
);
//也可以通过标签绘制
let img = document.getElementById("img");
let image = new fabric.Image(img, {
    left: 100,
    top: 100,
    opacity: 0.8,
});
canvas.add(image);

2.3 Рисование по пользовательскому пути

Перед этим нам нужно понять значение нескольких параметров

  • M : "переместиться" в точку
  • L : "линия" рисует линию x,y
  • C : "кривая" кривая
  • A : "дуга" дуга
  • z : закрытый путь (аналогично созданию выделения в PS)
let customPath = new fabric.Path("M 0 0 L 300 100 L 170 100  z");
customPath.set({
    left: 100,
    top: 100,
    fill: "green",
});
canvas.add(customPath);


let customPath = new fabric.Path(
    "M 0 0 L 300 100 L 170 100 L 70 300 L 20 200 C136.19,2.98,128.98,0,121.32,0 z"
);

Видно, что через отрисовку пути мы можем сделать очень сложную графику (но вообще не используемую, обычно используем для разбора SVG и получения пути для восстановления графики)

2.4 Анимация

Первый параметр — это свойства анимации, второй параметр — конечная позиция анимации, а третий параметр — необязательный объект, определяющий детали анимации: продолжительность, обратный вызов, анимация и т. д.

Третий параметр в основном

  • продолжительность по умолчанию 500 мс. Может использоваться для изменения продолжительности анимации.
  • from позволяет указать начальное значение свойства анимации (если мы не хотим использовать текущее значение).
  • Обратный вызов onComplete после окончания анимации.
  • функция смягчения анимации.

2.41 Абсолютная анимация

let canvas = new fabric.Canvas("canvas");
let rect = new fabric.Rect({
    left: 400, //距离左边的距离
    top: 200, //距离上边的距离
    fill: "green", //填充的颜色
    width: 200, //宽度
    height: 200, //高度
});
rect.animate("left", 100, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
});
canvas.add(rect);

2.42 Относительная анимация (второй параметр определяет конечный эффект анимации через +=, -= и т.д.)

rect.animate("left", "+=100", {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
});


rect.set({ angle: 45 });
rect.animate("angle", "-=90", {
onChange: canvas.renderAll.bind(canvas),
duration: 2000,
});

2.43 Определение функции анимации

По умолчанию анимации выполняются с использованием анимации «easeInSine». Если это не то, что вам нужно, ткань предоставляет нам множество встроенных анимационных эффектов, а в Fabric.util.ease есть множество вариантов анимации.
Обычно используютсяeaseOutBounce,easeInCubic,easeOutCubic,easeInElastic,easeOutElastic,easeInBounceа такжеeaseOutExpoЖдать

rect.animate("left", 100, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
    easing: fabric.util.ease.easeOutBounce,
});

2.5 Фильтры изображений

В настоящее время Fabric предоставляет нам следующие встроенные фильтры.

  • Базовый фильтр BaseFilter
  • Размытие
  • Яркость
  • Цветовая матрица ColorMatrix
  • Контрастность контрастности
  • Свернутая свертка
  • Гамма
  • Оттенки серого
  • HueRotation Поворот оттенка
  • инвертировать
  • Шум
  • Pixelate Pixelated
  • RemoveColor удалить цвет
  • изменить размер изменить размер
  • Насыщенность

2.51 Одиночный фильтр

fabric.Image.fromURL(require("./aaa.jpeg"), (img) => {
    img.scale(0.5);
    canvas.add(img);
});
fabric.Image.fromURL(require("./aaa.jpeg"), (img) => {
    img.scale(0.5);
    // 添加滤镜
    img.filters.push(new fabric.Image.filters.Grayscale());
    // 图片加载完成之后，应用滤镜效果
    img.applyFilters();
    img.set({
        left: 300,
        top: 250,
    });
    canvas.add(img);
});

2.52 Фильтр наложения

Свойство «filters» представляет собой массив, и мы можем использовать методы массива, чтобы делать все, что захотим: удалять фильтры (выталкивать, объединять, сдвигать), добавлять фильтры (проталкивать, не сдвигать, объединять) и даже комбинировать несколько фильтров. Когда мы вызываем applyFilters, любые фильтры, присутствующие в массиве «filters», будут применяться один за другим, поэтому давайте попробуем создать изображение, которое будет одновременно и цветовым оттенком, и яркостью.

fabric.Image.fromURL(require("./aaa.jpeg"), (img) => {
    img.scale(0.5);
    // 添加滤镜
    img.filters.push(
        new fabric.Image.filters.Grayscale(),
        new fabric.Image.filters.Sepia(), //色偏
        new fabric.Image.filters.Brightness({ brightness: 0.2 }) //亮度
    );
    // 图片加载完成之后，应用滤镜效果
    img.applyFilters();
    img.set({
        left: 300,
        top: 250,
    });
    canvas.add(img);
});

Мы можем видеть эффект наложения нескольких фильтров, конечно, Fabric также поддерживает пользовательские фильтры, в этой статье я обновлю лесть после 500 старших частей ткани, спасибо за вашу поддержку ~

2.6 Цвет

Независимо от того, работаете ли вы с шестнадцатеричными цветами, цветами RGB или RGBA, ткань отлично справляется с этим.

2.61 Определение цветов

new fabric.Color("#f55");
new fabric.Color("#aa3123");
new fabric.Color("356333");
new fabric.Color("rgb(100,50,100)");
new fabric.Color("rgba(100, 200, 30, 0.5)");

2.62 Преобразование цвета

new fabric.Color('#f55').toRgb(); // "rgb(255,85,85)"
new fabric.Color('rgb(100,100,100)').toHex(); // "646464"
new fabric.Color('fff').toHex(); // "FFFFFF"

Мы также можем наложить другой цвет или преобразовать его в версию в оттенках серого.

let redish = new fabric.Color("#f55");
let greenish = new fabric.Color("#5f5");
redish.overlayWith(greenish).toHex(); // "AAAA55"
redish.toGrayscale().toHex(); // "A1A1A1"

2.7 Градиенты

Fabric поддерживает градиенты с помощью метода setGradient, определенного для всех объектов. Вызов setGradient('fill', { ... }) подобен установке значения "fill" объекта.

let circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50
});

circle.setGradient("fill", {
    // 渐变开始的位置
    x1: 0,
    y1: 0,
    // 渐变结束的位置
    x2: circle.width,
    y2: 0,
    //渐变的颜色
    colorStops: {
        // 渐变的范围(0,0.1,0.3,0.5,0.75,1)0-1之间都可以
        0: "red",
        0.2: "orange",
        0.4: "yellow",
        0.6: "green",
        0.8: "blue",
        1: "purple"
    },
});

2.8 Текст

Объект Fabric.Text предоставляет более богатые функциональные возможности, чем холст для текста, в том числе:

  • Многострочная поддержка Многострочная поддержка К сожалению, собственный текстовый метод игнорирует создание новой строки.
  • Выравнивание текста Выравнивание текста по левому краю, по центру, по правому краю. Полезно при работе с несколькими строками текста.
  • Текстовый фон Текстовый фон Фон также поддерживает выравнивание текста.
  • Оформление текста Оформление текста Подчеркивание, надчеркивание, сквозная линия.
  • Высота строки Высота строки полезна при работе с несколькими строками текста.
  • Интервал между символами Делает текст более плотным или большим.
  • Поддиапазоны Поддиапазоны Применяет цвета и свойства к подобъектам текстовых объектов.
  • Multibyte Multibyte поддерживает эмодзи.
  • Интерактивное редактирование на холсте Редактирование на холсте позволяет вводить текст прямо на холсте.
let text = new fabric.Text(
    "大家好~这里是前埔寨\n我是荣顶~\n一个要成为开发王的男人!",
    {
        left: 0,
        top: 200,
        fontFamily: "Comic Sans", //字体
        fontSize: 50, //字号
        fontWeight: 800, //字体粗细,可以使用关键字（“normal”，“bold”）或数字（100,200,400,600,800）
        shadow: "green 3px 3px 2px", //文字阴影,颜色，水平偏移，垂直偏移和模糊大小。
        underline: true, //下划线
        linethrough: true, //删除线
        overline: true, //上划线
        fontStyle: "italic", //字体风格,normal（正常）或italic（斜体）
        stroke: "#c3bfbf", //描边的颜色
        strokeWidth: 1, //描边的宽度
        textAlign: "center", //文本对齐方式
        lineHeight: 1.5, //行高
        textBackgroundColor: "#91A8D0", //文本背景颜色
    }
);
canvas.add(text);

2.9 События

В Fabric метод on используется для инициализации события, а метод off — для его удаления.

Общие события следующие

  • "mouse:down" нажата мышь
  • объект "object:add" добавлен
  • Рендеринг "after:render" завершен

И еще куча всего:
События мыши: "mouse:down", "mouse:move" и "mouse:up..." События, связанные с выбором: «before:selection:cleared», «selection:created», Подробности можно посмотретьофициальная документация

canvas.on("mouse:down", function(options) {
    canvas.clear();
    let text = new fabric.Text("你点我啦~", {
        left: 200,
        top: 200,
    });
    canvas.add(text);
    console.log(options.e.clientX, options.e.clientY);
});
canvas.on("mouse:up", function(options) {
    this.text = "你没点我0.0";
    canvas.clear();
    let text = new fabric.Text("你没点我0.0", {
        left: 200,
        top: 200,
    });
    canvas.add(text);
    console.log(options.e.clientX, options.e.clientY);
});

Ткань позволяет слушателю прикрепляться непосредственно к холсту в объекте холста.

let rect = new fabric.Rect({ width: 100, height: 50, fill: "green" });
rect.on("selected", function() {
    console.log("哦吼~你选择了我");
});

let circle = new fabric.Circle({ radius: 75, fill: "blue" });
circle.on("selected", function() {
    console.log("哈哈哈~你选择了我");
});

3.0 Бесплатная живопись

Для свойства isDrawingMode холста Fabric можно установить значение true, чтобы реализовать свободный режим рисования.
Таким образом, щелчки и движения по холсту сразу интерпретируются как карандаши или кисти.

let canvas = new fabric.Canvas("canvas");
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "blue";
canvas.freeDrawingBrush.width = 5;

3. Наконец

Я очень рад написать эту статью.Это статья, которую я использовал, чтобы обобщить знания о ткани, и я очень внимателен.Я надеюсь, что эта статья будет вам полезна.В настоящее время ткань не очень популярна в Китае, но он уже есть на гитхабе, 19,2 тысячи звезд, и его можно считать звездным проектом, мы часто используем холст в нашей повседневной разработке, но его API будет очень утомительным для работы со сложной бизнес-логикой, поэтому я делюсь этой статьей , надеясь помочь всем. Полезно, как и более 500, я обновлю расширенную статью о Fabric.js, спасибо за вашу поддержку!

Я Жундин, и я рад быть здесь с вами, чтобы стать сильнее! ВместеУдачного программирования!😉

Если вы также любите технологии, связанные с интерфейсом! Добро пожаловать в мой маленький секретный круг~ 🦄 Нажмите →здесь

Категории