Recommend a large wave of Canvas libraries that make you wow

CanvasThe birth of technology can be said to make drawing technology even more powerful. This article will recommend a series of Canvas图形绘制、流程图、组织图、甘特图、全景图、3D库、VR/AR、图像编辑libraries and other aspects, hoping to help you find a handy tool when drawing on Canvas.

At the same time, it will also Canvascollect and classify related resources. For more resources, please pay attention to awesome-canvas[1], and the project address is github.com/chinaBerg/a...[2]. At present, the library is under continuous maintenance, and has included about 200+, Canvas库and 资源网址、插件、书籍、博客other resources.

graphics processing library

Graphics drawing is the most basic content in Canvas, but the API provided by Canvas itself is relatively basic and inefficient to develop. It also lacks a full event system, region monitoring, caching, etc. Let's take a look at several efficient graphics processing libraries.

suitable

Introduction: KonvaIt is an HTML5 Canvas JavaScript framework. By extending the 2D Context of Canvas, it enables desktop and mobile Canvas to support interactivity, enabling it to support high-performance animation, transition, node nesting, layering, filtering, caching, event handling, etc. .

fabric.js

Introduction: Fabric.js is a framework that can easily handle HTML5 Canvas elements, enabling Canvas elements to support interactive object models. It is also a SVG-to-Canvas and Canvas-to-SVG parser fabric.js portal[4]

The actual column is shown in the figure below:

image editing

There are many image editing software on the market, such as the well-known ones PS、sketch、axure、激萌、剪映and so on. So if we want to develop similar software, is there any library or reference open source software that can be used?

MiniPaint

Introduction: miniPaint - online version of PS.

DarkroomJS

Introduction: DarkroomJS - Browser-side extensible image editing tool based on Fabricjs

fabric-brush

Introduction: fabric-brush - Canvas brush tool based on Fabric.js

fabricjs-image-editor-origin

Introduction: fabricjs-image-editor-origin - Fabricjs image editor

react-sketch

Introduction: react-sketch - a sketch application based on React and Fabricjs

glitch-canvas

Introduction: glitch-canvas- Add glitch effect to canvas elements

animockup

Brief: animockup - Create animated models in the browser and export as video or animated GIF

physics engine

The physics engine uses variables such as mass, speed, friction, and air resistance to simulate an approximate real physical system, giving real physical effects to rigid objects, such as gravity, rotation, and collision, so that the behavior of the object is more tended to reality. For example, when the Overwatch hero jumps, the gravity parameters set by the system determine how high he can jump, how fast he falls, the trajectory of the bullet, and so on.

matter.js

Introduction: matter.js is a JavaScript 2D physics engine library for the Web matter.js Portal[24]

matter.js[25] is more lightweight than the old Box2D engine library (the compressed version is only 87 KB), and it is not inferior in terms of performance and functions.

Flow chart/organization chart/diagram editing, etc.

Industrial software development has always been a complex and important part of the software field. If it has higher requirements for technical personnel, let's see what libraries or reference scenarios can assist us in rapid development.

gojs

Introduction: gojs is a JavaScript chart library that can easily develop interactive flowcharts, organizational charts, design tools, planning tools, and visual languages. gojs.js portal[28]

GoJS simplifies nodes, links and grouping with custom templates and layout components.
Provides many advanced features for user interaction, such as drag and drop, copy, paste, text editing, tooltips, context menus, auto layout, templates, data binding and models, transaction state and undo management, palettes, overviews, Extensible tools system for event handlers, commands and custom actions.

The document provides a large number of demos[29] for reference, basically covering all common graph editing programs.

butterfly

Introduction: butterfly is a JS-based data-driven node-style layout component library, which is also suitable for React/Vue2 components.

Rich DEMO, out of the box
All-round management of the canvas, developers only need to focus more on customized needs
Use DOM/REACT/VUE to customize elements; flexibility, plasticity, and scalability
Chinese documents are provided, which is very nice for friends who are not good at English

wireflow

Introduction: Wireflow is a real-time collaboration tool for user flowcharts.

Wireflow has over 100 custom built graphics/cards available, covering most web elements, interactions and use cases.
Wireflow is made with collaboration in mind. You can invite your colleagues to design user flows for your next project with them in real time.
It has a built-in live chat feature that enables you to communicate with your teammates and still be in the same app while you collaborate in real time.

flowy

Brief: Flowy - A minimal javascript library for creating flowcharts. Makes creating a WebApp with flowchart capabilities a very easy task. You can build automation software, mind-mapping tools, or simple programming platforms in minutes.

Responsive drag and drop, auto snap, auto scroll
Block rearrangement, block deletion, automatic block centering
Conditional capture, conditional block removal, no dependencies

Workflow Designer

Introduction: Workflow Designer - Visual process editor based on G6 and React.

web-pdm

Introduction: web-pdm- ER diagram tool made with G6, the ultimate goal is to make an online version of powerdesigner.

X-Flowchart-Vue

Introduction: X-Flowchart-Vue - Visual graph editor based on G6 and Vue.

OrgChart

Brief: OrgChart - Simple and Straightforward Org Chart Plugin

welabx-g6

Introduction: welabx-g6 - Flowchart editor based on G6 and Vue.

Panorama/AR/VR

The popularity of 5g, the landing of virtual reality/augmented reality, and the fiery metaverse... It seems that Canvas has once again pushed to the pinnacle of technology. Let me take a look at the common Canvas library for developing these scenarios.

Pannellum

Introduction: Pannellum - lightweight, free, open source web panorama viewer.

Panolens.js

Brief: Panolens.js - Panolens.js is based on Three.JS, the main research areas are panorama, virtual reality and potentially augmented reality.

JS-Cloudimage-360-View

Brief: JS-Cloudimage-360-View A simple, interactive resource that can be used to provide a virtual tour of your product.

A-Frame

Summary: In addition to helping you build a 360-degree media player, A-Frame offers many additional features. Additional features help you enhance your website's virtual reality experience.

3D library

three.js

Brief: three.js[58] [Online Demo[59]] - Creates an easy-to-use, lightweight, cross-browser general purpose 3d js library. I won’t introduce much about three.js, everyone must be familiar with it.

zdog

Introduction: zdog - a designer-friendly pseudo-3D engine based on canvas and SVG

seen.js

Brief: seen - Render 3D scenes using SVG or Canvas.

Oimo.js

Introduction: Oimo.js - lightweight JS 3D physics engine.

phoria.js

Brief: phoria.js - JavaScript library for simple 3D graphics and visualization on the HTML5 canvas 2D renderer. It doesn't use WebGL. Works on all HTML5 browsers including desktop, iOS and Android.

end

awesome-canvas has carefully collected 200+ Canvas libraries and corresponding resources, basically covering all aspects of Canvas development, and is still in the process of continuous collection and maintenance. If you guys think the collection is not bad, welcome to give a star to support it.

Original link: https://juejin.cn/post/7038267477121302542