create a triangle shape programatically

14 posts, 1 answers
  1. Carolina
    Carolina avatar
    3 posts
    Member since:
    Oct 2012

    Posted 28 Jul 2015 Link to this post

    Hello,
    I would create a triangle type figure and add it to RadDiagram control all this programmatically, can anyone help?

    I'm using the class RadDiagramShape the problem is not that I put in the ElementShape property, I welcome your comments.

    Regards.
  2.
  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    2161 posts

    Posted 29 Jul 2015 Link to this post

    Hi Carolina,

    Thank you for writing.

    We do not have a predefined triangle shape, but you can easily create one. All you need to do is to inherit the ElementShape class and return the desired figure path:
    public class Triangle : ElementShape
    {
        public override GraphicsPath CreatePath(Rectangle bounds)
        {
            GraphicsPath path = new GraphicsPath();
     
            Point top = new Point(bounds.X + bounds.Width / 2, bounds.Y);
            Point right = new Point(bounds.X + bounds.Width, bounds.Y + bounds.Height);
            Point left = new Point(bounds.X, bounds.Y + bounds.Height);
             
            path.AddPolygon(new Point[]
            {
                top,
                right,
                left
            });
            return path;
        }
    }

    Then you can create the diagram shape like this:
    private void radButton1_Click(object sender, EventArgs e)
    {
        RadDiagramShape shape1 = new RadDiagramShape()
        {
            Text = "",
            ElementShape = new Triangle(),
            BackColor = Color.LimeGreen
        };
        shape1.Position = new Telerik.Windows.Diagrams.Core.Point(100, 100);
        radDiagram1.Items.Add(shape1);
    }

    Another example for this is available in he following article: Shapes.

    Please let me know if there is something else I can help you with. 
     
    Regards,
    Dimitar
    Telerik

  5. Tino
    Tino avatar
    72 posts
    Member since:
    Jul 2017

    Posted 15 Sep 2017 in reply to Dimitar Link to this post

    How would we get a filled triangle (or other shape)?

    Thanks.

  7. Dimitar
    Admin
    Dimitar avatar
    2161 posts

    Posted 15 Sep 2017 Link to this post

    Hi Tino,

    The triangle is filled on my side (see attached image). What is the result on yours?

    I am looking forward to your reply.

    Regards,
    Dimitar
    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.
  8.
  9. Tino
    Tino avatar
    72 posts
    Member since:
    Jul 2017

    Posted 17 Sep 2017 in reply to Dimitar Link to this post

    My code is very similar. The result is attached. Edited version of code below.

    class UcDropdownDiagramShape : UcDiagramShape
    {
        public UcDropdownDiagramShape(...)
        {
            base.ElementShape = new UcDropdownElementShape(...);
            base.ForeColor = ((UcElementShape)base.ElementShape).ForeColor;
            base.BackColor = ((UcElementShape)base.ElementShape).BackColor;
        }
    }

     

      internal class UcDiagramShape : RadDiagramShape
       {
            LightVisualElement _label = new LightVisualElement();
            LightVisualElement _labelRect = new LightVisualElement();
    ...
           protected override void CreateChildElements()
           {
               base.CreateChildElements();
               _label.Text = "";
               _label.PositionOffset = new SizeF(0, 0);
               DiagramShapeElement.Children.Add(_label);
               DiagramShapeElement.Children.Add( _labelRect);
           }

     

        class UcDropdownElementShape : UcFieldElementShape
        {
            public override GraphicsPath CreatePath(Rectangle bounds)
            {
                var path = base.CreatePath(bounds);
     
                int iTriWidth = 6;
                int iTriHeight = 4;
                int ypos = bounds.Y + (Element.ScrnH - iTriHeight) / 2 + 1;
                Point[] points =
                    { new Point( bounds.X + Element.ScrnW - (iTriWidth + 5), ypos ),
                    new Point( bounds.X + Element.ScrnW - 4, ypos),
                    new Point( bounds.X + Element.ScrnW - 5 - iTriWidth / 2, ypos + iTriHeight)};
     
                path.AddPolygon( points);
     
                return path;
            }
     
    ...
        }

     

  11. Tino
    Tino avatar
    72 posts
    Member since:
    Jul 2017

    Posted 17 Sep 2017 in reply to Tino Link to this post

    I left out

     

    public class UcFieldElementShape : UcElementShape
       {...}

     

    public abstract class UcElementShape : ElementShape
       { ... }
  13. Dimitar
    Admin
    Dimitar avatar
    2161 posts

    Posted 18 Sep 2017 Link to this post

    Hi Tino,

    Using the provided code I have created and attached a test project where you can see that the background is applied. Could you please check the project and let me know what I need to change in order to reproduce your case?

    Perhaps it would be better to open a new support ticket and attach a modified version of the project where your case is reproduced. 

    I am looking forward to your reply.

    Regards,
    Dimitar
    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.
  14.
  15. Tino
    Tino avatar
    72 posts
    Member since:
    Jul 2017

    Posted 18 Sep 2017 in reply to Dimitar Link to this post

    Thanks. Just change this CreatePath method so that the shapes overlap. However, I notice also our stack traces are different when this CreatePath is being called. See below.

    class UcDropdownElementShape : UcFieldElementShape
    {
        public override GraphicsPath CreatePath(Rectangle bounds)
        {
            var path = base.CreatePath(bounds);
     
            int iTriWidth = 16;
            int iTriHeight = 14;
            int ypos = bounds.Y + (Element.ScrnH - iTriHeight) / 2 + 10;
            Point[] points =
            { new Point( bounds.X  - 80 + Element.ScrnW - (iTriWidth + 5), ypos ),
                new Point( bounds.X - 80  + Element.ScrnW - 4, ypos),
                new Point( bounds.X - 80  + Element.ScrnW - 5 - iTriWidth / 2, ypos + iTriHeight)};
     
            path.AddPolygon(points);
            //path.CloseFigure();
     
            return path;
        }

    Mine:

    >   UCStudio.exe!UCStudio.UcDropdownElementShape.CreatePath(System.Drawing.Rectangle bounds) Line 32    C#
        Telerik.WinControls.RadDiagram.dll!Telerik.WinControls.UI.Diagrams.UIElement.HitTest(System.Drawing.Point point)    Unknown
        Telerik.WinControls.dll!Telerik.WinControls.RadElementTree.GetElementAtPoint(Telerik.WinControls.RadElement parent, System.Drawing.Point point, System.Collections.Generic.List<Telerik.WinControls.RadElement> foundElements, System.Predicate<Telerik.WinControls.RadElement> predicate)  Unknown
        Telerik.WinControls.dll!Telerik.WinControls.RadElementTree.GetElementAtPoint(Telerik.WinControls.RadElement parent, System.Drawing.Point point, System.Collections.Generic.List<Telerik.WinControls.RadElement> foundElements, System.Predicate<Telerik.WinControls.RadElement> predicate)  Unknown

     

    Yours:

    >   _957043.exe!_957043.UcDropdownElementShape.CreatePath(System.Drawing.Rectangle bounds) Line 69  C#
    Telerik.WinControls.dll!Telerik.WinControls.ElementShape.CreatePath(System.Drawing.RectangleF bounds)   Unknown
    Telerik.WinControls.dll!Telerik.WinControls.Primitives.FillPrimitiveImpl.PaintFill(Telerik.WinControls.Paint.IGraphics graphics, float angle, System.Drawing.SizeF scale, System.Drawing.RectangleF paintRect)  Unknown
    Telerik.WinControls.UI.dll!Telerik.WinControls.UI.UIItemBase.PaintFill(Telerik.WinControls.Paint.IGraphics graphics, float angle, System.Drawing.SizeF scale, System.Drawing.RectangleF prefferedRectangle) Unknown

     

  17. Tino
    Tino avatar
    72 posts
    Member since:
    Jul 2017

    Posted 18 Sep 2017 in reply to Tino Link to this post

    Also, I need the shapes to be different fore/back colors. See attached.

    PS: Additional to the post above, it seems the overlaid triangle shape is causing an 'opening' in the polygon it overlays, so the background (e.g. grid or other shape) is showing through.

  19. Dimitar
    Admin
    Dimitar avatar
    2161 posts

    Posted 19 Sep 2017 Link to this post

    Hello Tino,

    The Element property is not available on my side. Could you please update my test project so it reproduces this and attach it to a new support thread. This will allow me to properly investigate the case and provide you with a solution.

    Thank you in advance for your patience and cooperation. 

    Regards,
    Dimitar
    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.
  20.
  21. Tino
    Tino avatar
    72 posts
    Member since:
    Jul 2017

    Posted 19 Sep 2017 in reply to Dimitar Link to this post

    These were just some fixed values. Thanks.

     

       public static class Element
        {
            public static int ScrnH = 15;
            public static int ScrnW = 150;
        }

  23. Dimitar
    Admin
    Dimitar avatar
    2161 posts

    Posted 20 Sep 2017 Link to this post

    Hi Tino,

    This creates a small filled tringle. I have attached an updated version of my test project.  

    I am looking forward to your reply.

    Regards,
    Dimitar
    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.
  25. Tino
    Tino avatar
    72 posts
    Member since:
    Jul 2017

    Posted 21 Sep 2017 in reply to Dimitar Link to this post

    Replace the commented out line, with the one below it. Everything else is the same. Thanks.

    public override GraphicsPath CreatePath(Rectangle bounds)
    {
        //var path = new GraphicsPath(FillMode.Alternate);
        var path = base.CreatePath(bounds);
  26.
  27. Dimitar
    Admin
    Dimitar avatar
    2161 posts

    Posted 25 Sep 2017 Link to this post

    Hello Tino,

    If the parent path is used the triangle will be excluded from the shape since it is within the shape bounds, this is the expected result. How do you expect this shape to look?

    I am looking forward to your reply.
     
    Regards,
    Dimitar
    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