AntV
Search…
Shape

Shape

new Shape(config)
Shape constructor. Shapes are primitive objects such as rectangles, circles, text, lines, etc.
  • config: Object, it contains the following attributes:
Name
Type
Description
zIndex
Number
z-index for shape, used to adjust the drawing order.
visible
Boolean
visible or hidden
className
String
mark of the object, specified by users
attrs
Object
graphical attributes for shape, must be set.
We provide the following shape classes:
1
const {
2
Line,
3
Arc,
4
Circle,
5
Polygon,
6
Polyline,
7
Rect,
8
Sector,
9
Text,
10
Custom
11
} = Shape;
Copied!
These shapes have general attributes and different shapes have their own attrs.
Use new Shape[shapeType](config) to create a specific type of shape.
Example:
1
// create a line
2
const line = new F2.G.Shape.Line({
3
zIndex: 0,
4
visible: true,
5
attrs: {
6
x1: 10,
7
y1: 10,
8
x2: 100,
9
y2: 10,
10
lineWidth: 1,
11
stroke: '#1890ff'
12
}
13
});
Copied!

Methods

getType()
1
/**
2
* The type of shape
3
* @return {String}
4
*/
5
getType()
Copied!
isDestroyed()
1
/**
2
* Wether the object is destroyed.
3
* @return {Boolean}
4
*/
5
isDestroyed()
Copied!
isVisible()
1
/**
2
* Wether the current shape object is visible.
3
* @return {Boolean}
4
*/
5
isVisible()
Copied!
isShape()
1
/**
2
* Wether that the current object is a shape type
3
* @return {Boolean}
4
*/
5
isShape()
Copied!
attr()
set or get the attributes.
1
/**
2
* Return all the graphical attributes
3
* @return {Object}
4
*/
5
attr()
6
7
/**
8
* get the graphical attribute of the name
9
* @return The corresponding attribute
10
*/
11
attr(name)
12
13
/**
14
* Set graphical attribute value for the attribute name
15
* @param {String} name Attribue name
16
* @param {Any} value Attribute value
17
* @return {Shape} The current shape object
18
*/
19
attr(name, value)
20
21
/**
22
* Set multiple graphical attributes
23
* @param {Object} config Object contains attributes
24
* @return {Shape} The current shape object
25
*/
26
attr(config)
Copied!
Example:
Use attr('matrix') to get matrix attribute. Use attr('clip') to get clip attribute.
getBBox()
1
/**
2
* Get the minimum bounding box of the shape
3
* @return {Object} The minimum bounding box
4
*/
5
getBBox()
Copied!
The structure of the bounding box is as follows:
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
}
Copied!
getParent()
1
/**
2
* Get the parent element
3
* @return {Group || Canvas} The parent of the current object, may be a group instance or canvas instance
4
*/
5
getParent()
Copied!
show()
1
/**
2
* Display the shape
3
*/
4
show()
Copied!
hide()
1
/**
2
* Hide the shape
3
*/
4
hide()
Copied!
get(name)
1
/**
2
* Get the attribute from shape by attribute name
3
* @param {String} name attribute name
4
* @return {*}
5
*/
6
get(name)
Copied!
set(name, value)
1
/**
2
* Set the attribute value for the corresponding attribute name
3
* @param {String} name attribute name
4
* @param {String} value the value setting for the attribute
5
*/
6
set(name, value)
Copied!
getMatrix()
1
/**
2
* Get the current matrix
3
* @return {Array}
4
*/
5
getMatrix()
Copied!
setMatrix(m)
1
/**
2
* Set matrix
3
* @param {Array} m Matrix array
4
*/
5
setMatrix(m)
Copied!
transform(actions)
Perform matrix transformation on the current object.
1
transform(actions) // actions is an array containing the set of operations
Copied!
The operations supported in actions are 't' (translate), 's' (scale), 'r' (rotate), operations can be combined in any combination order. For example:
1
[
2
[ 't', x, y ], // t for translate, x for offset on x-axis direction, y for offset in y-axis direction
3
[ 's', sx, sy ], // s for scale, sx for scale on x-axis direction, sy for scale on y-axis direction
4
[ 'r', radian] // r for rotate,radian for the radians of the rotation
5
]
Copied!
translate(x, y)
1
/**
2
* Translate the current element
3
* @param {Number} x Offset in x-axis direction
4
* @param {Number} y Offset in y-axis direction
5
*/
6
translate(x, y)
Copied!
rotate(radians)
1
/**
2
* Rotate the current element
3
* @param {Number} radian The radians of the rotation
4
*/
5
rotate(radian)
Copied!
scale(sx, sy)
1
/**
2
* Perform scale operation on current object
3
* @param {Number} sx The scale on x-axis direction
4
* @param {Number} sy The scale on y-axis direction
5
*/
6
scale(sx, sy)
Copied!
setTransform(actions)
Do translating, rotating and scaling operations after resetting the matrix.
1
setTransform(actions) // actions is an array containing operations
Copied!
The actions parameter is same as the parameter in transform(actions).
remove(destroy)
1
/**
2
* Remove item itself from its parent
3
* @param {Boolean} destroy true means to destroy iteself after removing, false means just remove but not destroy.
4
* @return {null}
5
*/
6
remove(destroy)
Copied!
destroy()
Destroy the element itself, if it has a parent, remove it from parent.

Shape.Line

1
new Shape.Line({
2
attrs: {}
3
})
Copied!
Line constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
x1
Number
x value for first line point
y1
Number
y value or first line point
x2
Number
x value for second line point
y2
Number
y value or second line point
lineWidth
Number
set the thickness of lines in space units. See Line Style.
lineCap
String
determines how the end points of every line are drawn.See Line Style.
lineDash
Array
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units).See Line Style.
stroke
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPatter
same as stroke
strokeOpacity
Number
the opacity for stroke.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
Example:
1
const line = new G.Shape.Line({
2
attrs: {
3
x1: 50,
4
y1: 50,
5
x2: 100,
6
y2: 100,
7
lineWidth: 40,
8
strokeStyle: '#223273',
9
lineCap: 'round'
10
}
11
});
Copied!

Shape.Arc

1
new Shape.Arc({
2
attrs: {}
3
})
Copied!
Arc constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
x
Number
center's x coordinate
y
Number
center's y coordinate
r
Number
radius
startAngle
Number
Start angle of the arc, this should be in radian.
endAngle
Number
End angle of the circle, this should be in radian.
stroke
String/CanvasGradient/CanvasPattern
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPatter
same as stroke.
strokeOpacity
Number
the opacity for stroke.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
lineCap
String
determines how the end points of every line are drawn.See Line Style.
lineDash
Array
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units).See Line Style.
lineWidth
Number
sets the thickness of lines in space units.See Line Style.
Example:
1
const arc = new G.Shape.Arc({
2
attrs: {
3
x: 20,
4
y: 20,
5
r: 50,
6
startAngle: 0,
7
endAngle: Math.PI / 2,
8
lineWidth: 2,
9
stroke: '#18901f'
10
}
11
});
Copied!

Shape.Circle

1
new Shape.Circle({
2
attrs: {}
3
})
Copied!
Circle constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
x
Number
center's x coordinate
y
Number
center's y coordinate
r
Number
radius
fill
String/CanvasGradient/CanvasPattern
the color or style to use inside shapes
fillStyle
String/CanvasGradient/CanvasPattern
same as fill
fillOpacity
Number
the opacity for fill style
stroke
String/CanvasGradient/CanvasPattern
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPattern
same as stroke.
strokeOpacity
Number
the opacity for stroke style.
lineWidth
Number
sets the thickness of lines in space units. See Line Style.
lineDash
Array
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units).See Line Style.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
Example:
1
const circle = new G.Shape.Circle({
2
attrs: {
3
x: 10,
4
y: 10,
5
r: 50,
6
fill: 'red'
7
}
8
});
Copied!

Shape.Polyline

1
new Shape.Polyline({
2
attrs: {}
3
})
Copied!
Polyline constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
points
Array
points array, which constructs the polyline.
smooth
Boolean
Wether to draw a curve line, the default value is false.
stroke
String/CanvasGradient/CanvasPattern
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPattern
same as stroke.
strokeOpacity
Number
the opacity for stroke style.
lineCap
String
determines how the end points of every line are drawn.See Line Style.
lineJoin
String
determines how two connecting segments.See Line Styl
lineWidth
Number
sets the thickness of lines in space units. See Line Style.
lineDash
Array
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units).See Line Style.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
Example:
1
const polyline = 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,
11
lineWidth: 1,
12
stroke: 'red'
13
}
14
})
Copied!

Shape.Polygon

1
new Shape.Polygon({
2
attrs: {}
3
})
Copied!
Polygon constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
points
Array
points array, which constructs the polygon.
fill
String/CanvasGradient/CanvasPattern
the color or style to use inside shapes
fillStyle
String/CanvasGradient/CanvasPattern
same as fill
fillOpacity
Number
the opacity for fill style
stroke
String/CanvasGradient/CanvasPattern
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPattern
same as stroke.
strokeOpacity
Number
the opacity for stroke style.
lineWidth
Number
sets the thickness of lines in space units. See Line Style.
lineDash
Array
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units).See Line Style.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
Example:
1
const polygon = 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
], // the points the make up the polygon
10
lineWidth: 1,
11
fill: 'red'
12
}
13
});
Copied!

Shape.Rect

1
new Shape.Rect({
2
attrs: {}
3
})
Copied!
Rect constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
x
Number
x coordinate of upper left point of the rectangle.
y
Number
x coordinate of upper left point of the rectangle.
height
Number
the height of rectangle.
width
Number
the width of rectangle.
radius
Number/Array
the border radius for rectangle.
stroke
String/CanvasGradient/CanvasPattern
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPattern
same as stroke.
strokeOpacity
Number
the opacity for stroke style.
fill
String/CanvasGradient/CanvasPattern
the color or style to use inside shapes.
fillStyle
String/CanvasGradient/CanvasPattern
same as fill.
fillOpacity
Number
the opacity for fill style.
lineWidth
Number
sets the thickness of lines in space units. See Line Style.
lineDash
Array
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units).See Line Style.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
Example:
1
const rect = new G.Shape.Rect({
2
attrs: {
3
x: 50,
4
y: 50,
5
height: 20,
6
width: 80,
7
lineWidth: 1,
8
fill: '#1890FF',
9
strokeStyle: '#000',
10
radius: 2
11
}
12
});
Copied!
The radius usage:

Shape.Sector

1
new Shape.Sector({
2
attrs: {}
3
})
Copied!
Sector constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
x
Number
center's x coordinate
y
Number
center's y coordinate
r
Number
radius
r0
Number
the inner radius
startAngle
Number
start angle of sector, it should be a radian.
endAngle
Number
end angle of sector, it should be a radian.
fill
String/CanvasGradient/CanvasPattern
the color or style to use inside shapes
fillStyle
String/CanvasGradient/CanvasPattern
same as fill
fillOpacity
Number
the opacity for fill style
stroke
String/CanvasGradient/CanvasPattern
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPattern
same as stroke.
strokeOpacity
Number
the opacity for stroke style.
lineWidth
Number
sets the thickness of lines in space units. See Line Style.
lineDash
Array
An Array of numbers which specify distances to alternately draw a line and a gap (in coordinate space units).See Line Style.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
Example:
1
const sector = new G.Shape.Sector({
2
attrs: {
3
x: 100,
4
y: 150,
5
r: 50,
6
r0: 30,
7
startAngle: -Math.PI / 3,
8
endAngle: Math.PI / 2,
9
lineWidth: 0,
10
fill: '#223273'
11
}
12
});
Copied!

Shape.Text

1
new Shape.Text({
2
attrs: {}
3
})
Copied!
Text constructor.
  • attrs : Object, it includes the following attributes:
Name
Type
Description
x
Number
x coordinate of the display position
y
Number
y coordinate of the display position
text
String
text content, if you want a text wrapping, just write '\n' in the text, such as 'maximum \n200'.
rotate
Number
the rotate angle, it should be a radian.
fill
String/CanvasGradient/CanvasPattern
the color or style to use inside shapes
fillStyle
String/CanvasGradient/CanvasPattern
same as fill
fillOpacity
Number
the opacity for fill style
stroke
String/CanvasGradient/CanvasPattern
the color or style to use for the lines around shapes.
strokeStyle
String/CanvasGradient/CanvasPattern
same as stroke.
strokeOpacity
Number
the opacity for stroke style.
lineWidth
Number
sets the thickness of lines in space units. See Line Style.
opacity
Number
the alpha value that is applied to shapes and images before they are drawn onto the canvas.
textAlign
String
specifies the horizontal alignment of text in an element. See Text Style.
textBaseline
String
sets the vertical alignment of an element.See Text Style.
fontStyle
String
specifies the font style for text.See Text Style.
fontSize
String
specifies the font size of text.See Text Style.
fontFamily
String
specifies the font family for text.See Text Style.
fontWeight
String / Number
specifies the weight of a font.See Text Style.
fontVariant
String
specifies whether or not a text should be displayed in a small-caps font.See Text Style.
lineHeight
Number
specifies the height of a line. See Text Style.
Example:
1
const sector = new G.Shape.Text({
2
attrs: {
3
x: 30,
4
y: 30,
5
fontFamily: 'Arial',
6
fontSize: 12,
7
fontStyle: 'normal',
8
fontWeight: 'normal',
9
fontVariant: 'normal',
10
fill: 'red',
11
lineWidth: 1,
12
rotate: Math.PI
13
}
14
});
Copied!

Shape.Custom

1
new Shape.Custom({
2
attrs: {},
3
createPath(context) {
4
// draw shape here
5
},
6
calculateBox() {
7
// calculate the bounding box
8
}
9
});
Copied!
Custom shape constructor.
Last modified 3yr ago