我有一个剑道图,那里有形状,我必须识别单击的形状。
我已经使用下面的逻辑完成了一些代码,但是按照我的要求实施后,它无法正常工作。
<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。如果还有其他方法可以检查点击零件的形状,请提及。