Question

我有一个简单的形状，当我单击任何形状时，它将在警报框中显示该特定形状的文本，就像那样，只有我必须在拖动任何形状后才获取形状的文本。

在单击事件后，我有一些代码可以显示形状的文本，而在拖动事件中我想要的功能与此相同。

<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>

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 160,
        y: 20
      },
      {
        id:"3",
        content: {
          text: "State 3"
        },
        x: 300,
        y: 20
      }

    ],
    connections:[
      {
        from: "1",
        to: "2"
      },
      {
      from:"2",
      to:"3"
      }
    ],
    click: onClick,
    dragEnd: onDragEnd
  });

  function onDragEnd(e){
    if(e.shapes.length > 0){
      debugger
      alert("Finished dragging " + e.shapes.content.text + " shapes");
    }
  }

  function onClick(e) {
            if (e.item instanceof kendo.dataviz.diagram.Shape) {
                alert(e.item.options.content ? e.item.options.content.text : "No content.");
            }
        }
</script>
</body>
</html>

每当我移动或拖动形状时，它都应显示该特定形状的文本。就像点击形状一样。

Answer 1

添加到您的连接中：

mouseEnter: onMouseEnter

然后添加您的功能：

function onMouseEnter(e){
         if (e.item instanceof kendo.dataviz.diagram.Shape) {
                    alert(e.item.options.content ? e.item.options.content.text : "No content.");
                }

      }

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/events/mouseenter

Answer 2

dragEnd: onDragEnd

只需要对该函数做一点改动即可。

    if(e.shapes.length > 0){
      debugger
      alert("Finished dragging " + e.shapes[0].options.content.text + " shapes");
    }
  }

只需将问题警报框替换为此。

拖放形状后如何在剑道图中获取形状文本？

2 个答案: