How to draw the border of a square?

Question

I'm using monogame (which uses the XNA API interface) to write my game. So far it is great, but I have hit a snag on something that should be simple.

I need to draw a 2d square. But I only want the border (No fill).

I have seen many examples that show how to do a filled one. But none that will show a border only.

I suppose I can make an image and use that. But I doubt it will resize well.

Answer 1

Maybe you can use a 1x1 pixel texture to draw the individual edges with a sprite batch. In XNA, you could do this:

class RectangleSprite
{
    static Texture2D _pointTexture;
    public static void DrawRectangle(SpriteBatch spriteBatch, Rectangle rectangle, Color color, int lineWidth)
    {
        if (_pointTexture == null)
        {
            _pointTexture = new Texture2D(spriteBatch.GraphicsDevice, 1, 1);
            _pointTexture.SetData<Color>(new Color[]{Color.White});
        }

        spriteBatch.Draw(_pointTexture, new Rectangle(rectangle.X, rectangle.Y, lineWidth, rectangle.Height + lineWidth), color);
        spriteBatch.Draw(_pointTexture, new Rectangle(rectangle.X, rectangle.Y, rectangle.Width + lineWidth, lineWidth), color);
        spriteBatch.Draw(_pointTexture, new Rectangle(rectangle.X + rectangle.Width, rectangle.Y, lineWidth, rectangle.Height + lineWidth), color);
        spriteBatch.Draw(_pointTexture, new Rectangle(rectangle.X, rectangle.Y + rectangle.Height, rectangle.Width + lineWidth, lineWidth), color);
    }     
}

The resulting drawing will be lineWidth pixels wider (and higher) than the passed rectangle.

The above was drawn with this code:

sb.Begin(); //spritebatch
RectangleSprite.DrawRectangle(sb, new Rectangle(10, 10, 50, 100), Color.Red, 1);
RectangleSprite.DrawRectangle(sb, new Rectangle(30, 20, 80, 15), Color.Green, 4);
RectangleSprite.DrawRectangle(sb, new Rectangle(70, 40, 40, 70), Color.Blue, 6);
sb.End();

Answer 2

I just created an extension method for Texture2D in this way:

static class Utilities {
    public static void CreateBorder( this Texture2D texture,  int borderWidth, Color borderColor ) {
        Color[] colors = new Color[ texture.Width * texture.Height ];

        for ( int x = 0; x < texture.Width; x++ ) {
            for ( int y = 0; y < texture.Height; y++ ) {
                bool colored = false;
                for ( int i = 0; i <= borderWidth; i++ ) {
                    if ( x == i || y == i || x == texture.Width - 1 - i || y == texture.Height - 1 - i ) {
                        colors[x + y * texture.Width] = borderColor;
                        colored = true;
                        break;
                    }
                }

                if(colored == false)
                    colors[ x + y * texture.Width ] = Color.Transparent;
            }
        }

        texture.SetData( colors );
    }
}

Then I tested it:

//...

protected override void Initialize( ) {
   // TODO: Add your initialization logic here
   square = new Texture2D( GraphicsDevice, 100, 100 );
   square.CreateBorder( 5, Color.Red );

   base.Initialize( );
}

//...

protected override void Draw( GameTime gameTime ) {
   GraphicsDevice.Clear( Color.CornflowerBlue );

   // TODO: Add your drawing code here
   spriteBatch.Begin( );
   spriteBatch.Draw( square, new Vector2( 0.0f, 0.0f ), Color.White );
   spriteBatch.End( );

   base.Draw( gameTime );
}

The result is the following:

Answer 3

I made an utility class for drawing primitives. You might find it useful

static public class PrimiviteDrawing
{
    static public void DrawRectangle(Texture2D whitePixel, SpriteBatch batch, Rectangle area, int width, Color color)
    {
        batch.Draw(whitePixel, new Rectangle(area.X, area.Y, area.Width, width), color);
        batch.Draw(whitePixel, new Rectangle(area.X, area.Y, width, area.Height), color);
        batch.Draw(whitePixel, new Rectangle(area.X + area.Width - width, area.Y, width, area.Height), color);
        batch.Draw(whitePixel, new Rectangle(area.X, area.Y + area.Height - width, area.Width, width), color);
    }
    static public void DrawRectangle(Texture2D whitePixel, SpriteBatch batch, Rectangle area)
    {
        DrawRectangle(whitePixel, batch, area, 1, Color.White);
    }
    public static void DrawCircle(Texture2D whitePixel, SpriteBatch spritbatch, IntegerVector2 center, float radius, Color color, int lineWidth = 2, int segments = 16)
    {
        Vector2[] vertex = new Vector2[segments];

        double increment = Math.PI * 2.0 / segments;
        double theta = 0.0;

        for (int i = 0; i < segments; i++)
        {
            vertex[i] = center.ToVector2() + radius * new Vector2((float)Math.Cos(theta), (float)Math.Sin(theta));
            theta += increment;
        }

        DrawPolygon(whitePixel, spritbatch, vertex, segments, color, lineWidth);
    }
    public static void DrawPolygon(Texture2D whitePixel, SpriteBatch spriteBatch, Vector2[] vertex, int count, Color color, int lineWidth)
    {
        if (count > 0)
        {
            for (int i = 0; i < count - 1; i++)
            {
                DrawLineSegment(whitePixel, spriteBatch, vertex[i], vertex[i + 1], color, lineWidth);
            }
            DrawLineSegment(whitePixel, spriteBatch, vertex[count - 1], vertex[0], color, lineWidth);
        }
    }
    public static void DrawLineSegment(Texture2D whitePixel, SpriteBatch spriteBatch, Vector2 point1, Vector2 point2, Color color, int lineWidth)
    {
        float angle = (float)Math.Atan2(point2.Y - point1.Y, point2.X - point1.X);
        float length = Vector2.Distance(point1, point2);

        spriteBatch.Draw(whitePixel, point1, null, color,
        angle, Vector2.Zero, new Vector2(length, lineWidth),
        SpriteEffects.None, 0f);
    }
}