@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

color-util

为 antv 开发的轻量级工具方法库。

安装下载

tnpm i --save @antv/util

// 所有的 api 是都这么引入，名字不同而已
import { gradient } from '@antv/color-util';

const grad = gradient(['red', 'blue']);
const color1 = grad(0.1);
const color2 = grad(0.2);

API 文档

目前使用到的、且推荐使用的 API 文档，不在文档内的不建议使用。

• rgb2arr('#ffeedd') 将 rgb 转换成 16 进制的数组
• gradient(colors) ： 'Function' 渐变色计算
  • colors ： 颜色的数组，例如 ['red', 'blue']
  • 返回值是一个函数，可以传入百分百，返回函数

const grad = gradient(['red', 'blue']);
const color1 = grad(0.1);
const color2 = grad(0.2);

• toRGB(color) : 将颜色转换成 RGB 的格式

import { toRGB } from '@antv/color-util';
toRGB('red');
toRGB('rgb(240, 240, 233)');