The Common Functions of Shapes

2 min read

attr()

Get or set the shape's attributes.

attr(name)

Get the shape's attribute named name.

const width = shape.attr('width');

attr(name, value)

Update the shape's attribute named name with value.

attr({...})

Update the shape's multiple attributes.

rect.attr({
  fill: '#999',
  stroke: '#666',
});

setClip(clipCfg)

Sets and returns the clip object.

clipCfg

NameDescriptionTypeRemark
typeThe type of shape of clippingStringOptions: 'circle', 'rect', 'ellipse'
xThe x coordinate of the clipping shapeNumber0 by default. Only takes effect when the type is 'circle', 'rect', or 'ellipse'
yThe y coordinate of the clipping shapeNumber0 by default. Only takes effect when the type is 'circle', 'rect', or `'ellipse'
showWhether to clip the imageBooleanDo not clip by default.
rThe radius of circle clippingNumberTakes effect when the type is 'circle'
widthThe width of the clippingNumberTakes effect when the type is 'rect'
heightThe height of the clippingNumberTakes effect when the type is 'rect'
rxThe major radius of the ellipse clippingNumberTakes effect when the type is 'ellipse'
ryThe minor radius of the ellipse clippingNumberTakes effect when the type is 'ellipse'
shape.setClip({
  type: 'circle', // circle, rect, ellipse, Polygon, path clip
  attrs: {
    r: 10,
    x: 0,
    y: 0,
  },

getClip()

Get the clip object.