This is a migrated thread and some comments may be shown as answers.

Transform.Scale

1 Answer 270 Views

Diagram

This is a migrated thread and some comments may be shown as answers.

Harold asked on 31 Mar 2017, 02:48 PM

Can someone explain why the transform is not being applied to the shape?

The second (red) square should be half the size of the first (blue) square.

http://dojo.telerik.com/@Harold@/IqoFa

<!DOCTYPE html>
<html>
<head>
    <title>TransformScale</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
</head>
<body>
    <div id="diagram"></div>
    <script>
      $("#diagram").kendoDiagram();

      var diagram = $("#diagram").getKendoDiagram();

      // Shape 1 (blue)

      var shape = new kendo.dataviz.diagram.Shape({ type: "rectangle", x: 10, y: 10, width: 200, height: 200, fill: "blue" });
      diagram.addShape(shape);


      // Shape 2 (red)

      shape = new kendo.dataviz.diagram.Shape({ type: "rectangle", x: 10, y: 300, width: 200, height: 200, fill: "red" });
      var geom = kendo.geometry;
      shape.transform = geom.transform().scale(.5);
      diagram.addShape(shape);

    </script>
</body>
</html>

1 Answer, 1 is accepted

answered on 04 Apr 2017, 12:47 PM

Hello Harold,

There isn't a public API documentation for the "transform" option of a shape, so setting it should not have any effect

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/diagram/shape

If you have some ideas regarding the implementation of such a property, you can send a feature request in the Kendo Feedback Portal:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/category/46450-kendo-ui-dataviz

On the other hand, can you try setting a different width/height and x/y options to the shape to achieve something similar?

Regards,
Stamo Gochev
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.