1
我想在html按鈕上單擊繪製圓圖(寧願在kendo圖形工具欄上工作不太好),addShape方法似乎工作正常,沒有任何錯誤,但圖不會顯示在頁面上。 但是,在初始劍道圖加載時,圓圈沒有問題。kendo圖在點擊上添加圓圈
$(document).ready(createDiagram);
function createDiagram() {
$("#diagram").kendoDiagram({
shapes: [{
type: 'circle',
fill: {
color: 'blue'
}
},
{
type: 'rectangle'
}
],
shapeDefaults: {
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 1
},
type: "polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd"
},
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
});
$("#diagram").getKendoDiagram().layout();
}
function drawCircle() {
var diagram = $("#diagram").getKendoDiagram();
/*diagram.addShape(new kendo.dataviz.diagram.Point(100, 220), {
background: "red"
});*/
diagram.addShape(new kendo.dataviz.diagram.Circle({
radius: 600,
stroke: {
width: 5,
color: "#586477"
},
fill: "#e8eff7"
}));
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<base href="http://demos.telerik.com/kendo-ui/diagram/events">
<input type="button" class="btn btn-warning" value="Circle" onclick="drawCircle();" />
<div id="diagram"></div>