65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET 动态渐变处理程序

Jake Morgan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (19投票s)

2007 年 12 月 31 日

CPOL

2分钟阅读

viewsIcon

76886

downloadIcon

563

使用 ASP.NET IHttpHandler 动态创建浏览器独立的渐变。

引言

渐变是任何认真图形设计师的重要工具。合理使用渐变可以为几乎任何图形布局提供简单的专业效果。然而，HTML 和 CSS 并没有内置对渐变的支持。通常，会使用 Photoshop 等工具保存静态图像文件，然后将其作为背景平铺。虽然这种方法有效，但它可能很繁琐且缺乏灵活性，因为它需要额外的工具来管理图像。

GradientHandler 可以消除处理简单线性渐变时的不必要步骤。渐变通过 URL 参数定义，从而实现更易于管理的代码库。

背景

使用 GradientHandler 只需要基本的 ASP.NET 理解。但是，需要了解 GDI+ 和 ASP.NET IHttpHandler 接口才能完全理解其内部工作原理。

使用代码

GradientHandler 可以轻松配置为任何 .NET 2.0 或更高版本的应用程序。文件 GradientHandler.cs 和 Utility.cs 应该复制到应用程序根目录下的 /App_Code 目录中。Web.config 文件需要包含一个声明，将 GradientHandler 类映射到 URL。我们的示例映射到 Gradient.axd

<system.web>
    <httpHandlers>
        <add path="Gradient.axd" verb="GET" 
          type="Elsinore.Website.GradientHandler"/>
    </httpHandlers>
</system.web>

GradientHandler 可以最简单地通过 CSS 引用来使用

body
{
    background: Black url(Gradient.axd?Orientation=Horizontal&
        Length=300&StartColor=000000&EndColor=FFFFFF) repeat-y;
}

这将在一个简单的页面上产生以下背景

GradientHandler 也可以以编程方式引用，从而打开更多选项。以下代码允许用户指定渐变参数

标记

<body runat="server" id="body">
    <form id="form1" runat="server">
        Length:
        <asp:TextBox runat="server" ID="lengthBox" Text="300" />
        <br />
        StartColor:
        <asp:TextBox runat="server" ID="startColorBox" Text="#F00" />
        <br />
        FinishColor:
        <asp:TextBox runat="server" ID="finishColorBox" Text="#0F0" />
        <br />
        <asp:Button runat="server" Text="Submit" />
    </form>
</body>

代码

protected void Page_Load(object sender, EventArgs e)
{
    // parse the parameters
    int length = int.Parse(this.lengthBox.Text);
    Color startColor = ColorTranslator.FromHtml(this.startColorBox.Text);
    Color finishColor = ColorTranslator.FromHtml(this.finishColorBox.Text);

    // generate css declaration
    string backgroundUrl = GradientHandler.GetUrl(Orientation.Vertical, 
                           length, startColor, finishColor);
    string backgroundCss = string.Format("{0} url({1}) repeat-x", 
                           this.finishColorBox.Text, backgroundUrl);
    this.body.Style.Add("background", backgroundCss);
}

在此示例中，用户可以指定渐变的长度、起始颜色和结束颜色。使用这些参数调用静态方法 GradientHandler.GetUrl，并将声明添加到 body 标签中。结果如下

此示例的实时演示可在 www.elsitech.com 获得。

关注点

GradientHandler 具体生成线性渐变，但 HTML 和 CSS 中的其他图形缺陷也可以通过使用 ASP.NET HTTP 处理程序和 GDI+ 进行动态生成来解决。圆角矩形、高级文本效果和图像滤镜只是其中的一些机会。

© . All rights reserved.