Nevron Forum

Associate an Image to an Edge

https://www.nevron.com/Forum/Topic3737.aspx

By Luis Mendes - Tuesday, June 22, 2010

Is it possible? I would like to draw an edge, lets say NBezierCurveShape, and right in the middle of the edge (distance between the two vertices) I would like to place an image.

Here is the scenario: I have a material flow going from "City A" to "City B" and the edges represent time by transportation mode. So I would draw an edge for time X going from A to B with a "Truck" image associated to the edge, and another edge for time Y also from A to B with a "Boat" image associated to the edge.

Thanks in advance.

 

By Nevron Support - Wednesday, June 23, 2010

Hi,

To create a line with an image you have to do the following things:

 

1.       Create a line shape and add a logical line port to it

2.       Create a rectangle shape and fill it with the image

3.       Add an outward port at the bottom center of the rectangle shape

4.       Connect the line’s and the rectangle’s port

 

The following is a sample source code:

 

NBasicShapesFactory factory = new NBasicShapesFactory(document);

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

 

// Create 2 rectangle shapes

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

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

document.ActiveLayer.AddChild(shape1);

 

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

shape2.Location = new NPointF(250, 0);

document.ActiveLayer.AddChild(shape2);

 

// Create the line of the connector

NLineShape lineShape = new NLineShape();

document.ActiveLayer.AddChild(lineShape);

NLogicalLinePort linePort = new NLogicalLinePort();

linePort.DirectionMode = LogicalLinePortDirectionMode.AutoLineInverted;

lineShape.CreateShapeElements(ShapeElementsMask.Ports);

lineShape.Ports.AddChild(linePort);

 

// Create the image of the connector

NRectangleShape imageShape = new NRectangleShape(0, 0, 50, 50);

document.ActiveLayer.AddChild(imageShape);

NStyle.SetFillStyle(imageShape, new NImageFillStyle(@"D:\car.jpg"));

NRotatedBoundsPort port = new NRotatedBoundsPort(new NContentAlignment(ContentAlignment.BottomCenter));

port.Type = PortType.Outward;

imageShape.CreateShapeElements(ShapeElementsMask.Ports);

imageShape.Ports.AddChild(port);

 

// Connect the line and the image

port.Connect(linePort);

 

// Connect the 2 rectangles with our new connector

lineShape.FromShape = shape1;

lineShape.ToShape = shape2;

 

document.SizeToContent();