Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Add An Image to A DiagramLink (Read 4952 times)
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Add An Image to A DiagramLink
May 28th, 2013 at 8:52pm
Print Post  
Hi,

I've been away from NetDiagram for a bit, so I need some advice on how to best approach this requirement.
Have a look at the attached image.
We'd like to either a) add an image as well as text (both would span the link) or b) add an image that's on top of the link.
Any suggestions on how to proceed?
As always, code snippets are always welcomed.

Thanks in advance.

Jim
  

Image_On_Link_Mockups.png (Attachment deleted)
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Add An Image to A DiagramLink
Reply #1 - May 29th, 2013 at 11:18am
Print Post  
Hi,

This shows how to custom-draw an image below the middle point of a link, in JavaApplet mode:

Code
Select All
var mailIcon = null;

function onLinkCreated(sender, args)
{
	var link = args.getLink();
	link.setCustomDraw(1);
}

function onDrawLink(sender, args)
{
	var applet = <%= diagramView.AppletElement %>;
	if (!mailIcon)
		mailIcon = applet.loadImage("mail.png");

	if (mailIcon)
	{
		var link = args.getLink();
		var points = link.getControlPoints();
		var l = points.size() - 1;
		var start = points.get(0);
		var end = points.get(l);

		var w = mailIcon.getWidth(null) * 25.4 / 72;	// convert to mm
		var h = mailIcon.getHeight(null) * 25.4 / 72;
		var x = (start.getX() + end.getX() - w) / 2;
		var y = (start.getY() + end.getY()) / 2 + 4;

		args.getGraphics().drawImage(mailIcon, x, y, w, h, null);
	}
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Add An Image to A DiagramLink
Reply #2 - May 29th, 2013 at 4:33pm
Print Post  
Hi,

I guess I should have mentioned that I was using ImageMap mode.
Is there an equivalent way of doing what you provided in code behind (C#)?

Thanks

Jim
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Add An Image to A DiagramLink
Reply #3 - May 29th, 2013 at 4:42pm
Print Post  
Hi,

Yes, you could add a handler to DiagramView.Diagram.DrawLink event from Page_Load and handle it with equivalent GDI+ code.

I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Add An Image to A DiagramLink
Reply #4 - May 29th, 2013 at 8:40pm
Print Post  
Hi,

I added the event handler as you suggested, but it never fires.
Is this a server-side or client-side event?  I created a server-side function.

The image should be created as the diagram is rendered based on information in the database.  I would think that I should be doing this in the same class in which I am creating the rest of the diagram.

I was thinking of placing the image name/path in the link.tag property as the links are created, and then iterating through all of the links once the diagram is completely rendered.  Then I can add the appropriate image to those links that have been tagged.

Any additional suggestions?

Thanks for steering me through this.

Jim
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Add An Image to A DiagramLink
Reply #5 - May 29th, 2013 at 8:56pm
Print Post  
Me again,

I read the manual! 
I needed to add the following to get the event to fire:

link.CustomDraw = CustomDraw.Additional;

I'm sure I'll have more questions on how to proceed, but let me try a few things first.

Jim
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Add An Image to A DiagramLink
Reply #6 - May 29th, 2013 at 11:37pm
Print Post  
I'm back,

So, I've made a little progress, but without success.
I haven't done much with GDI+, so I'm probably doing something silly.
I call the following routine immediately before my class returns a diagram:

Code
Select All
protected void setLinkImages(Diagram diagram)
    {
        foreach (DiagramLink link in diagram.Links)
        {
            if (link.Tag.ToString().Length > 0)
            {
                float x1 = link.ControlPoints[0].X;
                float y1 = link.ControlPoints[0].Y;
                float x2 = link.ControlPoints[1].X;
                float y2 = link.ControlPoints[1].Y;

                if (y1 == y2) // horizontal line segment
                {

                    string path = Server.MapPath("~/Images/black_square_10x10.png");
                    Bitmap image = new Bitmap(path);
                    float imgWidth = image.Width;
                    float imgHeight = image.Height;

                    Graphics g = Graphics.FromImage(image);
                    PointF leftCorner = new PointF( x1 + ((x2 - x1) / 2) - (imgWidth / 2), y1 - (imgHeight / 2));
                    g.DrawImage(image, leftCorner);
                }
            }
        } 



Needless to say, the image does not render on any of the horizontal links anywhere on the diagram.

So what am I missing?

Thanks for your patience.

Jim
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: Add An Image to A DiagramLink
Reply #7 - May 30th, 2013 at 7:10am
Print Post  
You will need to draw on the Graphics surface provided by the DrawLink event. This code of yours only tries to render the bitmap over itself:

Code
Select All
Graphics g = Graphics.FromImage(image);
...
g.DrawImage(image, leftCorner); 



Try something along these lines:

Code
Select All
protected void Page_Load(object sender, EventArgs e)
{
	var diagram = diagramView.Diagram;
	if (!IsPostBack)
	{
		var node1 = diagram.Factory.CreateShapeNode(20, 20, 20, 20);
		var node2 = diagram.Factory.CreateShapeNode(120, 20, 20, 20);
		var link = diagram.Factory.CreateDiagramLink(node1, node2);
		link.CustomDraw = CustomDraw.Additional;
	}

	diagram.DrawLink += OnDrawLink;
}

void OnDrawLink(object sender, DrawLinkEventArgs e)
{
	var unit = diagramView.Diagram.MeasureUnit;
	var image = Image.FromFile(Server.MapPath("mail.png"));
	float imgWidth = image.Width * Constants.GetPixel(unit);
	float imgHeight = image.Height * Constants.GetPixel(unit);

	var link = e.Link;
	var pt1 = link.StartPoint;
	var pt2 = link.EndPoint;

	var leftCorner = new PointF((pt1.X + pt2.X - imgWidth) / 2, (pt1.Y + pt2.Y) / 2 + 4);
	e.Graphics.DrawImage(image, leftCorner);
} 



I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
jlj30
Full Member
***
Offline


I love YaBB 1G - SP1!

Posts: 183
Joined: Sep 4th, 2011
Re: Add An Image to A DiagramLink
Reply #8 - May 30th, 2013 at 12:41pm
Print Post  
Hi Stoyan,

Awesome!  It works great.
Now that I understand this technique, there are numerous opportunities to employ it.

Thanks for all the help.

Jim
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint