@antv/g-canvas

What is @antv/g-canvas?

@antv/g-canvas is a 2D rendering engine for AntV, a suite of data visualization solutions. It provides a high-performance canvas rendering environment for creating complex visualizations and graphics.

What are @antv/g-canvas's main functionalities?

Basic Shape Drawing

This feature allows you to draw basic shapes like circles, rectangles, and lines on the canvas.

const { Canvas } = require('@antv/g-canvas');
const canvas = new Canvas({ container: 'container', width: 600, height: 400 });
const circle = canvas.addShape('circle', { attrs: { x: 100, y: 100, r: 50, fill: 'red' } });

Event Handling

This feature enables event handling for shapes, allowing you to add interactivity to your graphics.

circle.on('click', () => { console.log('Circle clicked!'); });

Animation

This feature allows you to animate properties of shapes, making your visualizations more dynamic.

circle.animate({ r: 100 }, { duration: 1000, easing: 'easeLinear' });

Other packages similar to @antv/g-canvas

fabric

Fabric.js is a powerful and simple JavaScript HTML5 canvas library. It provides an interactive object model on top of the canvas element, making it easy to create complex shapes, animations, and interactions. Compared to @antv/g-canvas, Fabric.js offers a more extensive set of features for object manipulation and interaction.

konva

Konva is a 2D canvas library for creating desktop and mobile applications. It provides a high-level API for working with shapes, layers, and animations. Konva is similar to @antv/g-canvas in terms of performance and ease of use but offers additional features like layer management and pixel-level hit detection.

paper

Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph/Document Object Model and a well-designed, consistent API. Paper.js is more focused on vector graphics and provides advanced features like boolean operations on paths, which are not available in @antv/g-canvas.

README

g-canvas

定义了基于 Canvas2D 的上下文，使用了以下三个插件：

• g-plugin-canvas-renderer 使用 Canvas2D 上下文渲染各种图形
• g-plugin-dom-interaction 监听浏览器事件，触发标准 pointer 系列事件
• g-plugin-canvas-picker 基于 Canvas2D API 实现的拾取