Category / Section
How to render a port using PathData?
1 min read
Render a custom shaped port using PathData
In jQuery Diagram you can create port of complex shapes by assigning path string to port’s pathData property. For more information about port, refer to Port.
The following code illustrates how to create a star shaped port using pathData property and add it to nodes port array.
Java-script
var node = {
ports: [{
name: "port1",
offset: {s: 0, y: 0.5},
fillColor: "yellow"
shape: ej.datavisualization.Diagram.PortShapes.Path,
pathData: "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z ",
visibility: ej.datavisualization.Diagram.PortVisibility.Visible
}]
}
C#
Node node = new Node(); Port port = new Port(); port.Name = "port1"; port.Offset = new DiagramPoint(0f, 0.5f); port.FillColor = "yellow"; port.Shape = PortShapes.Path; port.PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z "; port.Visibility = PortVisibility.Visible; node.Ports.Add(port);
