Zoom to Predefined Diagram Points
Environment
| Product | Progress® Kendo UI® Diagram for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I zoom the Kendo UI for jQuery Diagram to a predefined point?
Solution
The following example demonstrates how to zoom the Diagram to a predefined point.
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
<div id="diagram"></div>
<script>
$(document).ready(function () {
$("#diagram").kendoDiagram();
var diagram = $("#diagram").data("kendoDiagram");
var diagramNS = kendo.dataviz.diagram;
var shape1 = diagram.addShape(new diagramNS.Shape({x: 120, y: 120, fill: "red", content: { text: "Test Shape" }}));
$("#zoomIn").on("click", function () {
var zoom = $("#diagram").data("kendoDiagram").zoom();
$("#diagram").data("kendoDiagram").zoom(zoom + 0.1,
{point: new diagramNS.Point(100, 100)});
});
$("#zoomOut").on("click", function () {
var zoom = $("#diagram").data("kendoDiagram").zoom();
$("#diagram").data("kendoDiagram").zoom(zoom - 0.1,
{point: new diagramNS.Point(100, 100)});
});
});
</script>