CSS syntax to be used to specify a shape for a node

Article ID: 2313
Last updated: 30 May, 2018
Article ID: 2313
Last updated: 30 May, 2018
Revision: 3
Views: 803
Posted: 08 Aug, 2010
by Dean J.
Updated: 30 May, 2018
by Gargani A.

Question

What CSS syntax should I use to specify a shape for a node?

Answer

For basic shapes, the simplest approach consists in using the 'shapeType' property of the node.

For more arbitrary shapes, you define a string property called 'shape' for the node. This shape-string is essentially a text representation of a java.awt.geom.PathIterator.

The shape-string itself consists of two components "path" and "rule", that is:

shape : "path \"pathspec\" rule \"rulespec" ";

The entire shape-string is enclosed in double quotes (") and the inner strings are enclosed in escaped double quotes (\").

The pathspec contains blanks, float numbers, and the letters MLQCz. It is a sequence of instructions that correspond to the segment types of java.awt.geom.PathIterator.

The pathspec specifies a path iterator. The instructions can be:

  • M x1 y1 means: SEG_MOVETO x1 y1
  • L x1 y1 means: SEG_LINETO x1 y1
  • Q x1 y1 x2 y2 means: SEG_QUADTO x1 y1 x2 y2
  • C x1 y1 x2 y2 x3 y3 means: SEG_CUBICTO x1 y1 x2 y2 x3 y3
  • z means: SEG_CLOSE

For SEG_MOVETO, ... SEG_CLOSE, see java.awt.geom.PathIterator.

Here, x1, ... x3 and y1, ... y3 are float numbers (to be precise: numbers that can be read via Float.parseFloat(String)).

Blanks are optional but subsequent numbers must be separated by at least one blank to avoid ambiguity.

The rulespec can be "nonzero" or "evenodd", which correspond respectively to PathIterator.WIND_NON_ZERO and PathIterator.WIND_EVEN_ODD.

It may be easier to design the nodes in the Designer and have save the CSS information. However, if you want to build your own shape-strings, this is the form that is used.

This article was:   Helpful | Not helpful
Report an issue
Article ID: 2313
Last updated: 30 May, 2018
Revision: 3
Views: 803
Posted: 08 Aug, 2010 by Dean J.
Updated: 30 May, 2018 by Gargani A.
Also listed in


Others in this category