Bounds() width and height

[Harold]

Why does Bounds() always return 1 pixel more than the actual width and height?

Check out: http://dojo.telerik.com/@Harold@/Ivacu

var shape = new kendo.dataviz.diagram.Shape({ type: "rectangle", x: 0, y: 0, width: 1150, height: 1150, fill: "blue" });
    
alert("bounds().width = " + shape.bounds().width);

Result:

bounds().width = 1151

[Tsvetina]

Hello Harold,

This is so because the shape you defined has a default stroke with width of 1. If you set the stroke width to 0, as shown in this modification of your Dojo, the shape width is returned without changes:
http://dojo.telerik.com/@tsveti/iGELUN

Let me know if you have other questions about the Diagram API.

Regards,
Tsvetina
Telerik by Progress

[Harold]

I see this does work.  However, I'm not understanding why only 1px was added to the width and height with a default stroke of 1.

Does the stroke represent something like a border?  If so, I would have expected a width change of 2 (1 for the left side and 1 for the right side).

Do you have a visual representation of the different objects that make up shape?

[Tsvetina]

Hi Harold,

Strokes in the Kendo UI Diaram are actually SVG strokes . The value you set for the stroke is directly output to the Diagram SVG element. The reason for the total bounds increasing by 1 and not 2 seems to be the same as what is discussed here:
Can you control how an SVG's stroke-width is drawn?
One side of the stroke is drawn inset and the other one offset to the shape.

Regards,
Tsvetina
Telerik by Progress