在剑道图中检查形状的点击事件有哪些不同的方法

时间:2019-08-23 05:57:23

标签: javascript jquery kendo-ui kendo-grid

我有一个剑道图,那里有形状,我必须识别单击的形状。

我已经使用下面的逻辑完成了一些代码,但是按照我的要求实施后,它无法正常工作。

<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: "Monday"
        }
      },
      {
        id: "2",
        content:{
          text:"Tuesday"
        }
      }
    ],
    connections: [

      {
        from: "1",
        to: "2"
      }
    ],
    layout: {
      type: "tree"
    },
    click: function(e) {
      if(e.item instanceof kendo.dataviz.diagram.Shape)
        alert(e.item.options.content? e.item.options.content.text: "No content.");
      else
        alert("Shape not clicked");
    },
    shapeDefaults: {
      type: "circle",
      width: 70,
      height: 70,
      hover: {
        fill: "Orange"
      }
    },
    connectionDefaults: {
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  })
</script>
</body>
</html>

在click事件中,如果条件存在,则仅当我在我的要求中实现代码时,该条件才第一次变为true,每次单击形状都必须为true。如果还有其他方法可以检查点击零件的形状,请提及。

0 个答案:

没有答案