如何在Kendo Diagram中动态创建图形并按条件关联父/子图形？

我来帮你把现有代码改造成满足所有需求的版本！咱们会实现动态指定图形类型、关联父/子图形、动态创建连接线的完整逻辑，下面是具体方案：

完整代码示例 #

<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
    <button id="createBtn">创建子图形</button>
    <button id="createParentBtn">创建父图形</button>
    <div id="diagram"></div>
    <script>
        // 初始化Diagram实例
        $("#diagram").kendoDiagram();
        var diagram = $("#diagram").data("kendoDiagram");

        // 创建初始基准图形（给它一个唯一ID方便后续关联）
        var initialShape = new kendo.dataviz.diagram.Shape({
            id: "initialShape",
            x: 500, 
            y: 100, 
            fill: "red",
            content: { text: "初始图形" }
        });
        diagram.addShape(initialShape);

        // 核心工具函数：创建图形并关联到目标图形
        function createAndConnectShape(options) {
            // 解构并默认参数：覆盖所有动态需求
            var { 
                type = "rectangle", 
                targetId, 
                relation = "child", 
                position = {x: 0, y:0}, 
                shapeStyle = {},
                connectionStyle = {}
            } = options;

            // 先检查目标图形是否存在
            var targetShape = diagram.shapes.find(s => s.id === targetId);
            if (!targetShape) {
                console.warn("找不到指定的目标图形：", targetId);
                return;
            }

            // 1. 动态创建新图形
            var newShape = new kendo.dataviz.diagram.Shape({
                id: `shape-${Date.now()}`, // 生成唯一ID方便后续操作
                type: type,
                x: position.x,
                y: position.y,
                fill: shapeStyle.fill || "#e8eff7",
                stroke: shapeStyle.stroke || { width: 1, color: "#333" },
                content: { text: shapeStyle.text || "新图形" },
                editable: true
            });
            diagram.addShape(newShape);

            // 2. 根据关联类型确定连接方向
            var connectionStart, connectionEnd;
            if (relation === "child") {
                // 子图形：目标图形 → 新图形
                connectionStart = targetShape;
                connectionEnd = newShape;
            } else if (relation === "parent") {
                // 父图形：新图形 → 目标图形
                connectionStart = newShape;
                connectionEnd = targetShape;
            }

            // 3. 动态创建连接线，支持自定义样式
            diagram.connect(connectionStart, connectionEnd, {
                stroke: connectionStyle.stroke || { width: 2, color: "#666" },
                type: connectionStyle.type || "polyline", // 可选：polyline/bezier
                startCap: connectionStyle.startCap || "FilledCircle",
                endCap: connectionStyle.endCap || "ArrowEnd"
            });

            // 将新图形自动纳入视图范围
            diagram.bringIntoView(newShape);
        }

        // 按钮1：创建关联初始图形的子图形
        $("#createBtn").on("click", function(){
            createAndConnectShape({
                type: "circle", // 动态指定图形类型
                targetId: "initialShape",
                relation: "child",
                position: {x: 700, y: 200},
                shapeStyle: {
                    fill: "#a2c4c9",
                    text: "子图形"
                },
                connectionStyle: {
                    stroke: { color: "#2c3e50" }
                }
            });
        });

        // 按钮2：创建关联初始图形的父图形
        $("#createParentBtn").on("click", function(){
            createAndConnectShape({
                type: "rectangle",
                targetId: "initialShape",
                relation: "parent",
                position: {x: 300, y: 100},
                shapeStyle: {
                    fill: "#f9aa33",
                    text: "父图形"
                },
                connectionStyle: {
                    type: "bezier",
                    stroke: { color: "#e74c3c" }
                }
            });
        });
    </script>
</body>
</html>

关键功能拆解说明 #

1. 动态图形配置 #

• 你可以通过type参数指定任意Kendo Diagram支持的图形类型：circle、rectangle、ellipse等
• shapeStyle参数可灵活传入填充色、边框样式、显示文本等，完全自定义新图形外观

2. 父/子关联逻辑 #

• 通过relation参数直接指定关联类型：child（新图形作为目标的子节点）或parent（新图形作为目标的父节点）
• 函数会自动处理连接线的方向，无需手动判断起点终点

3. 自定义连接线 #

• connectionStyle参数支持配置线条颜色、宽度、连接类型（折线/贝塞尔曲线）、端点样式等所有连接属性
• 所有参数都支持动态传入，适配不同业务场景的需求

4. 精准位置控制 #

• 通过position的x和y属性，精准控制新图形在画布上的摆放位置，完全满足动态定位需求

你可以根据实际业务场景，调整createAndConnectShape函数的参数来源（比如从表单获取、后端接口拉取配置等），完全适配动态生成的需求。

内容的提问来源于stack exchange，提问作者TauFeeQ