Bounds() width and height

4 posts, 0 answers
  1. Harold
    Harold avatar
    5 posts
    Member since:
    Sep 2012

    Posted 04 Apr Link to this post

    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

  2. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 06 Apr Link to this post

    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.
  3. Harold
    Harold avatar
    5 posts
    Member since:
    Sep 2012

    Posted 06 Apr in reply to Tsvetina Link to this post

    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?

  4. Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 10 Apr Link to this post

    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.
Back to Top