绘图引擎 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 =newCanvas({
  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. newCanvas({
  4. el:'c1',
  5. width:500,
  6. height:500
  7. });
  • 参数:config
    类型:Object,创建 canvas 对象需要的传递的属性,具体包含:
属性名类型描述
elString/HtmlElement对应 canvas dom 的 id 或者 canvas dom 对象。
contextCanvasRenderingContext2Dcanvas 上下文,即通过传入 canvas 上下文对象来创建 Canvas 对象。
widthNumbercanvas 的宽度,可选,如果不设置则默认按照传入 canvas 元素的实际宽度。
heightNumbercanvas 的高度,可选,如果不设置则默认按照传入 canvas 元素的实际高度。
pixelRatioNumbercanvas 的显示精度,默认读取当前设备的像素比。

方法

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. newGroup({
  2. zIndex:0,
  3. visible:true
  4. });
  • 参数:config
    类型:Object,创建 group 对象需要的传递的属性,具体包含:
属性名类型描述
zIndexNumberz-index 值,用于调整绘制顺序。
visibleBoolean显示还是隐藏。
classNameString对象标记,由用户指定

方法

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. newShape.Line({
  2. zIndex:0,
  3. visible:true,
  4. attrs:{}
  5. });
  • 参数:config
    类型:Object,创建 shape 对象需要的传递的属性,具体包含:
属性名类型描述
attrsObject图形属性,必须设置。
zIndexNumber层次索引。
visibleBoolean显示还是隐藏。
classNameString对象标记,由用户指定

通用方法

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