How to use @antv/g-canvas - 4 common examples

function getAngle(startPoint: number[], arcPath: PathCommand) {
  let { startAngle, endAngle } = getArcParams(startPoint, arcPath);

  if (!isNumberEqual(startAngle, -Math.PI * 0.5) && startAngle < -Math.PI * 0.5) {
    startAngle += Math.PI * 2;
  }
  if (!isNumberEqual(endAngle, -Math.PI * 0.5) && endAngle < -Math.PI * 0.5) {
    endAngle += Math.PI * 2;
  }

  if (arcPath[5] === 0) {
    // 逆时针，需要将 startAngle 和 endAngle 转置，因为 G2 极坐标系为顺时针方向
    [startAngle, endAngle] = [endAngle, startAngle];
  }

  if (isNumberEqual(startAngle, Math.PI * 1.5)) {
    startAngle = Math.PI * -0.5;
  }

import Canvas from '@antv/g-canvas/lib/canvas';
import '../../../src/shape/edge'
import '../../../src/shape/edges'
import Shape from '../../../src/shape/shape'

const div = document.createElement('div');
div.id = 'edge-shape';
document.body.appendChild(div);

const canvas = new Canvas({
  container: 'edge-shape',
  width: 600,
  height: 600
});

describe('shape edge test', () => {
  describe('basic method test', () => {
    it('get factory', () => {
      const factory = Shape.getFactory('edge');
      expect(factory).not.toEqual(undefined);
    });
    it('get default', () => {
      const factory = Shape.getFactory('edge');
      const shape = factory.getShape();
      expect(shape.type).toEqual('line');
    });

import Shape from '../../../src/shape/shape'
import Global from '../../../src/global';
import Canvas from '@antv/g-canvas/lib/canvas';
import Node from '../../../src/item/node';
import { translate } from '../../../src/util/math'
import Graph from '../../../src/graph/graph'
import '../../../src/shape/node'
import '../../../src/shape/nodes'
import { IGroup } from '@antv/g-canvas/lib/interfaces';

const div = document.createElement('div');
div.id = 'node-shape';
document.body.appendChild(div);

const canvas = new Canvas({
  container: 'node-shape',
  width: 500,
  height: 500
});

describe('shape node test', () => {
  describe('basic method test', () => {
    it('get factory', () => {
      const factory = Shape.getFactory('node');
      expect(factory).not.toBe(undefined);
    });
    it('get default', () => {
      const factory = Shape.getFactory('node');
      const shape = factory.getShape();
      expect(shape.type).toBe('circle');
    });

private initCanvas() {
    let container: string | HTMLElement = this.get('container')
    if(isString(container)) {
      container = document.getElementById(container)
      this.set('container', container)
    }

    if(!container) {
      throw new Error('invalid container')
    }

    const width: number = this.get('width')
    const height: number = this.get('height')
    const pixelRatio: number = this.get('pixelRatio')

    const canvas = new GCanvas({
      container,
      width,
      height,
      pixelRatio
    })

    this.set('canvas', canvas)

    this.initGroups()
  }