Демо-примеры для изучения Fabric.js

Описание репозитория

Учиться с fabric.js лучше всего на примерах Demo, а не только изучая документацию.

Этот репозиторий содержит мои демонстрационные проекты для изучения fabric.js.

Включает в себя:

• Практическое использование основных api;
• Примеры функционального применения demo;

Изучаемые материалы

Интересные и полезные примеры статьи Fabric.js 🦄🦄🦄
| Графическое руководство | Исходный код | Использование в Vue3 | | --- | --- | --- | | Создание холста | Код | Код для Vue3 | | Установка фона холста | Код | Код для Vue3 | | Динамическое изменение размера фона | Код | Код для Vue3 | | Загрузка локального изображения на фон холста | Код | Код для Vue3 | | Создание пользовательского контекстного меню | Код | Код для Vue3 | | Замена изображения (обработка кэшированных данных) | Код | Код для Vue3 | | Удаление элемента (с анимацией) | Код | Код для Vue3 || Фон не зависит от перемещения области просмотра | Центрирование элементов | Код | Код Vue3 версия | | Отображение элементов управления вне области выреза | Код | | | Упрощение toObject | Код | | | Сохранение уровня элемента при выборе | Код | | | Сохранение уровня элемента при выборе (нажатие Alt для продолжения выбора) | Код | | | Выравнивание элементов | Код | Код Vue3 версия | | Перемещение канваса | Код | Код Vue3 версия | | Масштабирование канваса | Код | | | Управление уровнем слоев | Код | Код Vue3 версия || Перемещение объектов | Код | | Свободное рисование прямоугольников | Код | Свободное рисование прямоугольников | Код | Код Vue3 | | Свободное рисование кругов | Код | Код | Код Vue3 | | Свободное рисование эллипсов | Код | Код | Код Vue3 | | Свободное рисование треугольников | Код | Код Vue3 | | Свободное рисование линий | Код | Код Vue3 | | Свободное рисование многоугольников | Код | Код Vue3 | | Свободное рисование многоугольников | Код | Код Vue3 || Основные кисти | Код | | Основные кисти | Код | | Круглые кисти | Код | | Ручное выделение жирным шрифтом | Код | | Ручное выделение курсивом | Код | | Ручное выделение текста подчеркиванием, надчеркиванием, зачеркиванием, подчеркиванием | Код | | Надстрочные и подстрочные символы | Код | | Активация ввода в IText | Код | | Динамическое изменение размера шрифта в IText | Код |
В этом репозитории все демо разработаны с использованием нативных методов.

Если вы хотите посмотреть, как использовать fabric.js в Vue 3, то вы можете посмотреть записи по фронт-энд визуализации в этом репозитории.

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

Отличные проекты

vue-fabric-editor

Инструмент для редактирования изображений, разработанный на основе fabric.js и Vue, который позволяет пользователю настраивать шрифты, материалы, шаблоны дизайна, контекстное меню и горячие клавиши.

Автор: 「Qin Shaowei」

Репозиторий: vue-fabric-editor

О мне

Привет, я德育处主任, люблю вкусно поесть, выпить и повеселиться. Все, что не связано с работой, мне кажется интересным.

Я собираю заметки по фронт-энд визуализации, и регулярно обновляю их на 掘金, CSDN и 思否.

Если вам это подходит, вы можете зайти на мой страницу на掘金 и оставить лайк~, или на других платформах тоже подойдет. Спасибо🌷

Мой подписной канал (директор отдела воспитательной работы) был приостановлен на долгое время, но у меня есть планы его возобновить. Я планирую собрать каждый изученный мной пакет в отдельный раздел, чтобы вместе с вами постепенно получать новые знания~

В конце концов, если вы считаете, что мои статьи помогли вам, вы можете угостить мою кошку банкой консервы~