获取方式

  1. const Shape = F2.G.Shape;

创建 Shape 实例

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

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

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

new Shape[shapeType](config) 创建某个类型的 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()
  7. /**
  8.  * 返回同 name 对应的图形属性值
  9.  * @return 返回同 name 对应的图形属性值
  10.  */
  11. attr(name)
  13. /**
  14.  * 为具体的图形属性设置值
  15.  * @param  {String} name  图形属性名
  16.  * @param  {Any} value 属性值
  17.  * @return {Shape}       返回当前 shape 实例
  18.  */
  19. attr(name, value)
  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. }

Shape - 图1

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 圆角的设置如下图所示：
Shape - 图2

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. })