Search
User-defined Box Shapes and Custom Drawing

Box appearance can be customized in several additional ways, which are described below.

Polygonal box shapes

By setting a box' Style to bsPolygon, you can assign any polygonal shape to that box. Polygonal shapes are defined by their vertices given as percents in the bounding rectangle of the box. Those shapes are drawn in [0..100]-[0..100] rectangle of a coordinate system with Y-axis positive values growing down, and that rectangle mapped to the box bounding rectangle. Following properties and methods load custom shapes: SetPolyShapeArray and SetPolyShape methods, Box.SetPolyShapeArray and Box.SetPolyShape methods, Box.LoadPredefShape and LoadPredefShape methods (loads a predefined polygonal shape from more than 50 available).

Shape templates

The ShapeTemplate class provides the means for defining complex node shapes, made of straight lines and Bezier curves. A shape template must always contain an outline to be used for hit testing, clipping and finding intersections with other objects.  Optionally shapes can contain decoration elements, text region definitions and default anchor point patterns. Decorations are visual elements that do not take part in hit testing and clipping. Text regions are the parts of shapes in which node's text is laid-out and rendered. Anchor point patterns define at which points of a node, arrows can start or end. FlowChartX provides a set of 87 predefined shape templates, which can be accessed via the Shapes member of the FlowChart class. A shape template is used by applying it to the Shape property of boxes.

Custom painting

Another way to customize box appearance is custom painting, which gives you absolute freedom to choose how to draw a box. Use BoxCustomDraw and Box.CustomDraw properties to enable that feature in your application. FlowChartX gives you two options for custom drawing. When you chose cdAdditional drawing style your drawing code will be executed after the standard box drawing code completes and the Picture is rendered, but before any text is displayed. When using cdFull drawing mode, none of the standard FlowChartX drawing code is executed, just yours. Place your own drawing code in the CustomDraw event handler. This event is raised for each box with custom-draw style that needs repainting. The Windows device context received to draw on has its clipping region set to the box shape outline.

Finally, you might combine your shape definitions with the cdAdditional custom-painting style. Thus, you will get custom shaping enabled, a clipping region set that equals the shape outline, and your drawing code executed in the clipped DC. You can also clear the clipping region, but be careful - if you draw outside the bounding rectangle the view might not get updated correctly.