Skip to main content
Version: 4.1

Cylinder

A cylinder with a label.

SVG selectors​

Supported attrs properties:

SelectorNodeDescription
rootSVGGElementContainer of all nodes
bodySVGPathElementLateral area of the cylinder. _The shape has a custom attribute lateralArea set to 10 by default. The attribute sets the SVGPathElement's d in the shape of the lateral area of a tilted cylinder. The attribute expects a topRy value; either a percentage or a number. The value determines the vertical radius of the exposed area of cylinder base; either relative to shape height, or directly. (Refer to the cylinder.topRy() function for more detailed specification.)
topSVGEllipseElementTop of the cylinder (cylinder base)
labelSVGTextElementText inside the body
const cylinder = new standard.Cylinder();
cylinder.resize(100, 200);
cylinder.position(525, 75);
cylinder.attr('root/title', 'shapes.standard.Cylinder');
cylinder.attr('body/fill', 'lightgray');
cylinder.attr('top/fill', 'gray');
cylinder.attr('label/text', 'Cylinder');
cylinder.topRy('10%');

Methods​

topRy()​

cylinder.topRy(t?: string | number, opt?: dia.ModelSetOptions): string | number;

If used without parameters, returns the vertical radius of the exposed area of the cylinder base (the value of the body/lateralArea attribute; 10 by default).

If first parameter is not undefined, sets the cylinder vertical radius of the exposed area of the cylinder base.

If the provided value is a percentage, it is relative to the refBBox.height of the shape. In practice, only values between '0%' and '50%' make sense. If the provided value is a number, it determines the vertical radius directly. Only values between 0 and half of refBBox.height make sense.

The function automatically sets the value of several attributes: body/lateralArea; and top/ry, top/cy, top/refRy and top/refCy. If these arguments need to be modified further, make sure to assign them only after calling cylinder.topRy.

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub