第五章:绘画和打字

Canvas对象

AspJpeg 1.2以后的版本提供了属性Canvas,它返回了一个Canvas对象的实例,该对象与图像有关。Canvas对象提供了多种方法,比如说PrintText方法和DrawCircle方法,使你能够在一个图像上面编程书写文本、绘制几何图形。

不同的绘图参数,比如说文本尺寸、字体、颜色、画笔、笔刷等等,通过Canvas的第二层对象FontPenBrush来指定。

以下代码片段演示了该对象层次的用法:

<% 
Set Jpeg = Server.CreateObject("Persits.Jpeg")
Jpeg.Canvas.Font.Color = &HFF0000
Jpeg.Canvas.Font.Family = "Courier New"

Jpeg.Canvas.Pen.Color = &H000000
Jpeg.Canvas.Pen.Width = 2

Jpeg.Canvas.Brush.Solid = False

Jpeg.Canvas.PrintText 10, 10, "Some Text"
Jpeg.Canvas.DrawBar 1, 1, 100, 100

...
%>

绘制图形和文本

以下代码示例把文本“Copyright (c) XYZ, Inc.”打印到一个图像上的左下角,用红色以及Courier New字体(默认字体大小是24)。它还围绕着图像绘制了2像素宽的黑边框。字体的品质设置为4(抗锯齿),背景默认为“不透明”,以使抗锯齿正常起作用。

VB Script:

<%
Set Jpeg = Server.CreateObject("Persits.Jpeg")
' Open source image
Jpeg.Open Server.MapPath("../images/dodge_viper.jpg")

' Resizing is optional. None in this code sample.

' Draw text
Jpeg.Canvas.Font.Color = &HFF0000 ' Red
Jpeg.Canvas.Font.Family = "Courier New"
Jpeg.Canvas.Font.Bold = True
Jpeg.Canvas.Font.Quality = 4 ' Antialiased
Jpeg.Canvas.Font.BkMode = "Opaque" ' to make antialiasing work
Jpeg.Canvas.Print 10, 572, "Copyright (c) XYZ, Inc."

' Draw frame: black, 2-pixel width
Jpeg.Canvas.Pen.Color = &H000000 ' Black
Jpeg.Canvas.Pen.Width = 2
Jpeg.Canvas.Brush.Solid = False ' or a solid bar would be drawn
Jpeg.Canvas.DrawBar 1, 1, Jpeg.Width, Jpeg.Height

Jpeg.Save Server.MapPath("dodge_viper_framed.jpg")
%>

C#:

<script runat="server" LANGUAGE="C#">
void Page_Load(Object Source, EventArgs E)
{
ASPJPEGLib.IASPJpeg objJpeg;
objJpeg = new ASPJPEGLib.ASPJpeg();

// Compute path to source image
String strPath = Server.MapPath("../images/dodge_viper.jpg");

// Open source image
objJpeg.Open( strPath );

// Resizing is optional. None in this code sample.

// Draw text
objJpeg.Canvas.Font.Color = 0xFF0000; // red
objJpeg.Canvas.Font.Family = "Courier New";
objJpeg.Canvas.Font.Bold = 1; // True
objJpeg.Canvas.Font.Quality = 4; // Antialiased
objJpeg.Canvas.Font.BkMode = "Opaque"; // For antialiasing work
objJpeg.Canvas.Print( 10, 572, "Copyright (c) XYZ, Inc.", Missing.Value );

// Draw frame: black, 2-pixel width
objJpeg.Canvas.Pen.Color = 0x000000; // Black
objJpeg.Canvas.Pen.Width = 2;
objJpeg.Canvas.Brush.Solid = 0; // false, to avoid solid bar
objJpeg.Canvas.DrawBar( 1, 1, objJpeg.Width, objJpeg.Height );

objJpeg.Save( Server.MapPath("dodge_viper_framed.jpg") );

FramedImage.Src = "dodge_viper_framed.jpg";
}
</script>

点击以下链接以运行该代码示例:

http://localhost/aspjpeg/manual_05/05_canvas.asp

http://localhost/aspjpeg/manual_05/05_canvas.aspx

利用PrintTextEx的高级文本绘制

从v1.8版本开始,AspJpeg提供了一个比PrintText方法更万能通用的绘制文本的方法。该新方法,PrintTextEx使用FreeType开源库,以制出高品质的抗锯龄文本,呈现在任何背景上,以任何颜色和大小,而且可以用任何角度。PrintTextEx方法提供了以下的新功能:

  • 用PrintTextEx渲染出来的文本永远是抗锯齿的,无论背景如何。Font.Quality属性和Font.BkMode属性会被忽略掉。(旧的PrintText为了实现抗锯齿,要求背景是实色的。)
  • 可以利用物理路径指定所使用的字体。因此,字体不一定必须正确地注册在机器上,只要字体文件的路径是已知的。同时支持TrueType/OpenType和Type 1字体。
  • 自动的断词。CR/LF字符可以用在文本字符串中,以实现硬分行。
  • 文本可以向左对齐、向右对齐、居中以及两头对齐平均分布。
  • 可调整的Opacity属性,针对图像水印。
  • 文本可以绕着一个原点旋转
  • 对于多行文本,可以调整行间距
  • 该方法返回绘制的字符串的宽度以及文本段落的高度(后者通过一个独立的属性Canvas.ParagraphHeight获得。)

PrintTextEx需要4个参数:要绘制的Unicode文本字符串、x坐标和y坐标,以及指向一个TrueType/OpenType或Type 1的物理路径,文字用这种字体绘制。坐标指定了要绘制的第一行文本的第一个字符的左下角的位置,在图像坐标系统中的位置。文本大小(以像素计)以及颜色可以分别通过属性Font.Size和属性Font.color指定。举个例子:

Jpeg.Canvas.Font.Size = 20
Jpeg.Canvas.Font.Color = &HFFFF0000 'Red
Jpeg.Canvas.PrintTextEx "ABC", 10, 50, "c:\Windows\Fonts\Arial.ttf

如果Windows目录的位置是预先未知的,则必须使用属性Jpeg.WindowsDirectory(在版本1.8中添加),因此最后行可以用以下代码重写:

...Jpeg.Canvas.PrintTextEx "ABC", 10, 50, Jpeg.WindowsDirectory &amp; "\Fonts\Arial.ttf"

如上所述,PrintTextEx支持自动断开词语。只要把属性Font.Width设置成一个非零值(以像素计),就能启用这个功能。要绘制的文本还可以包含CR/LF字符和实现硬换行。

如果指定了Font.Width,则还可以利用Font.Align来指定文本对齐。受支持的值是0(左对齐,默认)、1(右对齐)、2(居中)、3(两端对齐平均分布)Y你还可以利用Font.Spacing来调整行与行的距离(以像素计)。一个正数值增加了默认的行间距,一个负数值则减少了默认行间距。

图像上两端对齐平均分布的行,可以用以下代码片段产生:

Text = "There is some confusion about the number of ..."
jpeg.Canvas.Font.Color = &amp;HFFFFFFFF ' white
jpeg.Canvas.Font.Align = 3 'justify
jpeg.Canvas.Font.Width = 300
jpeg.Canvas.Font.Size = 15
jpeg.Canvas.Font.Spacing = 2
jpeg.Canvas.PrintTextEx Text, 210, 160, "c:\Windows\Fonts\Arial.ttf"

抗锯齿的常规绘图方法

从v2.1版本以来,AspJpeg提供了一些带有抗锯齿(平滑边缘)功能的常规绘图方法。这些长规方法都是Canvas对象的一部分,分别是:

  • DrawLineEx
  • FillPolyEx
  • DrawPolyEx
  • FillEllipseEx

除了平滑边缘,这些常规方法还支持部分透明。

DrawLineEx方法的用法基本等同于DrawLine,但是它还支持Pen.Opacity属性,该属性可以指定这条线段的不透明度。

FillPolyEx方法填充了一个多边形,使用当前笔刷,用多个点定义了该多边形。为了指定点的路径,必须使用MoveTo方法和LineTo方法。要想清除当前路径,必须使用ClearPath方法。MoveTo方法清除了已有的路径,开始一条新路径。

以下代码片段填充了一个红色的半透明的五角多边形。

Jpeg.Canvas.Brush.Color = &HFFFF0000 ' red
Jpeg.Canvas.Brush.Opacity = 0.5
Jpeg.Canvas.MoveTo 100, 60
Jpeg.Canvas.LineTo 306, 600
Jpeg.Canvas.LineTo 512, 60
Jpeg.Canvas.LineTo 20, 400
Jpeg.Canvas.LineTo 592, 400
Jpeg.Canvas.FillPolyEx

DrawPolyEx方法用当前画笔对一个多边形进行描边(但是不填充)。该方法的用法与FillPolyEx的用法完全相同。

FillEllipseEx使用当前的笔刷填充了一个椭圆形或者圆形,或者视情况填充一个椭圆或圆形的扇形小块。它的参数是:中心的坐标、横轴半径纵轴半径,以及根据需要再加扇形的开始和结束角(用degree表示)。如果最后两个参数是0,会绘制一个完整的椭圆或圆形。

使用以下脚本,在图象上绘制黄色的“吃豆人”形状:

Jpeg.Canvas.Brush.color = &amp;HFFFFE000
Jpeg.Canvas.Brush.Opacity = 0.7
Jpeg.Canvas.FillEllipseEx 200, 100, 70, 70, 34, 340

如果你喜欢这篇文章,敬请给站长打赏↑

除特别注明外,本站所有文章均为本站站长原译,转载请注明出处。