A cylinder with a label.

Supported attrs properties

Selector Node Description
root SVGGElement Container of all nodes
body SVGPathElement Lateral 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.)

top SVGEllipseElement Top of the cylinder (cylinder base)
label SVGTextElement Text inside the body
shapes.standard.Cylinder.prototype.topRy
cylinder.topRy()

Return the vertical radius of the exposed area of the cylinder base (the value of the body/lateralArea attribute; 10 by default).

cylinder.topRy(t, [opt])

Set 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.

Example usage:

var cylinder = new standard.Cylinder();
cylinder.resize(100, 200);
cylinder.position(525, 75);
cylinder.attr('root/title', 'joint.shapes.standard.Cylinder');
cylinder.attr('body/fill', 'lightgray');
cylinder.attr('top/fill', 'gray');
cylinder.attr('label/text', 'Cylinder');
cylinder.topRy('10%');
cylinder.addTo(graph);