如何绘制正方形的边框？

Question

我正在使用monogame（使用XNA API接口）来编写我的游戏。到目前为止，它很棒，但我已经遇到了一些应该简单的事情。

我需要画一个2d的正方形。但我只想要边框（没有填充）。

我看过很多例子，展示如何做一个填充的例子。但没有一个只显示边界。

我想我可以制作一张图片并使用它。但我怀疑它会很好地调整大小。

Answer 1

我刚刚以这种方式为Texture2D创建了一个扩展方法：

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 );
    }
}

然后我测试了它：

//...

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 );
}

结果如下：

Answer 2

也许您可以使用1x1像素纹理使用精灵批处理来绘制单个边。在XNA中，您可以这样做：

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);
    }     
}

生成的图形比传递的矩形宽{（1}}像素（和更高）。

上面是用这段代码绘制的：

lineWidth

Answer 3

我为绘制图元创建了一个实用工具类。您可能会发现它很有用

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);
    }
}

Answer 4

以下是我的表现方式：

    private void OutLine_Box(SpriteBatch sbatch, Rectangle rect)
    {
        List<Vector2> pixels = new List<Vector2>();
        for (int x = rect.X; x < rect.X + rect.Width; x++)
        {
            for (int y = rect.Y; y < rect.Y + rect.Height; y++)
            {
                if (y == rect.Y || y == rect.Y + rect.Height - 1)
                    pixels.Add(new Vector2(x, y));
                if (x == rect.X || x == rect.X + rect.Width - 1)
                    pixels.Add(new Vector2(x, y));
            }
        }

        foreach (Vector2 v in pixels)
            sbatch.Draw(PixelTexture, v, OutLineColor);
    }