jQuery Diagram - Custom Shapes
The Diagram UI component provides a collection of built-in shapes. Use the customShapes property to extend this collection with custom shapes.
The toolbox property allows you to add the custom shapes to the toolbox.
A custom shape can be created based on a default shape type or with a custom background image. The type property identifies custom shapes and should be unique.
Shapes with Base Type
Shapes with Base Type
Use the baseType property to specify a base type for a shape. The built-in shape types are shown in the Shape Types section.
jQuery
JavaScript
$(function() {
var diagram = $("#diagram").dxDiagram({
customShapes: employees.map(
function(emp) {
return {
category: "employees",
type: "employee" + emp.ID,
baseType: "rectangle",
defaultText: emp.Full_Name,
allowEditText: false
}
}
),
toolbox: {
groups: [{ category: "employees", title: "Employees", displayMode: "texts" }]
}
}).dxDiagram("instance");
});Shapes with Custom Background Images
Use the backgroundImageUrl property to specify a background image for a shape.
NOTE
Shape images should be in SVG format.
jQuery
JavaScript
$(function() {
var diagram = $("#diagram").dxDiagram({
customShapes: [{
category: "hardware",
type: "internet",
title: "Internet",
backgroundImageUrl: "images/shapes/internet.svg",
backgroundImageLeft: 0.15,
backgroundImageTop: 0,
backgroundImageWidth: 0.7,
backgroundImageHeight: 0.7,
defaultWidth: 0.75,
defaultHeight: 0.75,
defaultText: "Internet",
allowEditText: true,
textLeft: 0,
textTop: 0.7,
textWidth: 1,
textHeight: 0.3,
connectionPoints: [
{ x: 0.5, y: 0 },
{ x: 0.9, y: 0.5 },
{ x: 0.5, y: 1 },
{ x: 0.1, y: 0.5 }
]
},
...
],
toolbox: {
groups: [{ category: "hardware", title: "Hardware" }]
}
}).dxDiagram("instance");Feedback