Awesome GitHub RepositoriesCanvas Vector Rendering

OpenLayers is a JavaScript web mapping library and WebGIS framework used for rendering interactive 2D maps and geospatial data on web pages. It serves as a geospatial data visualization tool and an open geospatial standard client for consuming standardized geographic data formats and web map services. The project provides a framework for building complex geographic information systems in the browser. It supports the development of custom map applications and the integration of geographic information system capabilities to handle spatial data and coordinates. The library covers broad capabili

vue-fabric-editor is a web-based graphic design tool and vector graphics editor built with Vue and Fabric.js. It provides a canvas manipulation framework for creating visual compositions, layouts, and custom vector illustrations. The project features a template-based design system for creating reusable layouts and a bulk image generator that automatically produces multiple image files using data tables or external network interfaces. It also includes a modular plugin system for extending tools and keyboard shortcuts. The editor covers a broad range of capabilities including digital asset man

react-konva is a declarative React canvas graphics library and 2D vector graphics framework. It serves as a rendering engine and interactive canvas toolset that allows for the drawing and management of complex 2D shapes and graphics using a React component model. The library maps reactive component trees to an underlying object-oriented graphics scene graph, enabling the synchronization of visual states with application data. It provides specialized tools for building interactive graphical interfaces, including support for multi-touch gestures, drag-and-drop functionality, and real-time trans

tui.chart est un moteur de graphiques statistiques et une bibliothèque de visualisation de données conçue pour rendre des graphiques interactifs pour des jeux de données numériques complexes. Il fonctionne comme un framework de graphiques réactif capable de produire diverses représentations statistiques, incluant des graphiques en courbes, en barres, en nuages de points, en bulles et en treemaps. La bibliothèque se distingue par un système de visualisation interactif qui prend en charge des infobulles synchronisées sur plusieurs graphiques, le zoom basé sur des plages et la sélection de séries de données. Elle inclut un moteur de mise en page qui ajuste automatiquement les dimensions des graphiques et les animations en fonction de la taille du conteneur d'affichage. Le système couvre un large éventail de capacités de rendu, incluant le mappage de données hiérarchiques via des treemaps, des cartes thermiques (heatmaps) codées par couleur, et la capacité de gérer des mises à jour de données en temps réel pour une surveillance en direct. Des domaines utilitaires supplémentaires incluent la fonctionnalité d'exportation de données et les mises à jour de configuration dynamiques pour modifier l'apparence des visualisations actives.

tui.chart est une bibliothèque de visualisation de données JavaScript et un moteur de graphiques multi-types utilisé pour rendre des graphiques statistiques interactifs. Il fonctionne comme un framework de graphiques réactif et un visualiseur de données en temps réel, utilisant HTML5 Canvas pour un rendu haute performance de jeux de données divers. La bibliothèque fournit un large éventail de formats visuels, incluant des types de graphiques linéaires, circulaires, basés sur des grilles, hiérarchiques et statistiques. Cela couvre tout, des graphiques en barres, en courbes et en secteurs standard aux visualisations plus spécialisées telles que les graphiques en radar, les treemaps, les graphiques en bulles et les boîtes à moustaches. Le moteur inclut des capacités complètes pour la surveillance de données en temps réel avec des mises à jour en direct et le développement de tableaux de bord interactifs. Il prend en charge des modèles d'interaction avancés tels que le zoom, la sélection de séries et des infobulles synchronisées sur plusieurs graphiques, tout en offrant des utilitaires d'exportation de données pour les formats CSV, XLS, PNG et JPEG. Le framework gère des mises en page adaptatives via un observateur de redimensionnement qui ajuste automatiquement les options de graphiques et les animations en fonction des dimensions du conteneur.

Ce projet est un manipulateur de chemin vectoriel et un transformateur de géométrie SVG qui fournit une interface visuelle pour modifier les données de chemin SVG. Il sert d'utilitaire pour ajouter, supprimer et convertir des segments de chemin sans écrire de code de coordonnées à la main. L'outil fonctionne comme un optimiseur de chemin SVG, réduisant la longueur des données de chemin et nettoyant les systèmes de coordonnées. Il inclut également un transformateur de géométrie pour appliquer la mise à l'échelle, la rotation et la translation aux formes vectorielles. Le logiciel inclut des capacités pour la manipulation visuelle de chemin et les transformations géométriques globales. Il fournit également des outils de contrôle de fenêtre (viewport) pour zoomer, déplacer et ajuster la vue au chemin actuel.

opentype.js est une bibliothèque JavaScript pour lire, écrire et manipuler des fichiers de police OpenType, TrueType et WOFF dans des environnements de navigateur et de serveur. Il fonctionne comme un analyseur et générateur de police capable d'extraire des données de glyphes et des métadonnées ou de créer de nouveaux fichiers de police en définissant des chemins de glyphes et des métadonnées par programmation. Le projet fournit des utilitaires spécialisés pour modifier les tables de variation de police afin de contrôler les propriétés de police variable et traiter les couches de couleur et les palettes via les tables COLR et CPAL. Il inclut également un générateur de chemin de Bézier qui convertit les glyphes de police et les chaînes de texte en chemins pour le rendu SVG et canvas. La bibliothèque couvre un large éventail d'opérations typographiques, y compris le calcul des métriques de police comme les largeurs d'avance et les boîtes englobantes, la conversion des glyphes en données de chemin SVG et le rendu direct du texte dans un contexte de dessin 2D. Elle permet en outre la modification des formes de glyphes brutes et la sérialisation des objets de police en formats binaires pour l'exportation de fichiers.

Painter est un système de rendu déclaratif qui transforme des définitions JSON en images visuelles stylisées. Il fonctionne comme un moteur de rendu JSON-vers-image qui convertit des données de mise en page structurées en formes vectorielles, texte stylisé et codes QR sur un canevas. Le système dispose d'un moteur de template d'image dynamique qui utilise des calculs de coordonnées relatives pour déterminer les positions des éléments en fonction des limites d'autres composants. Il prend en charge la création de templates interactifs où les utilisateurs peuvent faire glisser, mettre à l'échelle et supprimer des éléments en temps réel, ainsi que la capacité de mettre à jour des propriétés d'élément spécifiques sans déclencher un re-rendu complet de la scène. La bibliothèque couvre un large éventail de capacités de stylage visuel et de composition, incluant l'application de dégradés, d'ombres et de coins arrondis. Elle fournit un moteur de mise en page basé sur des templates conçu pour générer des graphiques pilotés par les données, tels que des visuels pour les réseaux sociaux et des images pour mini-programmes.

Wireflow est un outil de création de diagrammes collaboratif en temps réel et une application de cartographie visuelle. Il fournit un canevas numérique partagé où plusieurs utilisateurs peuvent concevoir simultanément des diagrammes, mapper des parcours utilisateurs et créer des cartes de processus. L'application utilise un moteur de transformation opérationnelle pour résoudre les conflits d'édition et maintenir un état cohérent entre tous les utilisateurs. Un moteur de rendu vectoriel garantit que les éléments des diagrammes restent nets à n'importe quel niveau de zoom, tandis qu'une couche de synchronisation WebSocket diffuse instantanément les mises à jour du canevas et les mouvements du curseur entre les clients. Le projet est livré sous forme d'application web conteneurisée, regroupée dans des images portables pour assurer une installation et un déploiement cohérents dans différents environnements serveur.

Storyboarder is digital storyboarding software and a film preproduction tool used to sketch visual sequences and time story beats for animation and film production. It functions as a drawing application for prototyping visual narratives, providing a sketching environment to convert written scripts into visual frames for organizing camera shots and production planning. The project acts as a production pipeline bridge and digital asset pipeline, utilizing a real-time file-system watcher to sync drawing frames with external image editors. This allows the workspace to automatically update frames

This library is a multi-format barcode processing utility designed for web browsers and server-side environments. It provides a comprehensive suite of tools for both decoding existing barcode symbols and generating new ones from input data. The project distinguishes itself by enabling continuous, real-time barcode scanning directly from live video streams. By utilizing browser camera interfaces and automated frame processing, it allows applications to capture and interpret one-dimensional and two-dimensional barcode data without requiring manual image uploads or user intervention. Beyond rea

Easy Pie Chart est une bibliothèque JavaScript légère conçue pour le rendu d'indicateurs de progression circulaires animés. Elle fonctionne comme un composant front-end qui visualise des données numériques à valeur unique sous forme de graphiques circulaires responsives, permettant la représentation d'informations basées sur des pourcentages au sein d'interfaces web. La bibliothèque utilise des éléments HTML5 canvas pour dessiner les graphiques, tirant parti de l'accélération matérielle et de boucles d'animation synchronisées pour maintenir des transitions visuelles fluides. Elle prend en charge les mises à jour dynamiques, permettant aux développeurs de modifier les valeurs affichées en temps réel sans réinitialiser le composant, et fournit des hooks de cycle de vie pour déclencher une logique personnalisée pendant les séquences d'animation. Les utilisateurs peuvent ajuster les propriétés visuelles telles que les couleurs, l'épaisseur des lignes et les styles d'arrière-plan pour répondre à des exigences de conception spécifiques. Le composant est conçu pour s'adapter à différentes résolutions d'écran, assurant une apparence cohérente dans les environnements de tableaux de bord responsives.