Custom shape drawing question

5 posts, 0 answers
  1. Valentino
    Valentino avatar
    28 posts
    Member since:
    Aug 2017

    Posted 22 Aug Link to this post

    I have a data model that I'm trying to draw in a Diagram. I'm having some success with a custom shape class something like below. MyModelElement has X, Y, W, H & Text as well as other model data. I'm getting the bounding box in a different location to my visible shape, and it's always 100x100. I tried adding 

    Size = new Size(element.W, element.H)

    in the  RadDiagramShape creation below, but didn't change anything. Any help appreciated.

     

    My code to populate the diagram is similar to below.

    private void PopulateDiagram()
    {
        foreach (var element in elements)
        {
            var elementShape = new MyElementShape(element);
     
            var shape = new RadDiagramShape
            {
                Text = element.Text,
                ElementShape = elementShape,
                ForeColor = Color.Black,
                DrawBorder = true,
                BorderThickness = new Padding(1),
                Position = new Telerik.Windows.Diagrams.Core.Point(element.X, element.Y)
            };
            radDiagram1.AddShape(shape);
        }
     
     My custom shape class
    public class MYElementShape : ElementShape
    {
        public MyElementShape(MyModelElement element)
        {
            _element = element;
        }
        public override GraphicsPath CreatePath(Rectangle bounds)
        {
            GraphicsPath path = new GraphicsPath();
            path.AddRectangle( new Rectangle(_element.X, _element.Y, _element.W, _element.H));
            return path;

       }

     }
  2. Valentino
    Valentino avatar
    28 posts
    Member since:
    Aug 2017

    Posted 22 Aug in reply to Valentino Link to this post

    Ignore minor errors in the code, as I edited it for the thread.
  3. Valentino
    Valentino avatar
    28 posts
    Member since:
    Aug 2017

    Posted 22 Aug in reply to Valentino Link to this post

    Sorry for the spamming. I think adding Size = ... actually does help and I'll look into this more, but I'd still like to know if I'm on the right track with the above code.

    I'm creating a UI editor, where everything is rectangle based in shape, and has a label (Text). The label should be placed in relation to the UI element (the label has it's own X, Y, W, H, Text properties so can be positioned by these, but I haven't gotten that far with RadDiagram yet). I'm hoping the Diagram control can do the job. I'll keep experimenting.

  4. Valentino
    Valentino avatar
    28 posts
    Member since:
    Aug 2017

    Posted 23 Aug Link to this post

    I had more luck by changing the line above to this, using bounds.X and bounds,Y. Also some of my coords were incorrect.

        path.AddRectangle( new Rectangle(bounds.X, bounds.Y, _element.ScrnW, _element.ScrnH));<br>

    I've also decided to use separate Shapes for my labels and treat them separately.

  5. Hristo
    Admin
    Hristo avatar
    1028 posts

    Posted 24 Aug Link to this post

    Hi Valentino,

    Thank you for writing.

    Generally speaking, your approach is correct. You can access the Size property of the shapes and set it according to your requirement. The CreatePath method also provides the current bounds and the shape can be manipulated according to it: http://docs.telerik.com/devtools/winforms/diagram/custom-shapes#creating-custom-shapes-programmatically.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    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