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

Bounds() width and height

3 Answers 71 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Harold
Top achievements
Rank 1
Harold asked on 04 Apr 2017, 09:18 PM

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

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 06 Apr 2017, 01:33 PM
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
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.
0
Harold
Top achievements
Rank 1
answered on 06 Apr 2017, 02:19 PM

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?

0
Tsvetina
Telerik team
answered on 10 Apr 2017, 01:43 PM
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
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.
Tags
Drawing API
Asked by
Harold
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Harold
Top achievements
Rank 1
Share this question
or