GDI+设计 / 图形架构 .NET 2.0 中级开发 .NET ASP.NET C#

使用 ASP 页面进行图形渲染

Henry Tan Setiawan

4.10/5 (6投票s)

2009年2月17日

CPOL

2分钟阅读

51131

897

使用 ASP.NET/GDI+/C# 动态渲染 2D 图形

下载源代码 - 73.22 KB

引言

在本文中，我将向您展示如何编写一个简单的 ASP.NET 页面，该页面可以动态渲染 PNG 图像。如果您正在考虑编写一个 Web 绘图应用程序，本文将为您提供使用 ASP.NET/C# 和 Win32 GDI+ 渲染图形的基本技能。

背景

如果您正在开发 Windows 窗体 .NET 应用程序，将图形渲染到 Windows 窗体是相对简单的。常见的技术是重写 Windows 窗体的 OnPaint() 方法，并使用 Graphics 对象绘制或渲染图形。但是，如果您想在 Web/ASP.NET 应用程序上执行此操作，则并非易事。

以下示例显示了如何使用 GDI+ 图形库将图形渲染到 Bitmap 表面，并将图形渲染为 PNG 文件，并将 PNG 文件作为对 Web 请求的响应返回。

使用 GDI+ 渲染图形

以下函数显示了如何使用 GDI+ System.Drawing.Graphics 对象绘制基本形状。

/// <summary>
/// Draw rectangle
/// </summary>
private void DrawRectangle(Graphics g)
{
    g.Clear(Color.White);
    g.FillRectangle(Brushes.Blue, new Rectangle(0, 0, this.width, this.height));
}

/// <summary>
/// Draw triangle
/// </summary>
private void DrawTriangle(Graphics g)
{
    g.Clear(Color.White);
    g.FillPolygon(
    Brushes.Orange,
    new PointF[]
    {
        new PointF(0, this.height),
        new PointF(this.width, this.height),
        new PointF(this.width/2, 0)
    });
}

/// <summary>
/// Fill circle
/// </summary>
private void DrawCircle(Graphics g)
{
    g.Clear(Color.White);
    g.FillEllipse(Brushes.Red, 0, 0, this.width, this.height);
}

将图形渲染到位图表面

GDI+ Graphics 对象需要一个绘图表面来渲染图形。默认的绘图表面是屏幕缓冲区。但是，在我们的例子中，我们希望将图形渲染到 Bitmap 表面。下面的 DrawToBitmap() 函数显示了如何将图形绘制到位图表面。当我们创建 Bitmap 时，我们需要指定表面的 width 和 height。

/// <summary>
/// Draw shape to bitmap
/// </summary>
/// <returns>Bitmap object</returns>
private Bitmap DrawToBitmap()
{
    Bitmap bmp = new Bitmap(this.width, this.height, PixelFormat.Format32bppArgb);

    using (Graphics g = Graphics.FromImage(bmp))
    {
        switch (this.myShape)
        {
            case Shapes.Circle:
                this.DrawCircle(g);
                break;
            case Shapes.Rectangle:
                this.DrawRectangle(g);
                break;
            case Shapes.Triangle:
                this.DrawTriangle(g);
                break;
        }
    }

    return bmp;
}

对 WebRequest 的响应

将图形渲染到 Bitmap 后，我们可以使用 Response.BinaryWrite() 方法响应 Web 请求。 BinaryWrite 的参数是一个字节数组。为了获得 PNG 图像的响应，我们需要将 Bitmap 转换为字节数组。

以下是如何将 Bitmap 转换为字节数组。

/// <summary>
/// Save bitmap as PNG encoded byte array
/// </summary>
/// <returns>byte arrays</returns>
public byte[] Render()
{
    Rectangle region = new Rectangle(0, 0, this.width, this.height);
    using (Bitmap bitmap = this.DrawToBitmap())
    {
        using (MemoryStream imageStream = new MemoryStream())
        {
            bitmap.Save(imageStream, ImageFormat.Png);
            byte[] buffer = new byte[imageStream.Length];
            imageStream.Seek(0, SeekOrigin.Begin);
            imageStream.Read(buffer, 0, buffer.Length);

            return buffer;
        }
    }
}

最后，您可以使用 Response.BinaryWrite() 函数将 PNG 图像作为响应发送到浏览器。如果您想使用不同的图像编码，例如 JPEG，您可以在调用 bitmap.Save() 时指定 ImageFormat.Jpeg。

protected void Page_Load(object sender, EventArgs e)
{
    Response.ContentType = "image/png";
    Canvas myCanvas = new Canvas();
    byte[] data;

    if (Request.QueryString.Count != 0)
    {
        string shape = Request.QueryString["shape"];
        if (shape.Equals("triangle", StringComparison.InvariantCultureIgnoreCase))
        {
            myCanvas.MyShape = Canvas.Shapes.Triangle;
        }
        else if (shape.Equals("rectangle", StringComparison.InvariantCultureIgnoreCase))
        {
            myCanvas.MyShape = Canvas.Shapes.Rectangle;
        }
        else
        {
            myCanvas.MyShape = Canvas.Shapes.Circle;
        }
    }
    data = myCanvas.Render();
    Response.BinaryWrite(data);
}

您可以运行给定的示例，如果您将 ASP.NET 项目发布到本地 IIS Web 服务器 (https:///default.aspx)，您可以通过在浏览器中运行以下内容来查看 ASP.NET 页面渲染圆形/矩形/三角形