G

A canvas library which providing 2d draw for G2.

Install

npm i @antv/g

Development

$ git clone git@github.com:antvis/g.git
$ npm install
$ npm run dev

Use

var canvas = new Canvas({
  containerId: 'c1',
  width: 500,
  height: 600
});

var group = canvas.addGroup();
var shape = group.addShape('circle', {
  attrs: {
    x: 100,
    y: 100,
    r: 50,
    fill: 'red'
  }
});

canvas.draw();

shape.attr({
  x: 200,
  y: 200
});
canvas.draw();

API

G 作为 G2、G6 的绘图引擎，主要包括的类：

Canvas 绘图引擎的入口
Group 图形分组，可以包含图形和分组
Shape 图形属性
Element Group 和 Shape 的基类

Canvas

属性

width 画布宽度
height 画布高度
containerId 容器 id
pixelRatio 画布大小和所占 DOM 宽高的比例，一般可以使用 window.devicePixelRatio
children 所有的子元素（分组或者图形）只读属性

var canvas = new Canvas({
  containerId: 'c1',
  width: 500,
  height: 600
});

方法

get(name) 获取属性
set(name, value) 设置属性
draw 绘制方法

addShape(type, cfg) 添加图形，支持的图形类型见 Shape

  canvas.addShape('circle', {
    zIndex: 5,
    attrs: {
      x: 10,
      y: 10,
      r: 50
    }
  });

addGroup([GroupClass], cfg) 添加分组

 var group = canvas.addGroup(); // 添加分组
 var group1 = canvas.addGroup(AGroup, {
  // 属性
 });

getPointByClient(clientX, clientY) 根据窗口的位置获取画布上的位置信息
changeSize(w,h) 改变大小
sort() 对内部图形元素进行排序，根据图形元素的 zIndex 进行排序
clear() 清空画布
destroy() 销毁
on(eventType, callback) 绑定事件，支持浏览器的常见事件：click, dblclick, mouseenter, mouseleave, mouseover, mouseup, mousedown, touchstart, touchend
off(eventType, callback) 解除绑定

Group

图形分组可以嵌套图形和分组

属性

zIndex 层次索引值，决定分组在父容器中的位置
visible 是否可见
children 嵌套的图形元素，只读

方法

get(name) 获取属性
set(name, value) 设置属性
setSilent(name, value) 由于 set 方法进行一些检测，会执行一些方法，所以可以使用这个方法提升函数性能

addShape(type, cfg) 添加图形，支持的图形类型见 Shape

  group.addShape('circle', {
    zIndex: 5,
    attrs: {
      x: 10,
      y: 10,
      r: 50
    }
  });

addGroup([GroupClass], cfg) 添加分组

 var g1 = group.addGroup(); // 添加分组
 var g2 = group.addGroup(AGroup, {
  // 属性
 });

getBBox() 获取包含的所有图形的包围盒
show() 显示
hide() 隐藏
remove() 从父容器中移除当前分组
sort() 对内部图形元素进行排序，根据图形元素的 zIndex 进行排序
clear() 清空画布
destroy() 销毁
find(fn) 在当前group中递归查找满足fn的shape或group
findAll(fn) 在当前group中递归查找所有满足fn的shape和group
findById(id) 在当前group中递归查找id匹配的shape或group
findBy(fn) 接口已废弃
find(id) 接口已废弃

Shape

支持的所有图形的基类，支持的所有通用的属性和方法

属性

zIndex 层次索引值，决定分组在父容器中的位置
visible 是否可见
attrs 图形属性，通用的图形属性如下：
- transform 进行几何变换的矩阵
- 通用的图形属性，见绘图属性

方法

attr('name', [value]) 设置、获取图形属性

  circle.attr({ // 同时设置多个属性
    x: 100,
    y: 100,
    fill: '#fff'
  });
  circle.attr('fill', 'red'); // 设置单个属性
  circle.attr('fill'); // 获取属性

animate(attrs, duration, easing, callback, delay = 0) 执行动画
- attrs 所有的图形属性
- duration 执行的时间 ms
- easing 参加 d3-ease
- callback 执行完毕后的回调函数
- delay 延迟执行
getBBox() 获取图形的包围盒
show() 显示
hide() 隐藏
remove() 从父容器中移除当前图形
destroy() 销毁

Shape.Circle

圆，一般在添加图形时使用 'circle' 来标识, type = 'circle'

图形属性

通用的图形属性见：绘图属性
x 圆心坐标的x坐标
y 圆心坐标的y坐标
r 圆的半径

  canvas.addShape('circle', {
    attrs: {
      x: 150,
      y: 150,
      r: 70,
      stroke: 'black'
    }
  });
  canvas.addShape('circle', {
    attrs: {
      x: 100,
      y: 100,
      r: 60,
      lineDash: [20, 20],
      stroke: 'red'
    }
  });
  canvas.addShape('circle', {
    attrs: {
      x: 100,
      y: 100,
      r: 100,
      fill: 'rgba(129,9,39,0.5)',
      stroke: 'blue'
    }
  });
  canvas.draw();

Shape.Rect

绘制矩形，type = 'rect'

图形属性

通用的图形属性见：绘图属性
x 起始点 x 坐标
y 起始点 y 坐标
width 宽度
height 高度
radius 圆角: 支持整数或数组形式，分别对应左上、右上、右下、左下角的半径。
- radius缩写为 1或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]

canvas.addShape('rect', {
    attrs: {
      x: 150,
      y: 150,
      width: 150,
      height: 150,
      stroke: 'black',
      radius: 2
    }
  });
  canvas.addShape('rect', {
    attrs: {
      x: 150-50,
      y: 150-50,
      width: 150,
      height: 150,
      stroke: 'red'
    }
  });
  canvas.addShape('rect', {
    attrs: {
      x: 150+50,
      y: 150+50,
      width: 150,
      height: 150,
      fill: 'rgba(129,9,39,0.5)',
      stroke: 'blue'
    }
  });

Shape.Path

绘制的路径 ,使用 'path' 来标识, type = 'path'

图形属性

通用的图形属性见：绘图属性
path：路径，支持字符串或者数组两种方式，详情参考 svg path

arrow 箭头设置

true / false: 显示 / 取消默认箭头
支持定义箭头样式，箭头中心位于(0, 0)点，箭头指向与x轴正方向相同
- path: 箭头样式
- d: path方向上箭头的位移

canvas.addShape('path', {
  attrs: {
    startArrow: {
      path: 'M 10,0 L -10,-10 L -10,10 Z',
      d: 10
    }
  }
});

  const path = group.addShape('path', {
    attrs: {
      path: 'M100,600' +
            'l 50,-25' +
            'a25,25 -30 0,1 50,-25' +
            'l 50,-25' +
            'a25,50 -30 0,1 50,-25' +
            'l 50,-25' +
            'a25,75 -30 0,1 50,-25' +
            'l 50,-25' +
            'a25,100 -30 0,1 50,-25' +
            'l 50,-25' +
            'l 0, 200,' +
            'z',
      lineWidth: 10,
      lineJoin: 'round',
      stroke: '#54BECC'
    }
  });
  const path1 = group.addShape('path', {
    attrs: {
      path: [['M', 100, 100], ['L', 200, 200]],
      stroke: 'red',
      lineWidth: 2
    }
  });

Shape.Line

绘制直线, type = 'line'，可以使用 path 来代替，

图形属性

通用的图形属性见：绘图属性
x1 起始点的 x 坐标
y1 起始点的 y 坐标
x2 结束点的 x 坐标
y2 结束点的 y 坐标

arrow 箭头设置

true / false: 显示 / 取消默认箭头
支持定义Marker形状的箭头，箭头中心位于线段的端点

canvas.addShape('line', {
      attrs: {
        startArrow: new Marker({
           attrs: { ... }  
        })
      }
    });

  canvas.addShape('line', {
    attrs: {
      x1: 20,
      y1: 20,
      x2: 280,
      y2: 280,
      stroke: 'red'                       // 颜色名字
    }
  });
  canvas.addShape('line', {
    attrs: {
      x1: 20,
      y1: 300 + 20,
      x2: 280,
      y2: 300 + 280,
      startArrow: true, 
      endArrow: true,                                             // 显示箭头
      stroke: '#00ff00'                   // 6位十六进制
    }
  });
  canvas.addShape('line', {
    attrs: {
      x2: 300 + 20,
      y2: 300 + 20,
      x1: 300 + 280,
      y1: 300 + 280,
      startArrow: true, 
      endArrow: true,                                             // 显示箭头
      stroke: '#00f'                      // 3位十六进制
    }
  });
  canvas.addShape('line', {
    attrs: {
      x1: 20,
      y1: 600 + 20,
      x2: 280,
      y2: 600 + 280,
      lineDash: [10,10],
      stroke: 'rgb(100, 100, 200)'         // rgb数字模式
    }
  });

Shape.Polyline

多个点的折线，type = 'polyline'

图形属性

通用的图形属性见：绘图属性
points 包含的点集合

 canvas.addShape('polyline', {
    attrs: {
      points: [[741.6487813219777,1183.92131359719],[583.1709046233477,33.93352498571885],[1098.3455104904451,246.13363066051957],[211.30437444177633,420.3306748934016],[980.3732054245157,756.2252762234709],[374.28495603818607,108.15975006182006],[422.7940564389682,1119.2144105552136],[833.5078092462321,586.7198136138784]],
      stroke: 'red'
    }
});

Shape.Image

绘制图片，type = 'image'

图形属性

x 起始点 x 坐标
y 起始点 y 坐标
width 宽度
height 高度
img 图片的路径、canvas 对象、图片对象

  canvas.addShape('image', {
    attrs: {
      x: 150+200,
      y: 150,
      img: 'https://zos.alipayobjects.com/rmsportal/FDWrsEmamcNvtEf.png'
    }
  });
  canvas.addShape('image', {
    attrs: {
      x: 150-50,
      y: 150-50,
      img: 'https://zos.alipayobjects.com/rmsportal/nAVchPnSaAWncPj.png'
    }
  });
  canvas.addShape('image', {
    attrs: {
      x: 150+50,
      y: 150+150,
      img: 'https://zos.alipayobjects.com/rmsportal/GHGrgIDTVMCaYZT.png'
    }
  });

Shape.Text

文本，type = 'text'

图形属性

通用的图形属性见：绘图属性
x 文字的位置坐标 x
y 文字的位置坐标 y
font 设置文本内容的当前字体属性,这个属性可以分解成多个属性单独配置：
- fontStyle 对应 font-style；
- fontVariant 对应 font-variant；
- fontWeight 对应 font-weight；
- fontSize 对应 font-size；
- fontFamily 对应 font-family；
textAlign 设置文本内容的当前对齐方式, 支持的属性：center|end|left|right|start；
textBaseline 设置在绘制文本时使用的当前文本基线, 支持的属性:top|middle|bottom。

注意：文本的颜色一般使用 fill 属性，而非 'stroke' 属性

  canvas.addShape('text', {
    attrs: {
      x: 150,
      y: 150,
      fontFamily: 'PingFang SC',
      text: '文本文本',
      fontSize: 90,
      stroke: 'black'
    }
  });
  canvas.addShape('text', {
    attrs: {
      x: 150+100,
      y: 250,
      fontFamily: 'PingFang SC',
      fontSize: 90,
      text: '字体',
      lineDash: [10, 10],
      stroke: 'red'
    }
  });
  canvas.addShape('text', {
    attrs: {
      x: 150+50,
      y: 150+150,
      text: '对齐方式',
      fontFamily: 'Hiragino Sans GB',
      fontSize: 100,
      textAlign: 'center',
      textBaseline: 'top',
      fill: 'rgba(129,9,39,0.5)',
      stroke: 'blue'
    }
  });

G 还提供了几个特殊的 Shape

marker 绘制小的几何 icon
fan 绘制圆饼
arc 圆弧
ellipse 椭圆
cubic 三阶贝塞尔曲线
quadratic 二阶贝塞尔曲线

这些图形都可以使用 path 代替，所以在这里不详细介绍了

zengyue/g

G

Install

Development

Use

API

Canvas

属性

方法

Group

属性

方法

Shape

属性

方法

Shape.Circle

图形属性

Shape.Rect

图形属性

Shape.Path

图形属性

Shape.Line

图形属性

Shape.Polyline

图形属性

Shape.Image

图形属性

Shape.Text

图形属性

更多