User Defined Node Shapes and Custom Drawing
The appearance of MindFusion.Diagramming for .NET MAUI items can be customized in several additional ways, as described below.
The Shape class provides the means for defining complex geometric shapes, made of straight lines, arcs and Bézier curves. Such shapes can be assigned to the Shape property of ShapeNode objects, or to the HeadShape property of DiagramLink objects. A shape template must always contain an outline to be used for hit testing, clipping and finding intersections with other items. Optionally, shapes can contain decoration elements and text region definitions. 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. MindFusion.Diagramming for .NET MAUI provides more than 100 predefined shape templates, which can be accessed through the Shapes collection or FromId method of the Shape class. Each predefined shape has a string identifier assigned to it. Use the FromId method to find a shape with the specified id. A shape template can be assigned to the Shape member of shape nodes.
Another way to customize item's appearance is implemented by raising an event each time an item is painted, giving you the option to attach your own drawing code to the MindFusion.Diagramming for .NET MAUI's rendering engine. Use the corresponding CustomDraw property of items to enable that feature in your application.
MindFusion.Diagramming for .NET MAUI provides several options for custom drawing. If you choose Additional drawing style, your drawing code will be executed after the standard item drawing code is executed and Image is rendered, but before the text is rendered. Furthermore, the IGraphics object you receive to draw on has a clipping region applied that corresponds to a node's shape. If using Full drawing mode, none of the standard MindFusion.Diagramming for .NET MAUI drawing code is executed – just yours. The ShadowOnly mode performs standard painting of items, but leaves the drawing of shadows to your code.
Place your own drawing code in a handler of the DrawNode, DrawCell, and DrawLink events. These events are fired for each custom-drawn item that needs repainting.
Finally, you could combine user-defined shapes with the Additional custom-painting style. Thus, you can get custom shapes enabled for a node and your custom painting code executing with the node shape used as clipping region. You might clear the clipping region, but be careful – if you draw outside node's bounding rectangle the view may not update correctly.
