ASP.NET2.0中實現映像轉換過濾效果

asp.net|轉換

　　本文描述一種建立定製Web控制項的容易方法，並把該控制項使用於一個ASP.NET 2.0 web頁面中顯示微軟DirectX映像轉換過濾效果。

　　一、簡介

　　本文描述一種建立定製web控制項並應用於一個ASP.NET 2.0 web頁面中顯示微軟DirectX映像轉換過濾效果的容易的方法。文中包括一個擁有11個不同控制項的類庫，每一個控制項分別展示微軟DirectX映像轉換過濾效果的某些方面。在這11個控制項中，5個是頁面過渡效果控制項，其它的６個是用於增強文本外觀的過濾效果控制項。

　　在這6個用於增強文本外觀的過濾效果控制項中，每一個被實現為一個容器控制項。這將允許使用者或者直接把文本鍵入到該容器，或把一個標籤放到該控制項中並且把相應效果應用到這個標籤上。選擇使用一個標籤控制項的目的是為了提供一種容易的基於標準HTML的方法來實現調整大小、置中放置以及格式化文本。

　　剩下的5個控制項用於在一個web頁面中添加頁面過渡效果而不用編寫任何額外的HTML或VB代碼。為了使用這些控制項，使用者僅需要把它們拖動到表單上。然而，這些控制項沒有相應的可視化組件，儘管頁面能夠被顯示到瀏覽器中；當使用者離開頁面時，相應的過渡效果用於開啟下一個頁面。

　　相應於本文的樣本工程中包含了一個簡單的網站，含有單個default.aspx頁面；該頁面逐個展示上面的6個文本增強控制項和一個頁面過渡效果控制項。

　　注意 本文中應用於示範工程和控制項陳列庫的方法僅適用於Internet explorer，並沒有針對其它瀏覽器類型提供支援。如果你在一家企業內網中工作並且你能夠確保所有的使用者都能夠存取Internet explorer，那麼這個控制項集和這裡的方法可能對你很有用。如果你公開地發布這些控制項，那麼，使用一個非Internet explorer瀏覽器衝浪的使用者仍然能夠讀取相應的文本但是該效果將不存在。如果你確實想進行公開發布，那麼你可以首先檢查使用者的瀏覽器並且如果它不是IE的話，你應該建議他們最好使用IE來觀看該網站。

圖1.在該示範工程中的過濾效果

　　 二、開始

　　首先，解壓源碼中包括的類庫和示範工程。在檢查相應的內容時，你將看到在一個方案中有兩個工程。工程DxFilterControls是一個類庫，它包含前面提到的11個控制項。工程DxFilterTestSite是示範網站，這些控制項能夠顯示於其上，並且可以在單個default.aspx web頁面中觀看。

　　在DX過濾控制項工程中，有11個獨立的控制項：

1. CCBlurredLabel
2. CCDropShadow
3. CCEmboss
4. CCEngrave
5. CCGlowingText
6. CCGradient
7. CCPageTransition_Iris
8. CCPageTransition_Pixelate
9. CCPageTransition_RadialWipe
10. CCPageTransition_GradientWipe
11. CCPageTransition_Wheel
　　我已經提到，前6個控制項用於增強文本外觀（通過一個微軟DirectX過濾應用程式實現）。這些控制項中的每一個都被構造為一個容器，並且任何直接放入容器或標籤中的文本都會擁有相應的過濾效果，只要它能夠被產生到一個微軟Internet explorer瀏覽器。

　　前5個控制項專門用於為容器內容提供一些文本改進過濾。第6個控制項（CCGradient）僅是一個面板，它具有一個漸層背景並且它並不實際改變或直接影響在該容器中的文本。

　　第7到第11個控制項是頁面過渡效果控制項。你可以把單個頁面過渡控制項拖動到一個表單並且設定它的屬性(其中，許多屬性不用設定)。結果，當使用者退出當前頁面時，要開啟的下一個頁面將被使用指定的效果開啟。雖然在這個執行個體中，我使用這些控制項來建立一種過渡效果（當過渡到一個新的頁面時），但是，這些過渡效果可以被配置以便當載入容器頁面時調用該效果，甚至可以把這些過渡效果使用於單個頁面內來實現使用一個新映像代替另一個映像的效果。

圖2:像素化頁面過渡效果

　　另外，這並不是一組十分複雜的控制項，但是我認為它們已經足已能夠展示通過DirectX能夠取得什麼樣的過濾效果。你可以參考網站上的有關微軟文檔來探討其它過濾效果。

　　三、文本增強過濾效果控制項

　　包含在樣本控制項陳列庫中的上面6個文本改進效果控制項中的每一個基本上都是以相同的格式建立。在此，我們不想逐個描述這些控制項，而只描述一下CCEmboss控制項。該CCEmboss控制項繼承自System.Web.UI.WebControl；我已經把對System.Design的引用添加到基本web控制項上，並且添加了一個import語句以便在工程中包括System.Web.UI.Design庫。這種添加對於建立一些設計時刻支援元素（以便使該控制項在設計時刻更便於使用）是必要的。該代碼被分為三個獨立的地區：Declarations，Properties和Rendering。下面，讓我們看一下該類定義的開始：

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.WebControls
<Designer(GetType(EmbossedLabelDesigner))>_
<ParseChildren(False)>_
Public Class CCEmboss Inherits WebControl
　　注意，在import語句後，屬性資料顯示該類將使用一個包含在EmbossedLabelDesigner類中的定製設計器。後面，我們將描述這個設計器，它負責為該控制項提供某種設計時刻支援。還要注意，已經添加了ParseChildren屬性並且被設定為false。這是為了防止頁面分析器分析該控制項的內容，因為該控制項是一個容器控制項並且它的內容不屬於那個控制項一部分。

　　Declarations地區跟隨其後而且很簡單；它包含幾個private型成員變數用於儲存使用者對這個控制項的選擇資訊。有關這個過濾效果，你可以參考一下微軟文檔來確定是否還有任何其它需要探討的屬性。

#Region "Declarations"
Private mEnabled As Boolean
Private mBias As Single
#End Region
　　在此，mEnabled屬性是一個布爾值，它將被傳遞到過濾效果中，並且它恰好能實現你希望的效果；它能夠啟動或停用該效果。這裡的mBias用於決定事件的範圍。我相信微軟文檔在這個問題上顯示，0.7是典型的並且是針對這種效果的預設值。

　　接下來是Properties地區，它的內容限於對private型成員變數的內容提供公用存取。其實現代碼大致如下：

#Region "Properties"
<Category("Embossed Label")>_
<Browsable(True)>_
<Description("Enable or display the embossed effect.")>_
Public Property EmbossEnabled() As Boolean
Get
　EnsureChildControls()
　Return mEnabled
End Get
Set(ByVal value As Boolean)
　EnsureChildControls()
　mEnabled = value
End Set
End Property
<Category("Embossed Label")>_
<Browsable(True)>_
<Description("Set the bias for the embossed effect (typically 0.7).")>_
Public Property Bias() As Single
Get
　EnsureChildControls()
　Return mBias
End Get
Set(ByVal value As Single)
　EnsureChildControls()
　mBias = value
End Set
End Property
#End Region
　　最後一部分是Rendering地區。它包含在運行時刻啟用該效果的必要代碼；其代碼大致如下所示：

#Region "Rendering"
Protected Overrides Sub AddAttributesToRender(ByVal writer As
HtmlTextWriter)
　writer.AddStyleAttribute(HtmlTextWriterStyle.Filter， _
"progid:DXImageTransform.Microsoft.Emboss(bias=" & Bias.ToString() & _
"，enabled = " & EmbossEnabled.ToString() & ");width:" &
Width.Value.ToString() & "px")
　MyBase.AddAttributesToRender(writer)
End Sub
#End Region
End Class
　　注意，在此我們重載了AddAttributesToRender子常式，並且使用HtmlTextWriter來添加一個style屬性。該屬性相應於DirectX過濾器。你還能夠看到，這個較早暴露的屬性被傳遞給在該過濾器定義內的這個子常式。這是在運行時刻把過濾效果添加到容器的位置。

　　這一節後面是EmbossedLabelDesigner類的定義。這個類可以被寫入一個單獨的類檔案中；然而我更喜歡這種方法，因為它使設計代碼及相應目標一切都那麼清晰。這部分代碼為該控制項提供設計時刻支援：

Public Class EmbossedLabelDesigner
Inherits ContainerControlDesigner
Protected Overrides Sub AddDesignTimeCssAttributes(ByVal styleAttributes
As System.Collections.IDictionary)
　Dim embossLbl As CCEmboss = CType(Me.Component， CCEmboss)
　styleAttributes.Add("filter"，"progid:DXImageTransform.Microsoft.Emboss(bias=" &
embossLbl.Bias.ToString() & "，enabled = " &
embossLbl.Enabled.ToString() & ");width:" &
embossLbl.Width.Value.ToString() & "px")
　MyBase.AddDesignTimeCssAttributes(styleAttributes)
End Sub
End Class
　　如你所見，你基本上在該控制項上添加了與在運行時刻一樣的過濾效果，以便你能夠看到該過濾的相同的視覺效果；然而，你現在使用的是表單設計器。這一點很好地歸納了這其中每個控制項的工作方式，儘管你會注意到在表單的其它屬性和方法中也存在一些微小區別。

　　四、頁面過渡效果控制項

　　這一節，象前一節一樣，我們將僅討論5個頁面過渡效果控制項之一（因為它們之間具有極大的相似性）。我將討論漸層擦除過渡效果控制項；請參考本文提供的範例程式碼來進一步瞭解這個控制項與其它控制項之間的區別。

　　該漸層擦除頁面過渡控制項(CCPageTransitition_GradientWipe)以一種與文本改進控制項相似的方式開始。實現代碼被劃分成三個主要的地區：Declarations，Properties和Rendering。

　　該類聲明部分看起來如下所示：

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
''' <summary>
''' 過渡效果(僅適用於Internet Explorer)
'''把這個控制項拖動到一個頁面上；當這個頁面被退出時，下一個頁面將會通過過渡
'''效果（Gradient Wipe）進行顯示
''' </summary>
''' <remarks></remarks>
Public Class CCPageTransitition_GradientWipe
Inherits WebControl
Private Sub CCPageTransitition_GradientWipe_Init(ByVal sender As Object，
ByVal e As System.EventArgs) Handles Me.Init
　Me.Width = 20
　Me.Height = 20
End Sub
　　你會注意到，我們沒有把System.Web.UI.Design匯入到這個類中，因為對於這個控制項來說，不存在可能的設計時刻可視化內容。你可能還注意到，該控制項的初始化用來把該控制項的高度和寬度設定為各自20個像素。這僅在設計時刻在頁面的表單(一個空框)上建立一些指示時才需要。這個框在運行時刻不會出現在web表單上。

　　在類初始化之後，我添加了下面的Declarations地區。這個地區用於儲存該類中的每一個private型成員變數。這個地區的聲明看起來如下所示：

#Region "Declarations"
Private mDuration As Single = 1
#End Region
　　你可以看出，該類中只使用了一個私人成員變數。在Declarations地區後面，跟著的是Properties地區；它看上去如下所示：

#Region "Properties"
<Category("Gradient Wipe Transition")> _
<Browsable(True)> _
<Description("Set the effect duration (typically 1 or 2)")> _
Public Property TransitionDuration() As Single
　Get
　　Return mDuration
　End Get
　Set(ByVal value As Single)
　　mDuration = value
　End Set
End Property
#End Region
　　這個屬性用於設定發生頁面過渡效果的時間長度。下面，我們來看一下產生（redering）地區塊的代碼：

#Region "Rendering"
Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter)
　Try
　　Dim sb As New StringBuilder
　　sb.Append("<meta http-equiv='Page-Exit' ")
　　sb.Append("content='progid:DXImageTransform. _
Microsoft.gradientWipe(duration=" & TransitionDuration.ToString()
& ")' />")
　　writer.RenderBeginTag(HtmlTextWriterTag.Div)
　　writer.Write(sb.ToString())
　　writer.RenderEndTag()
　Catch ex As Exception
　　writer.RenderBeginTag(HtmlTextWriterTag.Div)
　　writer.Write("Gradient Wipe Transition Control")
　　writer.RenderEndTag()
　End Try
End Sub
#End Region
End Class
　　這部分代碼相當直接，RenderContents子常式被重載，新的內容被包括到一個try-catch塊內。儘管我沒有處理任何錯誤（在出現錯誤的情況下），我只把字串"Gradient Wipe Transition Control"寫到一個div中，作為一個可放置於此的控制項的預留位置。

　　在該try塊內的代碼僅使用一個字串構建器來格式化我們想在運行時刻直接放到該web頁面的源中的文本。該字串構造器中包含的代碼用於建立請求，從而把頁面exit事件與頁面過濾效果加以關聯。你可能還注意到，duration屬性被傳遞到字串構造器用於設定過濾器使用的duration參數的值。

　　在配置該字串構造器之後，該字串構造器的內容被寫到頁面上。無論何時該樣本類庫中的這個或任何其它頁面過渡控制項被添加到一個頁面，頁面退出顯示出同樣的屬性；結果是，無論何時使用者離開該頁面，下一個頁面都將使用該過渡效果顯示。

　　五、 結論

　　就此結束吧！其實，我還建議你研究一下其它的控制項並逐個在測試網站中進行實驗。還存在其它一些過濾效果和頁面過渡可用，我想你一定希望進一步擴充這個庫；同樣，還有其它一些有關過濾的屬性需要進一步討論。最後，祝你編程愉快！