ASP.NET网页中创建旋转的垂直文本图像

介绍

此示例代码允许您使用自定义HTTP处理程序和.NET图形库（GDI +）在ASP.NET网页中创建旋转的垂直文本图像。

背景

在最近的一个项目中，我被要求使用旋转的垂直文本列标题显示一个如上所述的数据表。对于可能有多列的表格报表，垂直文本有时是用户可以查看数据的唯一方式。Internet Explorer提供了一种显示垂直文本的方法，style="writing-mode:tb-rl"但没有其他浏览器支持它，我想要一个可在Firefox和其他浏览器中使用的解决方案。

创建垂直文本图像

该ImageCreationLibrary.cs文件是负责创建和保存垂直文本图像，它使用微软的.NET GDI +功能的格式。
我工作的策略是StringFormatFlags.DirectionVertical用来画出文本。棘手的部分是默认从上到下写入文本阅读，所以你必须将图像旋转180度并适当地翻译。大多数人认为，自下而上阅读垂直文本更容易，因为每个单词中的第一个字母将排列在同一位置。
ImageCreationLibrary.cs内主要代码是内部CreateVerticalTextImage方法：

public string CreateVerticalTextImage(string stText, Font f)
{
string stFileName = Toolbox.GetMD5String(stText);
string stFullFilePath = this._baseImagePath + stFileName + ".jpg";
if (!File.Exists(stFullFilePath))
{
StringFormat stringFormat = new StringFormat();
stringFormat.FormatFlags = StringFormatFlags.DirectionVertical;

SizeF imageSize = _graphics.MeasureString(stText, f, 25, stringFormat);
System.Drawing.Image i = (Image)new Bitmap((int)imageSize.Width,
(int)imageSize.Height);
Graphics g = Graphics.FromImage(i);
g.FillRectangle(Brushes.White, 0, 0, i.Width, i.Height);

//flip the image 180 degrees
g.TranslateTransform(i.Width, i.Height);
g.RotateTransform(180.0F);

g.DrawString(stText, f, Brushes.Black, 0, 0, stringFormat);

i.Save(stFullFilePath, System.Drawing.Imaging.ImageFormat.Jpeg);
}
return stFullFilePath;
}

CreateVerticalTextImage基于传入的文本生成MD5哈希; 你可以做别的事情，这只是一种确保文件路径中没有无效字符，并且名称有些独特性的方法。然后，它创建一个足够大的白框以适应文本。使用图形对象，然后TranslateTransform我们根据180度旋转调用将我们的图像转换回我们想要的位置。然后我们调用RotateTransform，通过180度实际实现我们想要的旋转转换。最后CreateVerticalTextImage调用DrawString图形对象绘制我们的垂直文本，并保存图像。

使用代码

那么这一切都非常好，很诡异，但是如何使用这个代码，实际上在我的网页中包含一个垂直的文本图像？我创建了一个自定义HttpHandler：ImageViewer.cs，ImageViewer 该类从方法调用中传递IHttpHandler 和传递给我们称为“text ” 的参数。ProcessRequestCreateVerticalTextImageGET

//get the text passed in
string stText = context.Request.QueryString["text"];
if (stText != null && stText != "")
{
string stFileName = this.imageLib.CreateVerticalTextImage
(stText, new System.Drawing.Font(System.Drawing.FontFamily.GenericSerif, 12));
this.WriteImageFile(context, stFileName);
}

ImageViewer.cs里的WriteImageFile内部方法基于图像文件的扩展名简单地设置内容类型，并在HttpContext 对象之上调用Response.WriteFile(stFilePath)。
确保HttpHandler 在Web.Config文件中注册自定义，以便我们确保Get_image.aspx的请求由ImageViewer.cs处理。

<system.web>
<httphandlers>
<add type=""VerticalTextExample.ImageViewer"" verb=""*"" path=""get_image.aspx"" />
</add />
...
</httphandlers></system.web>

最后，要将我们的图像包含在一个网页中，我们需要UrlEncode 想要的文本，并将其传递给querystring到get_image.aspx，如下所示：

string stGET = System.Web.HttpUtility.UrlEncode(stText);

string stImageTag = "<img src=\"get_image.aspx?text=" + stGET + "\"/>";

兴趣点

在使用GDI +和矩阵转换时，您可以从线性代数学习（或记住）很多，在Visual Studio中使用该F1方法有助于学习，如使用的方法TranslateTransform ，RotateTransform 以及阅读文档和示例并进行实验。要记住一点：根据文档，这些方法通过将指定的转换或旋转添加到转换矩阵来工作，因此在我的示例中，旋转实际上是先完成的，然后进行翻译。

参考

当我尝试解决这个问题时，我得到了许多很好的引用（CodeProject中的一些）的帮助：非常感谢Horia Tudosie的“ Web页面中的垂直标签”文章，这篇文章非常完整，并帮助我找出了一些GDI +代码来渲染文字正确。我决定分享我的代码，因为我想要一个简单的例子，从一个稍微不同的角度来看，也保存了创建的文件，以便它只需要生成一次图像。在CodeProject（VB）中发现的另一个很好的垂直文本GDI +文章是VB.NET中的垂直标签控件。

CSS替代品

最近，我遇到了一些可能无法在每个浏览器中使用的CSS替代品，您可能必须与所有浏览器中的定位有所争议，但是我以为我会在本文中更新我的一些信息发现。
Scott Gale在CSS垂直文本上发表了一篇文章，介绍了如何使用Internet Explorer的写作模式和Mozilla和webkit的转换旋转属性在CSS中旋转文本。然而，因为Internet Explorer的写入模式不支持旋转270度（或-90度）的文本，所以您需要更多的东西（在我看来很漂亮）。Jonathan Snook还有一篇关于文本旋转的文章，使用Internet Explorer的过滤器属性，您可以实现这种垂直的270度文本旋转。这是一个完整的CSS类，您可以使用它来应用于您的页面来尝试：

.css-vertical-text {
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
white-space:nowrap;
display:block;
padding-left: 15px;
position:absolute;
right:-5px;
top:0px;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载