New to Kendo UI for jQuery? Start a free 30-day trial

ModelToView

methods

Transforms a point from Model coordinates to View coordinates. Model coordinates are independent coordinates to define Shape bounds. View coordinates are relative to the currently visible part of the drawing surface.

modelToView

Parameters:pointObject

The point in Model coordinates.

Returns:Object

the transformed point

<button id="convertBtn">Convert first shape coordinates</button>
<div id="diagram"></div>
<script>
  $("#convertBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    var layerCoordinates = diagram.modelToView(diagram.shapes[0].position());
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(layerCoordinates);
  });
  $("#diagram").kendoDiagram({
    zoom: 1.5,
    shapes: [{
      id: "1",
      x: 100,
      y: 20
    }, {
      id: "2",
      x: 350,
      y: 20
    }, {
      id: "3",
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>