create a stencil with a shadow ? (mxGraph)

Question

Hi, \nIs it possible to create a simple shape with a shadow in an mxGraph stencil ?

\n

for example can I add a shadow to this ellipse ?
\n

\n

<shape name="myEllipse" aspect="fixed" w="111" h="51" strokewidth="1">\n<background>\n    <path>\n        <move x="0" y="0"/>\n        <ellipse x="0" y="0" w="110" h="50"/>\n        <close/>\n    </path>\n</background>\n<foreground>\n    <fillstroke/>\n</foreground>\n

\n</shape>\n\n

If not is there a way to create shapes with shadows using stencils ?

Answer 1

0

The background element is responsible for the shadow (unless you paint it explicitely inside the stencil XML, which is not recommended). The rule for the background element is that it should contain one path, ellipse or rectangle, or in other words, the path, move and close are not needed:

\n

<shape name="myEllipse" aspect="fixed" w="111" h="51" strokewidth="1">\n  <background>\n    <ellipse x="0" y="0" w="110" h="50"/>\n  </background>\n  <foreground>\n    <fillstroke/>\n  </foreground>\n</shape>\n

\n

For strokewidth you can also use "inherit" to use the strokeWidth value from the cell's style. More details about the format are available in the mxStencil API specification.

link

answered 31 Jan, 22:49

Gaudenz ♦♦
7.4k●1●5
accept rate: 31%

edited 31 Jan, 22:52

Hi, thanks.

\n

The only docs I could find for mxStencil is in the mxStencilShape class. and there it's only mentioned in :

n

stencil:    Holds the <mxStencil> that defines the shape.n

(31 Jan, 23:00) Raanan

The specification is at docs/js-api/files/shape/mxStencil-js.html. The name of the class will be fixed in the next release.

(31 Jan, 23:09) Gaudenz ♦♦

Answer 2

thanks for the help.

\n

I can get what is need by using a style on the stencil shape like :

\n

define the shape :

\n

<shape name="Shape-1" aspect="fixed" w="110" h="50" strokewidth="0.5">\n    <background>\n        <ellipse x="0" y="0" w="110" h="50"/>\n    </background>\n    <foreground>\n        <fillstroke/>\n    </foreground>\n</shape>\n

\n

add style to it :

\n

var style = new Object();\nstyle[mxConstants.STYLE_SHAPE] = 'Shape-1';\nstyle[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;\nstyle[mxConstants.STYLE_FILLCOLOR] = '#f6f6f6';\nstyle[mxConstants.STYLE_GRADIENTCOLOR] = '#d4d3d3';\nstyle[mxConstants.STYLE_SHADOW] = true;\nstyle[mxConstants.STYLE_STROKECOLOR] = '#7a7a7a';\ngraph.getStylesheet().putCellStyle('Style-1', style);\n

\n

Is there a way to get something like this only by using a stencil ?

create a stencil with a shadow ? (mxGraph)

Follow this question

Related questions