时间戳

首页 > 解决方案 > 在剑道图中检查形状的点击事件有哪些不同的方法

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

问题描述

我有一个剑道图，形状在那里，我必须识别哪个形状是点击。

我已经使用以下逻辑完成了一些代码，但在实现我的要求后它无法正常工作。

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

在单击事件中，如果条件存在，则只有当我在我的要求中实现代码时，该条件才第一次变为真，每次单击形状时它都必须为真。如果有其他方法可以检查点击部分是否形状，请提及。

标签： javascriptjquerykendo-uikendo-grid

解决方案

推荐阅读