Canvas

概述

本文档是G2图形库——G2.Canvas的API文档, 您能从该文档中快速查找到我们的绘图引擎提供的所有对外发布的方法、配置、属性 及它们的使用方法。如果有你觉得描述的不够清晰的地方敬请联系我们！

直线——line

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c1',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.scale(0.5, 0.5);
  7.   canvas.addShape('line', {
  8.     attrs: {
  9.       x1: 20,
  10.       y1: 20,
  11.       x2: 280,
  12.       y2: 280,
  13.       stroke: 'red'                       // 颜色名字
  14.     }
  15.   });
  16.   canvas.addShape('line', {
  17.     attrs: {
  18.       x1: 20,
  19.       y1: 300 + 20,
  20.       x2: 280,
  21.       y2: 300 + 280,
  22.       arrow: true,                                             // 显示箭头
  23.       stroke: '#00ff00'                   // 6位十六进制
  24.     }
  25.   });
  26.   canvas.addShape('line', {
  27.     attrs: {
  28.       x2: 300 + 20,
  29.       y2: 300 + 20,
  30.       x1: 300 + 280,
  31.       y1: 300 + 280,
  32.       arrow: true,                                             // 显示箭头
  33.       stroke: '#00f'                      // 3位十六进制
  34.     }
  35.   });
  36.   canvas.addShape('line', {
  37.     attrs: {
  38.       x1: 20,
  39.       y1: 600 + 20,
  40.       x2: 280,
  41.       y2: 600 + 280,
  42.       lineDash: [10,10],
  43.       stroke: 'rgb(100, 100, 200)'         // rgb数字模式
  44.     }
  45.   });
  46.   canvas.addShape('line', {
  47.     attrs: {
  48.       x1: 300 + 20,
  49.       y1: 600 + 20,
  50.       x2: 300 + 280,
  51.       y2: 600 + 280,
  52.       lineDash: [10,20, 10],
  53.       stroke: 'rgba(100, 100, 200, 0.5)'   // rgba数字模式
  54.     }
  55.   });
  56.   canvas.addShape('line', {
  57.     attrs: {
  58.       x1: 600 + 20,
  59.       y1: 600 + 20,
  60.       x2: 600 + 280,
  61.       y2: 600 + 280,
  62.       lineDash: [50,50],
  63.       stroke: 'rgb(34%, 85%, 48%)'         // rgb百分比模式
  64.     }
  65.   });
  66.   canvas.addShape('line', {
  67.     attrs: {
  68.       x1: 900 + 20,
  69.       y1: 600 + 20,
  70.       x2: 900 + 280,
  71.       y2: 600 + 280,
  72.       lineDash: [50,5,50,5],
  73.       stroke: 'rgba(34%, 85%, 48%, 0.5)'   // rgba百分比模式
  74.     }
  75.   });
  76.   canvas.addShape('line', {
  77.     attrs: {
  78.       x1: 20,
  79.       y1: 900 + 20,
  80.       x2: 280,
  81.       y2: 900 + 280,
  82.       stroke: 'l (0) 0:#ff0000 1:#0000ff'                      // 线性渐变
  83.     }
  84.   });
  85.   canvas.addShape('line', {
  86.     attrs: {
  87.       x1: 300 + 20,
  88.       y1: 900 + 20,
  89.       x2: 300 + 280,
  90.       y2: 900 + 280,
  91.       stroke: 'r (0.5, 0.5, 0) 0:rgb(0, 0, 255) 1:#ff0000'    // 迳向渐变
  92.     }
  93.   });
  94.   canvas.draw();

属性

x1

[Number]，默认值: 0 第一个点的 x 值。

y1

[Number]，默认值: 0 第一个点的 y 值。

x2

[Number]，默认值: 0 第二个点的 x 值。

y2

[Number]默认值: 0 第二点的 y 值。

arrow

[Boolean]，箭头有第一个点指向第二个点

lineWidth

[Number]，线宽。

lineDash

[String || Array]，虚线。

stroke

[String]，边框颜色。

storkeOpacity

[Number]，边框透明度。

方法

getPoint

参数
  • t 百分比
返回
  • point 画布坐标点

二阶bezier曲线——quadratic

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c2',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.scale(0.5, 0.5);
  7.   canvas.addShape('quadratic', {
  8.     attrs: {
  9.       p1: [100, 600-250],
  10.       p2: [300, 500-250],
  11.       p3: [500, 600-250],
  12.       arrow: true,
  13.       stroke: 'black'
  14.     }
  15.   });
  16.   canvas.addShape('quadratic', {
  17.     attrs: {
  18.       p1: [700, 600-250],
  19.       p2: [900, 800-250],
  20.       p3: [1100, 500-250],
  21.       lineDash: [20, 20],
  22.       stroke: 'black'
  23.     }
  24.   });
  25.   canvas.addShape('quadratic', {
  26.     attrs: {
  27.       p1: [100, 600],
  28.       p2: [300, 500],
  29.       p3: [500, 600],
  30.       stroke: 'black'
  31.     }
  32.   });
  33.   canvas.addShape('quadratic', {
  34.     attrs: {
  35.       p1: [700, 600],
  36.       p2: [900, 800],
  37.       p3: [1100, 500],
  38.       stroke: 'black'
  39.     }
  40.   });
  41.   addMarker(canvas, [
  42.     [100, 600],
  43.     [300, 500],
  44.     [500, 600],
  45.     [700, 600],
  46.     [900, 800],
  47.     [1100, 500]
  48.   ]);
  49.   function addMarker(canvas, points, cfg){
  50.     for (var i = 0; i < points.length; i++) {
  51.       var circle = canvas.addShape('circle', {
  52.         attrs: {
  53.           x: points[i][0],
  54.           y: points[i][1],
  55.           r: 8,
  56.           stroke: '#F93D26'
  57.         }
  58.       });
  59.     }
  60.   }
  61.   canvas.draw();

属性

p1

二阶贝赛尔曲线的第一个点，曲线总是开始于这个点。

警告：不要仅仅设置一点的某一个分量，要设置就把整个点进行替换。quadratic.attr('p1', [200, 300]) 这样做是正确的。

p2

二阶贝赛尔曲线控制点，曲线总是不经过这个点，不过这个点会影响曲线的形状

警告：不要仅仅设置一点的某一个分量，要设置就把整个点进行替换。quadratic.attr('p2', [200, 300]) 这样做是正确的。

p3

二阶贝赛尔曲线的终点，曲线总是结束于这个点

警告：不要仅仅设置一点的某一个分量，要设置就把整个点进行替换。quadratic.attr('p3', [200, 300]) 这样做是正确的。

arrow

箭头只会出现在p3这个点

stroke

边框颜色

storkeOpacity

边框透明度

方法

getPoint

参数
  • t 百分比
返回
  • point 画布坐标点

三阶bezier曲线——cubic

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c3',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.scale(0.5, 0.5);
  7.   canvas.addShape('cubic', {
  8.     attrs: {
  9.       p1: [75, 300],
  10.       p2: [200, 120],
  11.       p3: [450, 350],
  12.       p4: [510, 150],
  13.       stroke: 'black',
  14.       lineDash: [20,20]
  15.     }
  16.   });
  17.   canvas.addShape('cubic', {
  18.     attrs: {
  19.       p1: [600 + 90, 150],
  20.       p2: [600 + 150, 350],
  21.       p3: [600 + 300, 120],
  22.       p4: [600 + 525, 300],
  23.       stroke: '#42E1DC',
  24.       arrow: true
  25.     }
  26.   });
  27.   canvas.addShape('cubic', {
  28.     attrs: {
  29.       p1: [20, 600 + 100],
  30.       p2: [200, 600 + 100],
  31.       p3: [400, 600 + 500],
  32.       p4: [520, 600 + 200],
  33.       stroke: 'r (0.5, 0.5, 1) 0:#ffaa00 1:#11aacc'
  34.     }
  35.   });
  36.   canvas.addShape('cubic', {
  37.     attrs: {
  38.       p1: [600 + 20, 600 + 100],
  39.       p2: [600 + 200, 600 + 100],
  40.       p3: [600 + 400, 600 + 500],
  41.       p4: [600 + 520, 600 + 200],
  42.       stroke: 'r (0.5, 0.5, 1) 0:#ffaa00 0.5:#00ffff 1:#11aacc'
  43.     }
  44.   });
  45.   addMarker(canvas, [
  46.     [75, 300],
  47.     [200, 120],
  48.     [450, 350],
  49.     [510, 150]
  50.   ]);
  51.   function addMarker(canvas, points, cfg){
  52.     for (var i = 0; i < points.length; i++) {
  53.       var circle = canvas.addShape('circle', {
  54.         attrs: {
  55.           x: points[i][0],
  56.           y: points[i][1],
  57.           r: 8,
  58.           stroke: '#F93D26'
  59.         }
  60.       });
  61.     }
  62.   }
  63.   canvas.draw();

属性

p1

cubic的第一个点，曲线总是开始于这个点。

警告：不要仅仅设置一点的某一个分量，要设置就把整个点进行替换。quadratic.attr('p1', [200, 300]) 这样做是正确的。

p2

cubic第一个控制点，曲线总是不经过这个点，不过这个点会影响曲线的形状

警告：不要仅仅设置一点的某一个分量，要设置就把整个点进行替换。quadratic.attr('p2', [200, 300]) 这样做是正确的。

p3

cubic第二个控制点，曲线总是不经过这个点，不过这个点会影响曲线的形状

警告：不要仅仅设置一点的某一个分量，要设置就把整个点进行替换。quadratic.attr('p3', [200, 300]) 这样做是正确的。

p4

cubic的终点，曲线总是结束于这个点

警告：不要仅仅设置一点的某一个分量，要设置就把整个点进行替换。quadratic.attr('p4', [200, 300]) 这样做是正确的。

arrow

箭头只会出现在p3这个点

stroke

边框颜色

storkeOpacity

边框透明度

方法

getPoint

参数
  • t 百分比
返回
  • point 画布坐标点

圆弧线——arc

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c4',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.scale(0.5, 0.5);
  7.   canvas.addShape('arc', {
  8.     attrs: {
  9.       x: 300,
  10.       y: 300,
  11.       r: 200,
  12.       startAngle: 30,
  13.       endAngle: 260,
  14.       stroke: 'black',
  15.       lineDash: [20,20]
  16.     }
  17.   });
  18.   canvas.addShape('arc', {
  19.     attrs: {
  20.       x: 300,
  21.       y: 600,
  22.       r: 200,
  23.       startAngle: 30,
  24.       endAngle: 90,
  25.       stroke: '#0D2031',
  26.     }
  27.   });
  28.   canvas.addShape('arc', {
  29.     attrs: {
  30.       x: 900,
  31.       y: 600,
  32.       r: 150,
  33.       startAngle: 70,
  34.       endAngle: 230,
  35.       stroke: 'red',
  36.       arrow: true
  37.     }
  38.   });
  39.   canvas.draw();

属性

x

默认值: 0 圆心的x值

y

默认值: 0 圆心的y值

r

默认值: 0 圆弧的半径

startAngle

默认值: 0 开始角度 角度制

endAngle

默认值: 0 结束角度 角度制

clockwise

默认值: false

表示画轴的方向

值的范围: true表示逆时针，false顺时针

arrow

默认值: false

圆弧是否带有箭头，false不带，true带

箭头总是出现在endAngle这个位置

stroke

边框颜色

storkeOpacity

边框透明度

方法

getPoint

参数
  • t 百分比
返回
  • point 画布坐标点

多段线——polyline

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c5',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.scale(0.5, 0.5);
  7.   canvas.addShape('polyline', {
  8.     attrs: {
  9.       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]],
  10.       stroke: 'red'
  11.     }
  12.   });
  13.   canvas.draw();

属性

points

多个点组成的数组, 数组的每一项是一个数组[x, y], 这个样个数组代表一个点，x是这个点的x坐标，y是这个点的y坐标

arrow

默认值: false

是否显示箭头, true显示, false不显示

箭头只会出现在points中最后一个点

stroke

边框颜色

storkeOpacity

边框透明度

方法

getPoint

参数
  • t 百分比
返回
  • point 画布坐标点

矩形——rect

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c6',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.addShape('rect', {
  7.     attrs: {
  8.       x: 150,
  9.       y: 150,
  10.       width: 150,
  11.       height: 150,
  12.       stroke: 'black'
  13.     }
  14.   });
  15.   canvas.addShape('rect', {
  16.     attrs: {
  17.       x: 150-50,
  18.       y: 150-50,
  19.       width: 150,
  20.       height: 150,
  21.       stroke: 'red'
  22.     }
  23.   });
  24.   canvas.addShape('rect', {
  25.     attrs: {
  26.       x: 150+50,
  27.       y: 150+50,
  28.       width: 150,
  29.       height: 150,
  30.       fill: 'rgba(129,9,39,0.5)',
  31.       stroke: 'blue'
  32.     }
  33.   });
  34.   canvas.draw();

属性

x

矩形的左上角x的坐标

y

矩形的左上角y的坐标

width

矩形的宽度

height

矩形的高度

radius

矩形的圆角半径

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

圆——circle

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c7',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.addShape('circle', {
  7.     attrs: {
  8.       x: 150+200,
  9.       y: 150,
  10.       r: 70,
  11.       stroke: 'black'
  12.     }
  13.   });
  14.   canvas.addShape('circle', {
  15.     attrs: {
  16.       x: 150-50,
  17.       y: 150-50,
  18.       r: 60,
  19.       lineDash: [20, 20],
  20.       stroke: 'red'
  21.     }
  22.   });
  23.   canvas.addShape('circle', {
  24.     attrs: {
  25.       x: 150+50,
  26.       y: 150+150,
  27.       r: 100,
  28.       fill: 'rgba(129,9,39,0.5)',
  29.       stroke: 'blue'
  30.     }
  31.   });
  32.   canvas.draw();

属性

x

圆心坐标的x坐标

y

圆心坐标的y坐标

r

圆的半径

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

椭圆形——ellipse

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c8',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.addShape('ellipse', {
  7.     attrs: {
  8.       x: 150+200,
  9.       y: 150,
  10.       rx: 70,
  11.       ry: 30,
  12.       stroke: 'black'
  13.     }
  14.   });
  15.   canvas.addShape('ellipse', {
  16.     attrs: {
  17.       x: 150-50,
  18.       y: 150-50,
  19.       rx: 50,
  20.       ry: 50,
  21.       lineDash: [20, 20],
  22.       stroke: 'red'
  23.     }
  24.   });
  25.   canvas.addShape('ellipse', {
  26.     attrs: {
  27.       x: 150+50,
  28.       y: 150+150,
  29.       rx: 30,
  30.       ry: 100,
  31.       fill: 'rgba(129,9,39,0.5)',
  32.       stroke: 'blue'
  33.     }
  34.   });
  35.   canvas.draw();

属性

x

椭圆圆心坐标，x坐标的值

y

椭圆圆心坐标，y坐标的值

rx

椭圆横半轴的大小

ry

椭圆纵半轴的大小

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

扇形——fan

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c9',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.addShape('fan', {
  7.     attrs: {
  8.       x: 150+200,
  9.       y: 150,
  10.       rs: 20,
  11.       re: 80,
  12.       startAngle: 30,
  13.       endAngle: 130,
  14.       stroke: 'black'
  15.     }
  16.   });
  17.   canvas.addShape('fan', {
  18.     attrs: {
  19.       x: 150-50,
  20.       y: 150-50,
  21.       rs: 30,
  22.       re: 70,
  23.       startAngle: 0,
  24.       endAngle: 90,
  25.       lineDash: [10, 10],
  26.       stroke: 'red'
  27.     }
  28.   });
  29.   canvas.addShape('fan', {
  30.     attrs: {
  31.       x: 150+50,
  32.       y: 150+150,
  33.       rs: 5,
  34.       re: 40,
  35.       startAngle: 20,
  36.       endAngle: 300,
  37.       fill: 'rgba(129,9,39,0.5)',
  38.       stroke: 'blue'
  39.     }
  40.   });
  41.   canvas.draw();

属性

x

扇形圆心的坐标的x坐标

y

扇形圆心的坐标的y坐标

rs

扇形半径的内半径

re

扇形半径的外半径

startAngle

扇形的起始角度

endAngle

扇形的结束角度

clockwise

开始角度到结束角度的旋转方向

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

多边形——polygon

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c9.1',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.addShape('polygon', {
  7.     attrs: {
  8.       points: [
  9.         [150, 350],
  10.         [100, 90],
  11.         [150, 160],
  12.         [240, 120]
  13.       ],
  14.       stroke: 'l (0) 0.2:#ff00ff 1:#0000ff'
  15.     }
  16.   });
  17.   canvas.draw();

属性

points

多边形的各个顶点

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

图像——image

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c10',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.addShape('image', {
  7.     attrs: {
  8.       x: 150+200,
  9.       y: 150,
  10.       img: 'https://zos.alipayobjects.com/rmsportal/FDWrsEmamcNvtEf.png'
  11.     }
  12.   });
  13.   canvas.addShape('image', {
  14.     attrs: {
  15.       x: 150-50,
  16.       y: 150-50,
  17.       img: 'https://zos.alipayobjects.com/rmsportal/nAVchPnSaAWncPj.png'
  18.     }
  19.   });
  20.   canvas.addShape('image', {
  21.     attrs: {
  22.       x: 150+50,
  23.       y: 150+150,
  24.       img: 'https://zos.alipayobjects.com/rmsportal/GHGrgIDTVMCaYZT.png'
  25.     }
  26.   });
  27.   canvas.draw();

属性

x

图片左上角坐标的x值

y

图片左上角坐标的y值

img

图片，可以是图片的地址，或者是一个image对象

width

图片的宽度，如果不设，则按照源图像的宽度进行设置

height

图片的高度，如果不设，则按照源图形的高度进行设置

sx

可以在源图形中截取一个矩形区域的源图形，这是截取的区域左上角坐标的x值

sy

可以在源图形中截取一个矩形区域的源图形，这是截取的区域左上角坐标的y值

swidth

可以在源图形中截取一个矩形区域的源图形，这是截取的区域左上角坐标的swidth值

sheight

可以在源图形中截取一个矩形区域的源图形，这是截取的区域左上角坐标的sheight值

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

文本——text

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c11',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.addShape('text', {
  7.     attrs: {
  8.       x: 150,
  9.       y: 150,
  10.       fontFamily: 'PingFang SC',
  11.       text: '文本文本',
  12.       fontSize: 90,
  13.       stroke: 'black'
  14.     }
  15.   });
  16.   canvas.addShape('text', {
  17.     attrs: {
  18.       x: 150+100,
  19.       y: 250,
  20.       fontFamily: 'PingFang SC',
  21.       fontSize: 90,
  22.       text: '字体',
  23.       lineDash: [10, 10],
  24.       stroke: 'red'
  25.     }
  26.   });
  27.   canvas.addShape('text', {
  28.     attrs: {
  29.       x: 150+50,
  30.       y: 150+150,
  31.       text: '对齐方式',
  32.       fontFamily: 'Hiragino Sans GB',
  33.       fontSize: 100,
  34.       textAlign: 'center',
  35.       textBaseline: 'top',
  36.       fill: 'rgba(129,9,39,0.5)',
  37.       stroke: 'blue'
  38.     }
  39.   });
  40.   canvas.draw();

属性

x

文字的左上角的x值

y

文字的左上角的y值

text

文字内容

fontFamily

字体 参见

fontSize

字体大小 参见

fontWeight

字体粗细 参见

fontStyle

字体样式 参见

textAlign

左右对齐方式

image

textBaseline

上下对齐方式

image

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

svg的path——path

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c12',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   var path = canvas.addShape('path', {
  7.     attrs: {
  8.       path: 'M100,600' +
  9.             'l 50,-25' +
  10.             'a25,25 -30 0,1 50,-25' +
  11.             'l 50,-25' +
  12.             'a25,50 -30 0,1 50,-25' +
  13.             'l 50,-25' +
  14.             'a25,75 -30 0,1 50,-25' +
  15.             'l 50,-25' +
  16.             'a25,100 -30 0,1 50,-25' +
  17.             'l 50,-25' +
  18.             'l 0, 200,' +
  19.             'z',
  20.       lineWidth: 10,
  21.       lineJoin: 'round',
  22.       stroke: '#54BECC'
  23.     }
  24.   });
  25.   path.translate(0, -200);
  26.   canvas.draw();

属性

path

path规范的命令 参见

fill

填充颜色

fillOpacity

填充透明度

stroke

边框颜色

storkeOpacity

边框透明度

动画——animate

动画

方法

animate

cfg 配置项{Object}含：

  • attrs 图形属性
  • matrix 图形矩阵
  • repeat 是否重复
  • destroy 是否执行完自动销毁

duration 持续时间{Number}毫秒 ms

easing 缓动函数{Sring}含：

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

callback 回调函数动画执行完毕执行

  1. shape.animate(cfg, duration, easing, callback);

示例

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c_animate',
  3.     width: 600,
  4.     height: 300
  5.   });
  6.   var circle = canvas.addShape('circle', {
  7.     attrs: {
  8.       x: 0,
  9.       y: 150,
  10.       r: 70,
  11.       fill: 'blue',
  12.       opacity: 0.6
  13.     }
  14.   });
  15.   circle.animate({
  16.     x: 500,
  17.     fill: 'red',
  18.     repeat: true,
  19.     r: 40
  20.   },5000, 'linear');
  21.   canvas.draw();

通用属性

下列属性是所有元素都共有的。

capture

是否可被捕捉

zIndex

图层层级

lineWidth

线宽画布坐标

lineDash

虚线a1, a2 …… 分别指的是实线和空线所占像素的多少

  • [a1, a2, a3……]
  • "a1 a2"

clip

剪切图形可以接受另外一个图形作为它的剪切图形, 用作剪切的图形必须是能够填充(fill)的图形。

  1.   var canvas = new G6.Canvas({
  2.     containerId: 'c100',
  3.     width: 600,
  4.     height: 600
  5.   });
  6.   canvas.scale(0.5, 0.5);
  7.   var line1 = canvas.addShape('line', {
  8.     attrs: {
  9.       x1: 20,
  10.       y1: 120,
  11.       x2: 580,
  12.       y2: 120,
  13.       stroke: 'l (0) 0:#ff0000 1:#0000ff'
  14.     }
  15.   });
  17.   var polygon1 = canvas.addShape('polygon', {
  18.     attrs: {
  19.       points: [
  20.         [600 + 100, 20],
  21.         [600 + 20, 200],
  22.         [1200 - 20, 100],
  23.         [1200 - 100, 300 - 20]
  24.       ],
  25.       fill: 'green'
  26.     }
  27.   });
  29.   var line2 = canvas.addShape('line', {
  30.     attrs: {
  31.       x1: 20 + 300,
  32.       y1: 120 + 300 ,
  33.       x2: 580 + 300,
  34.       y2: 120 + 300,
  35.       stroke: 'l (0) 0:#ff0000 1:#0000ff'
  36.     }
  37.   });
  39.   var polygon2 = canvas.addShape('polygon', {
  40.     attrs: {
  41.       points: [
  42.         [600 + 100 - 300, 20 + 300],
  43.         [600 + 20 - 300, 200 + 300],
  44.         [1200 - 20 - 300, 100 + 300],
  45.         [1200 - 100 - 300, 300 - 20 + 300]
  46.       ],
  47.       fill: 'green'
  48.     }
  49.   });
  51.   var line3 = canvas.addShape('line', {
  52.     attrs: {
  53.       x1: 20 + 300,
  54.       y1: 120 + 600 ,
  55.       x2: 580 + 300,
  56.       y2: 120 + 600,
  57.       stroke: 'l (0) 0:#ff0000 1:#0000ff'
  58.     }
  59.   });
  61.   var polygon3 = canvas.addShape('polygon', {
  62.     attrs: {
  63.       points: [
  64.         [600 + 100 - 300, 20 + 600],
  65.         [600 + 20 - 300, 200 + 600],
  66.         [1200 - 20 - 300, 100 + 600],
  67.         [1200 - 100 - 300, 300 - 20 + 600]
  68.       ],
  69.       stroke: 'green'
  70.     }
  71.   });
  73.   var polygon4 = canvas.addShape('polygon', {
  74.     attrs: {
  75.       points: [
  76.         [600 + 100 - 300, 20 + 900],
  77.         [600 + 20 - 300, 200 + 900],
  78.         [1200 - 20 - 300, 100 + 900],
  79.         [1200 - 100 - 300, 300 - 20 + 900]
  80.       ]
  81.     }
  82.   });
  84.   var line4 = canvas.addShape('line', {
  85.     attrs: {
  86.       x1: 20 + 300,
  87.       y1: 120 + 900 ,
  88.       x2: 580 + 300,
  89.       y2: 120 + 900,
  90.       stroke: 'l (0) 0:#ff0000 1:#0000ff',
  91.       clip: polygon4
  92.     }
  93.   });
  94.   canvas.draw();

通用属性值

颜色

  • 纯色 #fff || #ffffff || red || rgb(255,255,255) || rgba(255,255,255,1) || hsl(255, 100%, 50%)
  • 渐变色
    • 线性渐变 'l (45) 0:#ffff00 1:#00ffff' // 一个斜向45度的渐变
    • 径向渐变 'r (0.5, 0.5, 0) 0:#fff 1:#ff0000' // 渐变在正中心发生

透明度

0～1

  • 0 全透明
  • 1 不透明

通用方法

find(id)

通过id查找元素

translate(x, y)

平移方法

rotate(r)

旋转，旋转中心是其父元素的自身坐标轴原点

scale(sx, sy) 缩放

缩放，缩放中心是其父元素的自身坐标轴原点

setMatrix(Matrix)

设置变换矩阵

getMatrix()

获取变换矩阵

getBBox()

获取包围盒

hide()

隐藏

show()

显示

destroy()

销毁自身

remove(destroy)

删除自己, 从父元素中删除自己如果destroy为true，则移除后销毁自身