I want to create a simple graph maker in WP7.

The goal is to draw a texture line between two vectors what the user defines with touch. I already made the rotation, and it is working, but not correctly, because it doesn't calculate the line's texture height, and because of that, there are too many overlapping textures. So it does draw the line, but too many of them.

How could I calculate it correctly?

Here is the code:

public void DrawLine(Vector2 st,Vector2 dest,NodeUnit EdgeParent,NodeUnit EdgeChild)
        float d = Vector2.Distance(st, dest);
        float rotate = (float)(Math.Atan2(st.Y - dest.Y, st.X - dest.X));
        direction = new Vector2(((dest.X - st.X) / (float)d), (dest.Y - st.Y) / (float)d);
        Vector2 _pos = st;
        World.TheHive.Add(new LineHiveMind(linetexture, _pos, rotate, EdgeParent, EdgeChild,new List<LineUnit>()));
        for (int i = 0; i < d; i++)
            World.TheHive.Last()._lines.Add(new LineUnit(linetexture, _pos, rotate, EdgeParent, EdgeChild));
            _pos += direction;

  • d is for the Distance of the st (Starting node) and dest (Destination node)
  • rotate is for rotation
  • direction calculates the direction between the starting and the destination node
  • _pos is for starting position changing

Thanks for any suggestions/help!

  • 2
    \$\begingroup\$ Can you give us an image example of what you want and what's happening now? \$\endgroup\$
    – House
    Mar 22, 2012 at 14:50
  • \$\begingroup\$ Example link The problem is that there are too many lines, and it is hard to work with them. \$\endgroup\$
    – Krav
    Mar 22, 2012 at 17:25
  • \$\begingroup\$ A better explanation: Between two nodes (houses) there are too many lines (equal to the distance between them). But it would need a lot less because of the height of the line picture, but I don't know how to add the height of the texture into the calculation. \$\endgroup\$
    – Krav
    Mar 22, 2012 at 17:42
  • \$\begingroup\$ I think I understand, essentially the texture you use for the line is being repeated because the line you're drawing is too thick? \$\endgroup\$
    – House
    Mar 22, 2012 at 17:49
  • \$\begingroup\$ Yes, that's the case. It would be thinner, and I made some functions to check the collision between separate edges and houses, but because of the mass repetation it takes too much power from the device. So instead of checking 5 lines it checks 300~500 lines. \$\endgroup\$
    – Krav
    Mar 22, 2012 at 17:50

2 Answers 2


I'm not sure I understood what your problem is, but here's how I do it. First I create a static class on my project to provide an extension method for SpriteBatch that lets it know how to draw textured line. Example (just the class, it's missing the using directives and the namespace so place it wherever you want):

public static class LineRenderer
    public static void DrawLine(this SpriteBatch spriteBatch, Texture2D texture, Vector2 start, Vector2 end)
        spriteBatch.Draw(texture, start, null, Color.White,                                            
                         (float)Math.Atan2(end.Y - start.Y, end.X - start.X),
                         new Vector2(0f, (float)texture.Height / 2),      
                         new Vector2(Vector2.Distance(start, end), 1f),
                         SpriteEffects.None, 0f);

The texture passed to the method should have size 1xN where N is the thickness of my ine. I'll give an example further below but first an usage example:

spriteBatch.DrawLine(lineTexture, new Vector2(20, 20), new Vector2(120, 120));
spriteBatch.DrawLine(lineTexture, new Vector2(120, 20), new Vector2(220, 60));
spriteBatch.DrawLine(lineTexture, new Vector2(20, 240), new Vector2(220, 100));

Which gives the following result (using the texture on the right side which I zoomed in for clarity):

enter image description here

  • \$\begingroup\$ It seems it is a very good solution, but is there a way to check collision with it? That is very important. \$\endgroup\$
    – Krav
    Mar 22, 2012 at 19:08
  • 1
    \$\begingroup\$ @Krav What's your question after all? You asked about drawing not collisions. You should have been more clear, as they're completely separate concepts. Anyway, yes there's a way. If line thickness can be ignored for determining collisions you can use this. That's what I suggest. If line thickness matters you'll need to check the collision between two oriented bounding rectangles and it's not that simple. You would need to use something like the separating axis theorem. \$\endgroup\$ Mar 22, 2012 at 19:28
  • \$\begingroup\$ Thanks for the links! Sorry for the wrong question. I'll mark this as the answer for this question. \$\endgroup\$
    – Krav
    Mar 22, 2012 at 21:37

I think you are mixing up your logic and drawing code too much. Separate your node linking and line creating.

Basically it looks like you want to draw a "thick" textured line between two points on screen. Here's some pseudo code that shows you how to get all the vertices for doing just that:

DrawThickLine(Vector2 startP, Vector2 endP, float width) {
    float dx = startP.x - endP.x;
    float dy = startP.y - endP.y;

    Vector2 rightSide = new Vector2(dy, -dx);
    if (rightSide.length() > 0) {
        rightSide.scale(width / 2);

    Vector2 leftSide = new Vector2(-dy, dx);
    if (leftSide.length() > 0) {
        leftSide.scale(width / 2);
    Vector2 one = leftSide + startP;
    Vector2 two = rightSide + startP;
    Vector2 three = rightSide + endP;
    Vector2 four = leftSide + endP;

  • \$\begingroup\$ Ah well, I realized that you're drawing a sprite. So vertices aren't much use to you. Well I'll leave this up for anyone drawing thick lines that aren't sprites... \$\endgroup\$
    – House
    Mar 22, 2012 at 20:29

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .