jointjs/docs/src/joint/api/shapes/standard/Cylinder.html

JavaScript diagramming library

<p>A cylinder with a label.</p>

<b>Supported <code>attrs</code> properties</b></p>

<table>
    <tr>
        <th>Selector</th>
        <th>Node</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>root</td>
        <td><i>SVGGElement</i></td>
        <td>Container of all nodes</td>
    </tr>
    <tr>
        <td>body</td>
        <td><i>SVGPathElement</i></td>
        <td>Lateral area of the cylinder
            <p><i>
                The shape has a custom attribute <code>lateralArea</code> set to <code>10</code> by default.
                The attribute sets the SVGPathElement's <code>d</code> in the shape of the lateral area of a tilted cylinder.
                The attribute expects a <code>topRy</code> 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 <code>cylinder.topRy</code> function for more detailed specification.)
            </i></p>
        </td>
    </tr>
    <tr>
        <td>top</td>
        <td><i>SVGEllipseElement</i></td>
        <td>Top of the cylinder (cylinder base)</td>
    </tr>
    <tr>
        <td>label</td>
        <td><i>SVGTextElement</i></td>
        <td>Text inside the body</td>
    </tr>
</table>

<h5 id="shapes.standard.Cylinder.prototype.topRy">shapes.standard.Cylinder.prototype.topRy</h5>
<pre class="docs-method-signature"><code>cylinder.topRy()</code></pre>
<p>Return the vertical radius of the exposed area of the cylinder base (the value of the <code>body/lateralArea</code> attribute; <code>10</code> by default).</p>

<pre class="docs-method-signature"><code>cylinder.topRy(t, [opt])</code></pre>
<p>Set the cylinder vertical radius of the exposed area of the cylinder base.</p>

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

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

<p>Example usage:</p>

<pre><code>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);</code></pre>