CanvasМожно сказать, что рождение технологии сделало технологию рисования еще более мощной.Canvas图形绘制、流程图、组织图、甘特图、全景图、3D库、VR/AR、图像编辑и другие библиотеки, я надеюсь помочь вам найти удобный инструмент для рисования на Canvas.
В то же время молоток такжеCanvasСвязанные ресурсыawesome-canvas, адрес проектаGitHub.com/Чайна Берг/Ах…. В настоящее время библиотека находится на постоянном обслуживании и была включена около200+изCanvas库,так же как资源网址、插件、书籍、博客и другие ресурсы.
графическая библиотека
Рисование графики — это самый основной контент в Canvas, но API, предоставляемый самим Canvas, является относительно простым и неэффективным для разработки. В нем также отсутствует полная система событий, мониторинг области, кэширование и многое другое. Давайте рассмотрим несколько эффективных библиотек обработки графики.
Konva
Введение:KonvaЭто среда HTML5 Canvas JavaScript, которая позволяет рабочему столу и мобильному Canvas поддерживать интерактивность, расширяя 2D-контекст Canvas, позволяя ему поддерживать высокопроизводительную анимацию, переходы, вложение узлов, наслоение, фильтрацию, кэширование, обработку событий и многое другое.Портал Конва
В дополнение к вышесказанному, документация относительно дружелюбна, но настолько же дружелюбна, как и документация подобных библиотек.Сообщество поддерживает документ на китайском языке.
fabric.js
Введение:Fabric.jsЭто фреймворк, который может легко обрабатывать элементы HTML5 Canvas, обеспечивая поддержку элементов Canvas.Интерактивная объектная модель, а такжеSVG-to-Canvasа такжеCanvas-to-SVGпарсерпортал Fabric.js
Fabricjs — это библиотека Canvas того же типа, что и konva, но более старая, чем konva.В настоящее время количество звезд на github
больше примеровКак показано ниже:
Дополнительные ресурсы по графике Canvas см. на страницеawesome-canvas, адрес проектаGitHub.com/Чайна Берг/Ах…
редактирование изображений
Как всем известно, на рынке существует множество программ для редактирования изображений.PS、sketch、axure、激萌、剪映и т.п. Итак, если мы хотим разработать подобное программное обеспечение, есть ли какая-либо библиотека или справочное программное обеспечение с открытым исходным кодом, которое можно использовать?
miniPaint
Введение:miniPaint [онлайн демо] - 在线版的PS。 PS这款软件大家都不陌生，web版本的如何呢？ Пожалуйста, посмотрите на изображение ниже:
DarkroomJS
Введение:DarkroomJS [онлайн демо] — Расширяемый инструмент редактирования изображений на стороне браузера на основе Fabricjs.
fabric-brush
Введение:fabric-brush [онлайн демо] — Инструмент «Кисть холста» на основе Fabric.js
fabricjs-image-editor-origin
Введение:fabricjs-image-editor-origin [онлайн демо] - Редактор изображений Fabricjs
react-sketch
Введение:react-sketch [онлайн демо] — Sketch-приложение на основе React и Fabricjs
glitch-canvas
Введение:glitch-canvas [онлайн демо] — добавить эффект сбоя к элементу холста.
animockup
Введение:animockup [онлайн демо] - Создавайте анимированные модели в браузере и экспортируйте их в виде видео или анимированных GIF-файлов.
Дополнительные ресурсы по редактированию изображений/монтажным областям Canvas см. на страницеawesome-canvas, адрес проектаGitHub.com/Чайна Берг/Ах…
Физический движок
Физический движок использует такие переменные, как масса, скорость, трение и сопротивление воздуха, для имитации почти реальной физической системы, придавая твердым объектам реальные физические эффекты, такие как гравитация, вращение и столкновение, чтобы объекты вели себя более реалистично. Например, когда герой Overwatch прыгает, заданные системой параметры гравитации определяют, как высоко он может прыгнуть, как быстро он падает, траекторию полета пуль и так далее.
matter.js
Введение:matter.jsэто библиотека 2D-физического движка JavaScript для Интернета.Портал Matter.js
matter.jsПо сравнению со старой движковой библиотекой Box2D она более легковесная (сжатая версия всего 87 КБ), не уступает по производительности и функциональности.
Дополнительные ресурсы по физическому движку Canvas см. на страницеawesome-canvas, адрес проектаGitHub.com/Чайна Берг/Ах…
Редактирование блок-схем/организационных диаграмм/диаграмм и т. д.
Разработка промышленного программного обеспечения всегда была сложной и важной частью области программного обеспечения. Если его требования к техническим специалистам выше, давайте взглянем на библиотеки или эталонные сценарии, которые могут помочь нам в быстрой разработке.
gojs
Введение:gojsЭто библиотека диаграмм JavaScript, которая может легко разрабатывать интерактивные блок-схемы, организационные диаграммы, инструменты проектирования, инструменты планирования и визуальные языки.портал gojs.js
- GoJS упрощает узлы, ссылки и группировку с помощью настраиваемых шаблонов и компонентов макета.
- Предоставляет множество расширенных функций для взаимодействия с пользователем, таких как перетаскивание, копирование, вставка, редактирование текста, всплывающие подсказки, контекстные меню, автоматическая компоновка, шаблоны, привязка данных и модели, состояние транзакций и управление отменой, палитры, обзоры, расширенная система инструментов. для обработчиков событий, команд и пользовательских действий.
Документация содержит рядdemoДля справки, он в основном охватывает все распространенные программы редактирования диаграмм.
butterfly
Введение:butterfly [онлайн демо] Библиотека компонентов оркестровки, управляемая данными, на основе JS, одновременно подходящая для компонентов React/Vue2.
- Богатая ДЕМО, из коробки
- Комплексное управление холстом, разработчикам нужно только больше сосредоточиться на индивидуальных потребностях.
- Используйте DOM/REACT/VUE для настройки элементов; гибкость, пластичность и превосходная масштабируемость.
- Предоставляются документы на китайском языке, что очень приятно для друзей, плохо владеющих английским языком.
wireflow
Введение:wireflow [онлайн демо] Пользовательский инструмент для совместной работы в режиме реального времени.
- Wireflow предлагает более 100 пользовательских графических карт/карт, охватывающих большинство веб-элементов, взаимодействий и вариантов использования.
- Wireflow ориентирован на сотрудничество. Вы можете пригласить своих коллег для разработки пользовательского потока вашего следующего проекта вместе с ними в режиме реального времени.
- Он имеет встроенный чат, позволяющий вам общаться с товарищами по команде, оставаясь в том же приложении, что и вы, сотрудничая в режиме реального времени.
flowy
Введение:Flowy [онлайн демо] — Минимальная библиотека javascript для создания блок-схем. Делает создание веб-приложения с блок-схемами очень простой задачей. Тонг может за считанные минуты создать программное обеспечение для автоматизации, инструменты составления карт памяти или простые платформы для программирования.
- Отзывчивое перетаскивание, автоматическая привязка, автоматическая прокрутка
- Перестановка блоков, удаление блоков, автоматическое центрирование блоков
- Условный захват, удаление условного блока, отсутствие зависимостей
Workflow Designer
Введение:Workflow Designer [Онлайн-пример] - Визуальный редактор процессов на основе G6 и React.
web-pdm
Введение:web-pdm [Онлайн-пример] — Инструмент ER-диаграммы, созданный с помощью G6, конечной целью является создание онлайн-версии powerdesigner.
X-Flowchart-Vue
Введение:X-Flowchart-Vue [онлайн демо] — Визуальный графический редактор на основе G6 и Vue.
OrgChart
Введение:OrgChart [онлайн демо] — Простой и понятный плагин организационной диаграммы
welabx-g6
Введение:welabx-g6 [Онлайн-пример] — Редактор блок-схем на основе G6 и Vue.
Дополнительные ресурсы по редактированию диаграмм Canvas см. на страницеawesome-canvas, адрес проектаGitHub.com/Чайна Берг/Ах…
Панорама/AR/VR
Популярность 5g, приземление виртуальной реальности/дополненной реальности, популярность метавселенной… Кажется, что Canvas снова выдвинули на пик технологий. Позвольте мне взглянуть на общие библиотеки Canvas для разработки этих сценариев.
Pannellum
Введение:Pannellum [онлайн демо] - Легкая бесплатная программа для просмотра веб-панорам с открытым исходным кодом.
Panolens.js
Введение:Panolens.js [онлайн демо] - Panolens.js основан на Three.JS, и его основными областями исследований являются панорама, виртуальная реальность и потенциально дополненная реальность.
JS-Cloudimage-360-View
Введение:JS-Cloudimage-360-View [онлайн демо] Простой интерактивный ресурс, который можно использовать для виртуального тура по вашему продукту.
A-Frame
Введение:A-Frame [онлайн демо] Помимо помощи в создании медиаплеера с обзором на 360 градусов, A-Frame предлагает множество дополнительных функций. Дополнительные функции помогут вам улучшить взаимодействие с виртуальной реальностью на вашем веб-сайте.
Дополнительные ресурсы о панораме Canvas/AR/VR см. на страницеGithubадрес проектаawesome-canvas.
3D-библиотека
three.js
Введение:three.js [онлайн демо] — Создайте простую в использовании, легкую, кросс-браузерную библиотеку 3D js общего назначения. Three.js не будет представлен много, все должны быть знакомы с ним.
zdog
Введение:zdog [онлайн демо] - Удобный для дизайнеров псевдо-3D-движок на основе холста и SVG.
seen.js
Введение:seen [онлайн демо] — Рендеринг 3D-сцен с использованием SVG или Canvas.
Oimo.js
Введение:Oimo.js [онлайн демо] - Легкий физический движок JS 3D.
phoria.js
Введение:phoria.js [онлайн демо] — библиотека JavaScript для простой 3D-графики и визуализации на 2D-рендерере холста HTML5. Он не использует WebGL. Работает со всеми браузерами HTML5, включая настольные компьютеры, iOS и Android.
Дополнительные ресурсы по Canvas 3D см. на страницеawesome-canvas, адрес проектаGitHub.com/Чайна Берг/Ах…
конец
Сотни футов и дальше прогресс, я твой старый друг Ленг Хаммер 😊.
awesome-canvasБыло тщательно собрано более 200 библиотек Canvas и соответствующих ресурсов, охватывающих почти все аспекты разработки Canvas, и они все еще собираются и поддерживаются. Если ваши друзья считают, что коллекция неплохая, пожалуйста, дайте звезду, чтобы поддержать ее.
наконец,Онета ТехнологииКоманда фронтенда в настоящее время расширяет набор сотрудников, и большое количество вакансий HC расположено в Цзинъане, Шанхай. Компания в основном производит продукты, связанные с большими данными и цифровым интеллектом RPA, включая компиляцию Antlr, движок изображений и так далее. Добро пожаловать, друзья, свяжитесь со мной или отправьте свое резюме, я с нетерпением жду вашего присоединения ~ Электронная почта:berg.liu@1data.info