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

Custom RadDiagramConnector

1 Answer 17 Views
Diagram, DiagramRibbonBar, DiagramToolBox
This is a migrated thread and some comments may be shown as answers.
Raffaele
Top achievements
Rank 1
Raffaele asked on 15 Apr 2021, 10:13 AM

Hi,

i need to create a custom RadDiagramConnector with custom shape then add it to a shape like RoundRectShape and i should connect from  it with a drag operation to another RoundRectShape and create programmaticalli the connection.

It is possible to have a complete example

Thanks in advance

 

Raffaele Z.

 

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 16 Apr 2021, 06:42 AM

Hello, Raffaele, 

Each RadDiagramShape offers Connectors collection that stores its connector elements. The RadDiagramConnector.Shape property indicates what is the exact shape of the connector. However, it can't be publicly changed since its setter is internal. 

Currently, it is possible to manage the connector's size and offset:

            RadDiagramShape shape = new RadDiagramShape();
            shape.BackColor = System.Drawing.Color.Blue;
            shape.Shape = new RoundRectShape(5);
            shape.Size = new System.Drawing.Size(100, 100);
            shape.Position = new Telerik.Windows.Diagrams.Core.Point(400, 100);
 
            radDiagram1.Items.Add(shape);
 
            RadDiagramConnector topConnector = shape.Connectors["Top"] as RadDiagramConnector;
 
            topConnector.BackColor = System.Drawing.Color.Red;
            topConnector.MinSize = new System.Drawing.Size(10, 10);
            topConnector.Offset = new Telerik.Windows.Diagrams.Core.Point(1d, 0.25);

 

However, you can draw your own custom connectors. You can find below the default painting implementation for the connector. Feel free to implement any custom drawing that you need using the graphics object. Then, you can clear the default shape's connectors and add your own ones:

        public RadForm1()
        {
            InitializeComponent();

            RadDiagramShape shape = new RadDiagramShape();
            shape.Shape = new RoundRectShape();
            shape.Position = new Telerik.Windows.Diagrams.Core.Point(20, 20);
            shape.BackColor = System.Drawing.Color.Red;
            this.radDiagram1.AddShape(shape); 

            List<RadDiagramConnector> customConnectores = new List<RadDiagramConnector>(); 
            foreach (RadDiagramConnector connector in shape.Connectors)
            {
                CustomRadDiagramConnector customConnector = new CustomRadDiagramConnector();
                customConnector.Offset = connector.Offset;
                customConnector.Name = connector.Name;
                customConnectores.Add(customConnector); 
            }
            shape.Connectors.Clear();
            foreach (RadDiagramConnector item in customConnectores)
            {
                shape.Connectors.Add(item);
            }
        }

        public class CustomRadDiagramConnector : RadDiagramConnector
        {
            protected override void PaintElement(Telerik.WinControls.Paint.IGraphics graphics, float angle, SizeF scale)
            {
                var gfx = ((Telerik.WinControls.Paint.RadGdiGraphics)graphics).Graphics;
                gfx.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
                gfx.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                gfx.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
                gfx.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
                float scaleX = 0;
                float scaleY = 0;
                System.Drawing.PointF[] point = new System.Drawing.PointF[1] { new System.Drawing.PointF(0,1) };

                (((Telerik.WinControls.Paint.RadGdiGraphics)(graphics))).Graphics.Transform.TransformVectors(point);
                float dist = (float)Math.Sqrt(point[0].X * point[0].X + point[0].Y * point[0].Y);
                if (dist < 1 && dist > 0)
                {
                    scaleX = 1f / dist;
                    scaleY = 1f / dist;
                    graphics.ScaleTransform(new System.Drawing.SizeF(scaleX, scaleY));
                }
            
                graphics.DrawRectangle(new System.Drawing.Rectangle(0, 0, (int)this.Width, (int)this.Height), this.ForeColor);
                graphics.FillRectangle(new System.Drawing.Rectangle(0, 0, (int)this.Width, (int)this.Height), System.Drawing.Color.White); 

                if (dist < 1 && dist > 0)
                { 
                    graphics.ScaleTransform(new System.Drawing.SizeF(-scaleX, -scaleY));
                }
            }
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Diagram, DiagramRibbonBar, DiagramToolBox
Asked by
Raffaele
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or