How do you apply a gradient to a line shape like a NRoutableConnector?(i.e. two color gradient, applied to the entire line one color from one end, and ending in a different color on the other end)

I played around with the Nevron examples application and was able to apply a gradient fill (Fill Style) to a box shape; however, when I applied it to a line shape, it didn't seem to do anything. The line would only seemed to be taking into consideration the stroke style settings.

Thank you!

Hi,

Routable connectors appearance is indeed determined by their stroke style, as 1D shapes do not have a filling. A possible workaround is to use a 2D connector, for example an arrow shape and apply a gradient fill style to it. The attached image shows an arrow shape with a gradient fill style. To create the diagram shown in the image, you can use the following sample code:

// Create a basic shapes factory

NBasicShapesFactory factory = new NBasicShapesFactory(document);

factory.DefaultSize = new NSizeF(150, 100);

 

// Use the factory to create two shapes

NShape shape1 = factory.CreateShape(BasicShapes.Rectangle);

shape1.Location = new NPointF(20, 20);

document.ActiveLayer.AddChild(shape1);

 

NShape shape2 = factory.CreateShape(BasicShapes.Rectangle);

shape2.Location = new NPointF(420, 20);

document.ActiveLayer.AddChild(shape2);

 

// Create a 2D arrow shape filled with a gradient and use it as a connector

NArrowShape arrow = new NArrowShape(ArrowType.SingleArrow, new NPointF(0, 0), new NPointF(100, 0), 10, 30, 60);

NStyle.SetFillStyle(arrow, new NGradientFillStyle(GradientStyle.Vertical, GradientVariant.Variant1, Color.Red, Color.Blue));

document.ActiveLayer.AddChild(arrow);

arrow.FromShape = shape1;

arrow.ToShape = shape2;

 

document.SizeToContent();

Best Regards,
Nevron Support Team

Hi there, thanks for the reply.  The problem is that we need to be able to set the line pattern (i.e. dashed line) and also use the routing connector for routing around objects.  The gradient color is the last piece we need to apply to the line.  Right now, only a solid color can be applied to the strokestyle.

Would it be possible to create some 1D line renderer that is able to apply a custom gradient to the line?  Or can you think of another way to get this to work?

Thanks for your time

I'm also interested in showing connectors with a gradient fill...

I'm new to the Diagram component. Could you post a snippet on how you achieved the gradient arrow example?

Thanks
Andy

Hi, Andrew. We have updated the post above to include some code you can use to create the gradient arrow sample diagram shown in the attached image.

Best Regards,
Nevron Support Team