时间戳

首页 > 解决方案 > 如何在两个形状之间动态建立连接，意味着位置和所有将在剑道图中动态传递

kendo-ui - 如何在两个形状之间动态建立连接，意味着位置和所有将在剑道图中动态传递

问题描述

我有一个kendo图表，其中一个形状已经存在，我必须添加下一个形状，之后应该根据动态指定的条件将下一个形状添加到父形状或子形状，形状类型也将动态指定。

单击该按钮后，我保留了一个按钮，形状来了，但不是动态的。

<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">Create Shape</button>
<div id="diagram"></div>
<script>
    $("#createBtn").on("click", function(){
      //var count=kendo.dataviz.diagram.Shape().count();
      //alert(count);
      var diagram = $("#diagram").getKendoDiagram();
      var shape = new kendo.dataviz.diagram.Shape({
            type: "circle",
            width: 200,
            height: 200,
            stroke: {
                width: 1,
                color: "#red"
            },
            fill: "#e8eff7",
            editable: true
        });

      var diagram = $("#diagram").getKendoDiagram();
      diagram.addShape(shape);
      diagram.bringIntoView(diagram.shapes);
    });

    var Shape = kendo.dataviz.diagram.Shape;
    $("#diagram").kendoDiagram();
    var diagram = $("#diagram").data("kendoDiagram");

    var shape = new Shape({x: 500, y: 100, fill: "red"});
    diagram.addShape(shape);
</script>
</body>
</html>

如果我传递它应该绑定的形状类型和形状位置。它应该给出一个与该指定位置连接的形状。

标签： kendo-uikendo-treeview

解决方案

创建形状，然后连接它。 

// Connect new shape to last added shape
var diagram = … ;

var count = diagram.shapes.length;    
var lastAddedShape = diagram.shapes[count-1];

var shape = …;

diagram.addShape(shape);
diagram.connect(lastAddedShape, shape);

推荐阅读