@antv/g-base

What is @antv/g-base?

@antv/g-base is a foundational graphics library that provides basic functionalities for creating and manipulating graphical elements. It is part of the AntV ecosystem, which is a suite of data visualization tools developed by Ant Financial. The library offers a set of APIs for drawing shapes, handling events, and managing the lifecycle of graphical objects.

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

Drawing Shapes

This feature allows you to draw basic shapes like circles, rectangles, and lines. The code sample demonstrates how to create a canvas and draw a red circle on it.

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

Event Handling

This feature enables event handling for graphical elements. The code sample shows how to add a click event listener to a circle shape.

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

Transformations

This feature provides methods for transforming shapes, such as translating, scaling, and rotating. The code sample demonstrates how to apply these transformations to a circle.

circle.translate(50, 50);
circle.scale(2, 2);
circle.rotate(45);

Other packages similar to @antv/g-base

konva

Konva is a 2D canvas library for creating complex graphical applications. It offers a rich set of features for drawing shapes, handling events, and applying transformations. Compared to @antv/g-base, Konva provides more advanced functionalities and is widely used for building interactive applications.

two.js

Two.js is a lightweight 2D drawing library that supports SVG, Canvas, and WebGL renderers. It is designed to be simple and easy to use, making it a good choice for basic graphical tasks. While @antv/g-base is more focused on being a foundational library within the AntV ecosystem, Two.js aims for simplicity and ease of use.

paper

Paper.js is a powerful vector graphics scripting framework that runs on top of the HTML5 Canvas. It provides a clean API for creating and manipulating vector graphics. Compared to @antv/g-base, Paper.js offers more advanced vector manipulation capabilities and is better suited for complex vector graphics tasks.

README

G-Base

可视化的绘图引擎的接口定义和抽象实现

安装下载

tnpm i --save @antv/g-base

import { Base } from '@antv/g-base';

class MyClass extends Base {

}

API 文档

G-Base 中定义了绘图引擎的接口、抽象类和工具方法

接口定义

IBase

事件接口定义

  /**
   * 绑定事件
   * @param {string}   eventName 事件名
   * @param {Function} callback  回调函数
   */
  on(eventName: string, callback: Function);
  /**
   * 移除事件
   */
  off();
  /**
   * 移除事件
   * @param {string} eventName 事件名
   */
  off(eventName: string);
  /**
   * 移除事件
   * @param {string}   eventName 事件名
   * @param {Function} callback  回调函数
   */
  off(eventName: string, callback: Function);
  /**
   * 触发事件, trigger 的别名函数
   * @param {string} eventName 事件名称
   * @param {object} args 参数
   */
  emit(eventName: string, eventObject: object);
  /**
   * 触发事件
   * @param {string} eventName 事件名称
   * @param {object} args 参数
   */
  emit(eventName: string, eventObject: object);

属性接口定义

/**
   * 获取属性值
   * @param  {string} name 属性名
   * @return {any} 属性值
   */
  get(name: string): any;
  /**
   * 设置属性值
   * @param {string} name  属性名称
   * @param {any}    value 属性值
   */
  set(name: string, value: any);

  /**
   * 是否销毁
   * @type {boolean}
   */
  destroyed: boolean;

  /**
   * 销毁对象
   */
  destroy();

IElement

IGroup

IShape

ICanvas

抽象类定义

Base

AbstractShape

AbstractGroup

AbstractCanvas

其他公用类

GraphEvent

EventController