绘图引擎 G

G 作为 F2 图表的渲染引擎，具备以下特点：

  • 层次化结构
  • 支持容器、各种图形的创建、修改和销毁
  • 动画

  • 矩阵变换
    G 采用层次化结构设计，结构如下：
    G - 图1
    其中：

  • Canvas 画布的入口，包含所有 Group、Shape 对象

  • Group 容器，可包含 Group 和 Shape 对象
  • Shape 为 G 提供的具体的图形

如何引入 G

  1. const F2 = require('@antv/f2');
  2. const { G } = F2;

类

  1. const { Canvas } = F2.G; // 引入 Canvas
  2. const canvas = new Canvas({
  3.   el: 'canvas',
  4.   width: 200,
  5.   height: 100
  6. }); // 创建 canvas 实例
  7. const container = canvas.addGroup({
  8.   zIndex: 2
  9. }); // canvas 添加一个 group
  10. const itemGroup = container.addGroup({
  11.   zIndex: 1
  12. }); // container 添加一个 group
  13. itemGroup.addShape('circle', {
  14.   attrs: {
  15.     x: 5,
  16.     y: 0,
  17.     r: 5,
  18.     fill: 'red'
  19.   }
  20. }); // itemGroup 中添加一个圆
  21. itemGroup.addShape('text', {
  22.   attrs: {
  23.     x: 17,
  24.     y: 0,
  25.     textAlign: 'start',
  26.     textBaseline: 'middle',
  27.     fontSize: 12,
  28.     fill: 'red',
  29.     text: '分类一'
  30.   }
  31. }); // itemGroup 中添加一个文本
  32. const bbox = itemGroup.getBBox(); // 获取 itemGroup 的包围盒
  33. container.addShape('rect', {
  34.   zIndex: 0,
  35.   attrs: {
  36.     x: bbox.minX - 5,
  37.     y: bbox.minY - 5,
  38.     width: bbox.width + 10,
  39.     height: bbox.height + 10,
  40.     fill: 'rgba(0, 0, 0, 0.09)',
  41.     radius: 4
  42.   }
  43. }); // container 中添加一个矩形
  44. container.sort(); // container 容器内元素排序
  45. container.moveTo(30, 50); // 将 container 移至 (30, 50)
  46.  
  47. canvas.addShape('rect', {
  48.   zIndex: 0,
  49.   attrs: {
  50.     x: 0,
  51.     y: 0,
  52.     width: 200,
  53.     height: 100,
  54.     fill: 'rgba(0, 0, 0, 0.09)',
  55.     radius: 4
  56.   }
  57. }); // canvas 中添加一个矩形
  58.  
  59. canvas.sort(); // canvas 容器内的元素排序
  60. canvas.draw(); // 绘制

Canvas

new Canvas(config) 创建 canvas 对象。

  1. // <canvas id="c1"></canvas>
  2.  
  3. new Canvas({
  4.   el: 'c1',
  5.   width: 500,
  6.   height: 500
  7. });
  • 参数：config
    类型：Object，创建 canvas 对象需要的传递的属性，具体包含：
属性名 类型 描述
el String/HtmlElement 对应 canvas dom 的 id 或者 canvas dom 对象。
context CanvasRenderingContext2D canvas 上下文，即通过传入 canvas 上下文对象来创建 Canvas 对象。
width Number canvas 的宽度，可选，如果不设置则默认按照传入 canvas 元素的实际宽度。
height Number canvas 的高度，可选，如果不设置则默认按照传入 canvas 元素的实际高度。
pixelRatio Number canvas 的显示精度，默认读取当前设备的像素比。

方法

getChildren()
  1. /**
  2.  * 获取 canvas 容器下包含的元素集合
  3.  * @return {Array} 返回容器内包含的元素集合
  4.  */
  5. getChildren()
isDestroyed()
  1. /**
  2.  * 标识对象是否已被销毁
  3.  * @return {Boolean}
  4.  */
  5. isDestroyed()
getWidth()
  1. /**
  2.  * 获取 canvas 对应 dom 元素的宽度
  3.  * @return {Number} 返回宽度
  4.  */
  5. getWidth()
getHeight()
  1. /**
  2.  * 获取 canvas 对应 dom 元素的高度
  3.  * @return {Number} 返回高度
  4.  */
  5. getHeight()
changeSize(width, height)
  1. /**
  2.  * 改变 canvas 的宽高
  3.  * @param  {Number} width  宽度
  4.  * @param  {Number} height 高度
  5.  */
  6. changeSize(width, height)
getPointByClient(clientX, clientY)
  1. /**
  2.  * 将窗口坐标转变成画布坐标
  3.  * @param  {Number} clientX 窗口 x 坐标
  4.  * @param  {Number} clientY 窗口 y 坐标
  5.  * @return {Object} canvas 画布坐标坐标
  6.  */
  7. getPointByClient(clientX, clientY)
addShape(type, config)
  1. /**
  2.  * 创建并往 canvas 上添加 Shape
  3.  * @param {String} type 添加的 shape 类型
  4.  * @param {Object} config  shape 的配置项
  5.  * @return {Shape} 返回创建的 shape 实例
  6.  */
  7. addShape(type, config = {})

参数 config 传入的是 Shape 的配置项，包含：

  1. {
  2.   className: String, // 标记，由用户指定
  3.   zIndex: Number, // shape 的层次索引
  4.   visible: Boolean, // 显示隐藏
  5.   attrs: Object // shape 的图形属性配置，见 Shape 描述，不同 shape 的图形属性不同
  6. }
addGroup(config)
  1. /**
  2.  * 创建并添加 Group 组
  3.  * @param {Object||null} cfg 配置信息
  4.  * @return {Group} 返回创建的 Group 实例
  5.  */
  6. addGroup(config)

参数 config 传入的是 Group 的配置项，包含：

  1. {
  2.   className: String, // 标记，由用户指定
  3.   zIndex: Number, // group 的层次索引
  4.   visible: Boolean // 显示隐藏
  5. }
add(items)
  1. /**
  2.  * 往 canvas 中添加元素
  3.  * @param {Array||Group||Shape} items 可以是 group 实例或者 shape 实例或者他们的数组集合
  4.  * @return {Canvas}  返回当前 canvas 对象
  5.  */
  6. add(items)
contain(item)
  1. /**
  2.  * 判断 canvas 中是否包含 item 元素
  3.  * @param  {Shape||Group} item shape 或者 group 实例
  4.  * @return {Boolean}      返回判断结果，true 表示包含，false 表示不包含
  5.  */
  6. contain(item)
sort()
  1. /**
  2.  * 按照当前容器中包含元素的 zIndex 进行从大到小的排序
  3.  * @return {Canvas||Group} 返回自己
  4.  */
  5. sort()
get(name)

获取 canvas 的属性，name 对应属性名。

set(name, value)

设置属性值。

clear()
  1. /**
  2.   * 清除所有的元素
  3.   * @return {Canvas|Group} 返回自己
  4.   */
  5. clear()
draw()

绘制。

destroy()

销毁 canvas 对象。

Group

new Group(config) 创建 group 对象。

  1. new Group({
  2.   zIndex: 0,
  3.   visible: true
  4. });
  • 参数：config
    类型：Object，创建 group 对象需要的传递的属性，具体包含：
属性名 类型 描述
zIndex Number z-index 值，用于调整绘制顺序。
visible Boolean 显示还是隐藏。
className String 对象标记，由用户指定

方法

getChildren()
  1. /**
  2.  * 获取 group 容器下包含的元素集合
  3.  * @return {Array}
  4.  */
  5. getChildren()
isDestroyed()
  1. /**
  2.  * 标识对象是否已被销毁
  3.  * @return {Boolean}
  4.  */
  5. isDestroyed()
isVisible()
  1. /**
  2.  * 判断当前 group 对象是否可见
  3.  * @return {Boolean}
  4.  */
  5. isVisible()
isGroup()
  1. /**
  2.  * 标记当前对象为 group
  3.  * @return {Boolean}
  4.  */
  5. isGroup()
addShape(type, config)
  1. /**
  2.  * 创建并往 canvas 上添加 Shape
  3.  * @param {String} type 添加的 shape 类型
  4.  * @param {Object} config  shape 的配置项
  5.  * @return {Shape} 返回创建的 shape 实例
  6.  */
  7. addShape(type, config = {})

参数 config 传入的是 Shape 的配置项，包含：

  1. {
  2.   className: String, // 标记，由用户指定
  3.   zIndex: Number, // shape 的层次索引
  4.   visible: Boolean, // 显示隐藏
  5.   attrs: Object // shape 的图形属性配置，见 Shape 描述，不同 shape 的图形属性不同
  6. }
addGroup(config)
  1. /**
  2.  * 创建并添加 Group 组
  3.  * @param {Object||null} cfg 配置信息
  4.  * @return {Group} 返回创建的 Group 实例
  5.  */
  6. addGroup(config)

参数 config 传入的是 Group 的配置项，包含：

  1. {
  2.   className: String, // 标记，由用户指定
  3.   zIndex: Number, // group 的层次索引
  4.   visible: Boolean // 显示隐藏
  5. }
add(items)
  1. /**
  2.  * 往 canvas 中添加元素
  3.  * @param {Array||Group||Shape} items 可以是 group 实例或者 shape 实例或者他们的数组集合
  4.  * @return {Canvas}  返回当前 canvas 对象
  5.  */
  6. add(items)
contain(item)
  1. /**
  2.  * 判断 canvas 中是否包含 item 元素
  3.  * @param  {Shape||Group} item shape 或者 group 实例
  4.  * @return {Boolean}      返回判断结果，true 表示包含，false 表示不包含
  5.  */
  6. contain(item)
sort()
  1. /**
  2.  * 按照当前容器中包含元素的 zIndex 进行从大到小的排序
  3.  * @return {Canvas||Group} 返回自己
  4.  */
  5. sort()
getBBox()
  1. /**
  2.  * 获取当前 group 的最小包围盒
  3.  * @return {Object} 返回包围盒
  4.  */
  5. getBBox()

返回的包围盒对象结构如下：

  1. {
  2.   minX: 39.17999267578125,
  3.   minY: 52.131654999999995,
  4.   maxX: 211,
  5.   maxY: 116.58097999999998,
  6.   width: 171.82000732421875,
  7.   height: 64.44932499999999
  8. }

G - 图2

getParent()
  1. /**
  2.  * 获取父元素
  3.  * @return {Group || Canvas} 返回当前元素的父元素，可能是 group 或者 canvas 对象
  4.  */
  5. getParent()
show()

显示。

hide()

隐藏。

get(name)

获取 group 的属性，name 对应属性名。

set(name, value)

设置属性值。

getMatrix()
  1. /**
  2.   * 获取当前矩阵
  3.   * @return {Array} 返回当前矩阵
  4.   */
  5. getMatrix()
setMatrix(m)
  1. /**
  2.  * 设置矩阵
  3.  * @param {Array} m 矩阵数组
  4.  */
  5. setMatrix(m)
transform(actions)

对当前对象进行矩阵变换。

  1. transform(actions) // actions 为 Array 类型，表示操作的集合

actions 支持的操作包含 't'（translate）、's'（scale）、'r'（rotate），可进行任意组合，如下实例所示：

  1. [
  2.   [ 't', x, y ], // t 表示 translate, x 表示 x 方向的位移值，y 表示 y 方向的位移值
  3.   [ 's', sx, sy ], // s 表示 scale, sx 表示 x 方向上的缩放值，sy 表示 y 方向的缩放值
  4.   [ 'r', radian] // r 表示 rotate，radian 表示旋转的弧度值
  5. ]
translate(x, y)
  1. /**
  2.  * 对当前元素进行平移操作
  3.  * @param  {Number} x 水平坐标平移量
  4.  * @param  {Number} y 竖直坐标平移量
  5.  */
  6. translate(x, y)
rotate(radian)
  1. /**
  2.  * 对当前元素进行旋转操作
  3.  * @param  {Number} radian 表示旋转的弧度值
  4.  */
  5. rotate(radian)
scale(sx, sy)
  1. /**
  2.  * 对当前元素进行缩放操作
  3.  * @param  {Number} sx 表示 x 方向上的缩放值
  4.  * @param  {Number} sy 表示 y 方向上的缩放值
  5.  */
  6. scale(sx, sy)
setTransform(actions)

重置矩阵后，进行平移、旋转、缩放操作

  1. setTransform(actions) // actions 为 Array 类型，表示操作的集合setTransform

actions 操作同 transform(acitons 方法。

clear()
  1. /**
  2.   * 清除所有的元素
  3.   * @return {Group} 返回自己
  4.   */
  5. clear()
remove(destroy)
  1. /**
  2.  * 将自己从父元素中移除
  3.  * @param  {Boolean} destroy true 表示将自己移除的同时销毁自己，false 表示仅移除但不销毁
  4.  * @return {null}
  5.  */
  6. remove(destroy)
destroy()

销毁并将自己从父元素中移除（如果有父元素的话）

Shape

具体的 shape 对象，默认我们提供了：

  1. const { Line, Arc, Circle, Polygon, Polyline, Rect, Sector, Text, Custom } = Shape;

这些 shape 拥有不同的图形属性以及一些通用的属性和方法。

new ShapeshapeType 创建某个类型的 shape 对象。

  1. new Shape.Line({
  2.   zIndex: 0,
  3.   visible: true,
  4.   attrs: {}
  5. });
  • 参数：config
    类型：Object，创建 shape 对象需要的传递的属性，具体包含：
属性名 类型 描述
attrs Object 图形属性，必须设置。
zIndex Number 层次索引。
visible Boolean 显示还是隐藏。
className String 对象标记，由用户指定

通用方法

getType()
  1. /**
  2.  * 获取当前 shape 的类型
  3.  * @return {String}
  4.  */
  5. getType()
isDestroyed()
  1. /**
  2.  * 标识对象是否已被销毁
  3.  * @return {Boolean}
  4.  */
  5. isDestroyed()
isVisible()
  1. /**
  2.  * 判断当前 group 对象是否可见
  3.  * @return {Boolean}
  4.  */
  5. isVisible()
isShape()
  1. /**
  2.  * 标记当前对象为 Shape
  3.  * @return {Boolean}
  4.  */
  5. isGroup()
attr()

获取/设置属性。

  1. /**
  2.  * 返回所有的图形属性
  3.  * @return {Object} 返回结果为包含所有图形属性的对象
  4.  */
  5. attr()
  6.  
  7. /**
  8.  * 返回同 name 对应的图形属性值
  9.  * @return 返回同 name 对应的图形属性值
  10.  */
  11. attr(name)
  12.  
  13. /**
  14.  * 为具体的图形属性设置值
  15.  * @param  {String} name  图形属性名
  16.  * @param  {Any} value 属性值
  17.  * @return {Shape}       返回当前 shape 实例
  18.  */
  19. attr(name, value)
  20.  
  21. /**
  22.  * 设置多个图形属性
  23.  * @param  {Object} config  设置的图形属性对象
  24.  * @return {Shape}       返回当前 shape 实例
  25.  */
  26. attr(config)

获取 matrix 属性：attr('matrix'); 获取 clip：attr('clip',);

getBBox()
  1. /**
  2.  * 获取当前 shape 的最小包围盒
  3.  * @return {Object} 返回包围盒
  4.  */
  5. getBBox()

返回的包围盒对象结构如下：

  1. {
  2.   minX: 39.17999267578125,
  3.   minY: 52.131654999999995,
  4.   maxX: 211,
  5.   maxY: 116.58097999999998,
  6.   width: 171.82000732421875,
  7.   height: 64.44932499999999
  8. }

G - 图3

getParent()
  1. /**
  2.  * 获取父元素
  3.  * @return {Group || Canvas} 返回当前元素的父元素，可能是 group 或者 canvas 对象
  4.  */
  5. getParent()
show()

显示。

hide()

隐藏。

get(name)

获取 shape 的属性，name 对应属性名。

set(name, value)

设置属性值。

getMatrix()
  1. /**
  2.   * 获取当前矩阵
  3.   * @return {Array} 返回当前矩阵
  4.   */
  5. getMatrix()
setMatrix(m)
  1. /**
  2.  * 设置矩阵
  3.  * @param {Array} m 矩阵数组
  4.  */
  5. setMatrix(m)
transform(actions)

对当前对象进行矩阵变换。

  1. transform(actions) // actions 为 Array 类型，表示操作的集合

actions 支持的操作包含 't'（translate）、's'（scale）、'r'（rotate），可进行任意组合，如下实例所示：

  1. [
  2.   [ 't', x, y ], // t 表示 translate, x 表示 x 方向的位移值，y 表示 y 方向的位移值
  3.   [ 's', sx, sy ], // s 表示 scale, sx 表示 x 方向上的缩放值，sy 表示 y 方向的缩放值
  4.   [ 'r', radian] // r 表示 rotate，radian 表示旋转的弧度值
  5. ]
translate(x, y)
  1. /**
  2.  * 对当前元素进行平移操作
  3.  * @param  {Number} x 水平坐标平移量
  4.  * @param  {Number} y 竖直坐标平移量
  5.  */
  6. translate(x, y)
rotate(radian)
  1. /**
  2.  * 对当前元素进行旋转操作
  3.  * @param  {Number} radian 表示旋转的弧度值
  4.  */
  5. rotate(radian)
scale(sx, sy)
  1. /**
  2.  * 对当前元素进行缩放操作
  3.  * @param  {Number} sx 表示 x 方向上的缩放值
  4.  * @param  {Number} sy 表示 y 方向上的缩放值
  5.  */
  6. scale(sx, sy)
setTransform(actions)

重置矩阵后，进行平移、旋转、缩放操作

  1. setTransform(actions) // actions 为 Array 类型，表示操作的集合setTransform

actions 操作同 transform(acitons 方法。

remove(destroy)
  1. /**
  2.  * 将自己从父元素中移除
  3.  * @param  {Boolean} destroy true 表示将自己移除的同时销毁自己，false 表示仅移除但不销毁
  4.  * @return {null}
  5.  */
  6. remove(destroy)
destroy()

销毁并将自己从父元素中移除（如果有父元素的话）

具体的 shape 创建

Line 线

  1. new G.Shape.Line({
  2.   attrs: {
  3.     x1: 50, // 线段起始点 x 坐标
  4.     y1: 50,// 线段起始点 y 坐标
  5.     x2: 100,// 线段结束点 x 坐标
  6.     y2: 100,// 线段结束点 y 坐标
  7.     lineWidth: 40, // html5 canvas 绘图属性
  8.     strokeStyle: '#223273', // html5 canvas 绘图属性
  9.     lineCap: 'round' // html5 canvas 绘图属性
  10.   }
  11. })

Arc 圆弧

  1. new G.Shape.Arc({
  2.   attrs: {
  3.     x: 20, // 圆心 x 坐标
  4.     y: 20, // 圆心 y 坐标
  5.     r: 50, // 半径
  6.     startAngle: 0, // 起始弧度
  7.     endAngle: Math.PI / 2, // 结束弧度
  8.     lineWidth: 2, // html5 canvas 绘图属性
  9.     stroke: '#18901f' // html5 canvas 绘图属性
  10.   }
  11. })

Circle 圆

  1. new G.Shape.Circle({
  2.   attrs: {
  3.     x: 10, // 圆心 x 坐标
  4.     y: 10, // 圆心 y 坐标
  5.     r: 50, // 半径
  6.     fill: 'red' // html5 canvas 绘图属性
  7.   }
  8. });

Polygon 多边形

  1. new G.Shape.Polygon({
  2.   attrs: {
  3.     points: [
  4.       { x: 10, y: 10 },
  5.       { x: 20, y: 45 },
  6.       { x: 40, y: 80 },
  7.       { x: 123, y: 70 },
  8.       { x: 80, y: 32 }
  9.     ], // 组成多边形的各个点
  10.     lineWidth: 1, // html5 canvas 绘图属性
  11.     fill: 'red' // html5 canvas 绘图属性
  12.   }
  13. })

Polyline 多点线段

  1. new G.Shape.Polyline({
  2.   attrs: {
  3.     points: [
  4.       { x: 10, y: 10 },
  5.       { x: 20, y: 45 },
  6.       { x: 40, y: 80 },
  7.       { x: 123, y: 70 },
  8.       { x: 80, y: 32 }
  9.     ],
  10.     smooth: true | false, // 是否转曲线，默认为 false，绘制曲线时使用
  11.     lineWidth: 1, // html5 canvas 绘图属性
  12.     stroke: 'red' // html5 canvas 绘图属性
  13.   }
  14. })

Rect 矩形

  1. new G.Shape.Rect({
  2.   attrs: {
  3.     x: 50, // 矩形左上角 x 坐标
  4.     y: 50, // 矩形左上角 y 坐标
  5.     height: 20, // 矩形高度
  6.     width: 80, // 矩形宽度
  7.     lineWidth: 1, // html5 canvas 绘图属性
  8.     fill: '#1890FF', // html5 canvas 绘图属性
  9.     strokeStyle: '#000', // html5 canvas 绘图属性
  10.     radius: 0 // 圆角的设置，可以是数值或者数组格式，支持为四个夹角分别设置，用法同 padding
  11.   }
  12. })

radius 圆角的设置如下图所示：
G - 图4

Sector 扇形

  1. new G.Shape.Sector({
  2.   attrs: {
  3.     x: 100, // 圆心 x 坐标
  4.     y: 150, // 圆心 y 坐标
  5.     r: 50, // 圆环外半径
  6.     r0: 30, // 圆环内半径
  7.     startAngle: -Math.PI / 3, // 起始弧度
  8.     endAngle: Math.PI / 2, // 结束弧度
  9.     lineWidth: 0, // html5 canvas 绘图属性
  10.     fill: '#223273' // html5 canvas 绘图属性
  11.   }
  12. });

Text 文本

  1. new G.Shape.Text({
  2.   attrs: {
  3.     x: 30, // 显示位置 x 坐标
  4.     y: 30, // 显示位置 x 坐标
  5.     fontFamily: 'Arial', // 字体
  6.     fontSize: 12, // 字体大小
  7.     fontStyle: 'normal',
  8.     fontWeight: 'normal',
  9.     fontVariant: 'normal',
  10.     fill: 'red', // html5 canvas 绘图属性
  11.     lineWidth: 1, // html5 canvas 绘图属性
  12.     rotate: Math.PI // 文本旋转，以弧度为单位
  13.   }
  14. });

Custom 自定义图形

  1. new G.Shape.Custom({
  2.   attrs: {},
  3.   createPath(context) {
  4.     // 在这里绘制图形
  5.   },
  6.   calculateBox() {
  7.     // 自定义包围盒
  8.   }
  9. })

Matrix

提供 3x2 矩阵操作方法，具体提供了以下方法：

multiply(m1, m2)

两个矩阵相乘。

  1. /**
  2.   * 两个矩阵相乘
  3.   * @param  {Array} m1 左矩阵
  4.   * @param  {Array} m2 右矩阵
  5.   * @return {Array}    返回结果
  6.   */
  7. multiply(m1, m2)

scale(out, m, v)

缩放变换。

  1. /**
  2.   * 缩放变换
  3.   * @param  {Array} out 该变量用于存储缩放结果
  4.   * @param  {Array} m   需要变换矩阵
  5.   * @param  {Array} v   缩放向量 [ sx, sy ]
  6.   * @return {Array}     返回结果
  7.   */
  8. scale(out, m, v)

rotate(out, m, radian)

旋转变换。

  1. /**
  2.   * 旋转变换
  3.   * @param  {Array} out      该变量用于存储缩放结果
  4.   * @param  {Array} m        需要变换矩阵
  5.   * @param  {Array} radian   旋转的弧度
  6.   * @return {Array}          返回结果
  7.   */
  8. rotate(out, m, radian)

translate(out, m, v)

平移变换。

  1. /**
  2.   * 平移变换。
  3.   * @param  {Array} out      该变量用于存储缩放结果
  4.   * @param  {Array} m        需要变换矩阵
  5.   * @param  {Array} v        平移向量 [ x, y ]
  6.   * @return {Array}          返回结果
  7.   */
  8. translate(out, m, v)

transform(m, actions)

进行平移、旋转、缩放的变换，所有的操作配置在 actions 属性中进行，actions 支持的操作包含 't'（translate）、's'（scale）、'r'（rotate），可进行任意组合，如下实例所示：

  1. [
  2.   [ 't', x, y ], // t 表示 translate, x 表示 x 方向的位移值，y 表示 y 方向的位移值
  3.   [ 's', sx, sy ], // s 表示 scale, sx 表示 x 方向上的缩放值，sy 表示 y 方向的缩放值
  4.   [ 'r', radian] // r 表示 rotate，radian 表示旋转的弧度值
  5. ]
  1. /**
  2.   *
  3.   * @param  {Array} m        需要变换矩阵
  4.   * @param  {Array} actions  变换操作集合
  5.   * @return {Array}          返回结果
  6.   */
  7. transform(m, actions)

Vector2

二维向量操作方法，具体提供的方法如下：

create()

创建一个新的二维向量，返回结果为 [ 0, 0 ]。

length(v)

  1. /**
  2.  * 计算向量的长度
  3.  * @param {Array} v   要计算的向量
  4.  * @return {Number}   返回该向量的长度
  5.  */
  6. length(v)

normalize(out, v)

  1. /**
  2.  * 向量归一化
  3.  * @param {Array} out   该变量用于存储归一化结果
  4.  * @param {Array} v     操作对象
  5.  * @return {Array} out  返回归一化的结果
  6.  */
  7. normalize(out, v)

add(out, v1, v2)

  1. /**
  2.  * v1 和 v2 两向量相加
  3.  * @param {Array} out    该变量用于存储结果
  4.  * @param {Array} v1     操作向量 1
  5.  * @param {Array} v2     操作向量 2
  6.  * @return {Array} out   返回相加结果
  7.  */
  8. add(out, v1, v2)

sub(out, v1, v2)

  1. /**
  2.  * v1 和 v2 两向量相减
  3.  * @param {Array} out    该变量用于存储结果
  4.  * @param {Array} v1     操作向量 1
  5.  * @param {Array} v2     操作向量 2
  6.  * @return {Array} out   返回相减结果
  7.  */
  8. sub(out, v1, v2)

scale(out, v, s)

  1. /**
  2.  * 向量缩放
  3.  * @param {Array} out    该变量用于存储结果
  4.  * @param {Array} v      操作向量
  5.  * @param {Array} s      缩放向量 [ sx, sy ]
  6.  * @return {Array} out   返回结果
  7.  */
  8. scale(out, v, s)

dot(v1, v2)

两向量点乘。

direction(v1, v2)

计算 v1、v2 两项量的方向。

angle(v1, v2)

计算 v1、v2 两项量的夹角。

angleTo(v1, v2, direction)

计算 v1、v2 两项量的夹角。

zero(v)

判断 v 是否为 0 向量。

distance(v1, v2)

计算两项量之间的距离。

clone(v)

克隆向量。

min(out, v1, v2)

求两个向量最小值。

max(out, v1, v2)

求两个向量最大值。

transformMat2d(out, v, m)

  1. /**
  2.  * 矩阵左乘向量
  3.  * @param  {Array} out  存储计算结果
  4.  * @param  {Array} v    向量
  5.  * @param  {Array} m    矩阵
  6.  * @return {Array}      返回结果
  7.  */
  8. transformMat2d(out, v, m)

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/g.html