墨水部落格網頁範例

Ink Blog 範例應用程式示範如何建立受控 UserControl 類別，該類別具有筆跡功能，並在 Internet Explorer Microsoft 中裝載該控件。此範例也會示範一種技術，透過使用 HTTP 在網路上傳送筆跡數據，以及在伺服器上保存筆跡。

注意

您必須安裝 Microsoft Internet Information Services (IIS) 和 ASP.NET 才能執行此範例。請確定您的電腦符合 ASP.NET 應用程式在電腦上執行所需的需求。

注意

如果您在具有 Microsoft Windows XP 平板電腦版本開發工具包 1.7 的非平板電腦電腦上執行此範例，則筆跡標題的文字辨識功能將無法運作。這是因為已安裝平板電腦 SDK 1.7 的非平板電腦電腦缺少辨識器。應用程式的其餘部分會如所述執行。

概述

筆跡部落格範例會建立支援筆跡的部落格。 InkBlogWeb 是 ASP.NET 應用程式。墨水輸入是透過從 ASP.NET 頁面參考的使用者控件來完成的。

使用者控制項會偵測平板電腦平臺元件是否安裝在用戶端電腦上。如果是，使用者控件會在網頁上顯示兩個啟用手寫功能的區域：一個用於書寫部落格文章的標題，另一個用於書寫文章的正文。如果未安裝平板計算機平臺元件，則會為使用者提供項目標題和本文的標準文本框控制件。

當使用者完成建立專案時，她按下按鈕[新增部落格]，並將文章傳送至網頁伺服器以供儲存。在伺服器上，應用程式會儲存標題文字和張貼日期，以及圖形交換格式（GIF）檔案的參考。 GIF 檔案會儲存到伺服器，其中包含來自正文的筆跡數據，這些數據儲存在強化的 GIF 檔案中。如需有關增強版 GIF 格式的詳細資訊，請參閱將筆跡儲存在 HTML。

InkBlog 方案中有兩個專案：InkBlogControls 專案和 InkBlogWeb 專案。

InkBlogControls 專案

InkBlogControls 專案是 UserControl 專案，其中包含可在網頁上啟用筆跡的使用者控件程式代碼。此控件的程式代碼 InkArea 控制項位於InkArea.cs檔案中。

InkArea 類別繼承自 UserControl 類別。 InkArea 控制項的建構函式會呼叫協助程式方法，CreateInkCollectionSurface。

public InkArea()
{
    // Standard template code

    try
    {
        inputArea = CreateInkCollectionSurface();
    }
    catch (FileNotFoundException)
    { 
        inputArea = new TextBox();
        ((TextBox)inputArea).Multiline = true;
    }

    inputArea.Size = this.Size;

    // Add the control used for collecting blog input
    this.Controls.Add(inputArea);
}

CreateInkCollectionSurface 方法會嘗試建立 InkCollector 類別的實例，以判斷用戶端上是否有平板電腦手寫筆跡元件。如果呼叫 CreateInkCollectionSurface 方法成功，此方法會傳回 Panel 物件做為控件。

protected Control CreateInkCollectionSurface()
{
    try
    {
        Panel inkPanel = new Panel();
        inkPanel.BorderStyle = BorderStyle.Fixed3D;
        inkCollector = new InkCollector(inkPanel);
        ((InkCollector)inkCollector).Enabled = true;
        return inkPanel;
    }
    catch
    {
        throw;
    }
}

如果建構函式因為找不到手寫筆跡平臺檔案而失敗，則 InputArea 控件會具現化為 TextBox 控件，而不是 InkCollector 控件。建構函式接著會將控件大小調整為父使用者控件的大小，並將其新增至父系的Controls集合。

InkArea 控件類別會實作三個有趣的公用屬性：InkData、TextData 和 WebEnabled。

InkData 屬性是唯讀的，如果用戶端支援墨跡，則可以取得序列化墨跡資料。如果客戶端不支援筆跡，InkData 屬性會取得空字串。 InkData 屬性會呼叫 Helper 方法 SerializeInkData，以判斷用戶端是否支援筆跡。

protected String SerializeInkData()
{
    Debug.Assert(InkEnabled, null, "Client must be ink-enabled");

    // Obtain the ink associated with this control
    Ink ink = ((InkCollector)inkCollector).Ink;

    // Serialize the ink
    if (ink.Strokes.Count > 0) 
    {
        byte[] inkDataBytes = ink.Save(PersistenceFormat.Gif);
        return Convert.ToBase64String(inkDataBytes);
    }

    // Default to returning the empty string.
    return String.Empty;
}

在 SerializeInkData 方法中，當取得 Ink 物件時，必須將其轉換為 InkCollector，因為 inputArea 被宣告為 Control。如果 Ink 物件包含任何筆劃，筆跡數據會以 GIF 儲存到 inkDataBytes 位元組陣列中（由 PersistenceFormat 列舉值指定）。方法接著會將位元組陣列轉換成Base64編碼的字元串，並傳回此字串。

假設用戶端能夠執行辨識操作，TextData 屬性便會傳回經過將筆跡數據傳遞給手寫辨識器後所得的 RecognitionResult 物件。如果客戶端沒有筆跡感知，則會傳回文本框內容，如下列程式代碼所示。

public string TextData
{
    get
    {
        if (this.WebEnabled) 
        {
            return RecognizeInkData();
        }
        else
        {
            return ((TextBox)inputArea).Text;
        }
    }
}

TextData 屬性會呼叫協助程式方法，RecognizeInkData，如下列程式代碼所示，以執行辨識。當系統上有辨識引擎時，RecognizeInkData 方法會傳回字串，其中包含 RecognitionResult 物件的 TopString 屬性。否則，它會傳回空字串。

protected String RecognizeInkData()
{
    // Obtain the ink associated with this control
    Ink ink = ((InkCollector)inkCollector).Ink;

    if (ink.Strokes.Count > 0) 
    {

        // Attempt to create a recognition context and use it to
        // retrieve the top alternate.
        try 
        {
            RecognizerContext recognizerContext = new RecognizerContext();
            RecognitionStatus recognitionStatus;
            recognizerContext.Strokes = ink.Strokes;
            RecognitionResult recognitionResult = recognizerContext.Recognize(out recognitionStatus);
            if (recognitionStatus == RecognitionStatus.NoError) && ( null != recognitionResult) )
            {
                return recognitionResult.TopString;
            }
        }
        catch (Exception)
        {
            // An exception will occur if the client does not have
            // any handwriting recognizers installed on their system.
            // In this case, we default to returning an empty string. 
        }
    }

    return String.Empty;
}

InkEnabled 屬性是一個唯讀的布爾值，用於表示用戶端電腦是否支援筆跡功能。

InkArea 控件類別的另一個重要公用成員是 DisposeResources 方法。此方法會在內部呼叫 Dispose 方法，以確保清除使用者控件所利用的所有資源。任何使用 InkArea 控件的應用程式在使用控制項完成時，都必須呼叫 DisposeResources 方法。

InkBlogWeb 專案

InkBlogWeb 專案是一個 Web 安裝程式部署專案，會參考 InkArea 控件以提供部落格功能。如需 Web 安裝程式部署專案的詳細資訊，請參閱 Web 安裝程式專案的部署。

有兩個實作部落格範例的.aspx檔案:Default.aspx和AddBlog.aspx。 Default.aspx是 InkBlogWeb 應用程式的預設頁面。此頁面的程式碼後置檔案為 Default.aspx.cs。此頁面提供包含新部落格專案表單的頁面連結，並顯示任何現有的部落格專案。稍後會在檢查新的部落格條目表單頁面 AddBlog.aspx 後描述此過程。

AddBlog.aspx及其程式代碼後置檔案AddBlog.aspx.cs包含用來建立新部落格項目的邏輯和使用者介面程序代碼。 AddBlox.aspx 會參考 InkBlogControls 專案中建立的兩個使用 HTML OBJECT 元素的 InkArea 控件類別實例，如下列範例所示。其中一個實例具有 inkBlogTitle 的 id 屬性，另一個實例具有 inkBlogBody 的 id 屬性。

InkBlogControls.dll 元件必須存在於與參考.aspx頁面相同的目錄中。 Web 安裝程式部署專案可確保這是這種情況，如部署專案中存在「Primary output from InkBlogControls」專案所證明。

標題控件只有 48 像素高，可方便標題的單行筆跡輸入。控制元件的高度為 296 像素，以便容納多行或繪圖的較大部落格文章。

InkArea 控制項會透過標準 HTML BUTTON 元素的 onclick 事件處理程式，連接到用戶端腳本函式 AddBlog。

<button id="BUTTON1" type="button" onclick="AddBlog()">Add Blog</button>

頁面上也有一個 HTML 窗體，其中包含三個隱藏的 INPUT 元素：BlogTitleText、BlogBodyText 和 BlogBodyInkData。此表單用來將部落格項目數據張貼回伺服器。 AddBlog.aspx是針對表單定義的後置處理程式。

以 Microsoft JScript 撰寫的 AddBlog 函式<實體類型=“reg”/>-從 InkArea 控件擷取部落格數據，並將結果張貼至伺服器。

function AddBlog() 
{
    // Extract the blog's title data as ink and text
    form.BlogTitleText.value  = inkBlogTitle.TextData;
    
    // Extract the blog's body data as ink and text
    form.BlogBodyText.value = inkBlogBody.TextData;
    form.BlogBodyInkData.value = inkBlogBody.InkData;   

    form.submit();
}

當數據到達伺服器時，AddBlog.aspx.cs中的程式代碼會檢查Page_Load事件處理程式，以查看 HttpRequest 物件的 Form 屬性是否包含任何數據。如果是的話，它會根據目前的系統時間建立檔名，將窗體數據放入三個字元串變數中，並將數據寫入 HTML 檔案和包含筆跡數據的 GIF 檔案，如下列程式代碼所示。

if ( (String.Empty != inkBody) )
{           
    // Use helper method to create a GIF image file from ink data 
    CreateGif(imagePath, fileName, inkBody);
    
    // Create an HTML fragment to reference the image file
    content = "<img src=\"Blogs/Images/" + fileName + ".gif\"></img>";
}                
else 
{
    // If no ink data is available create an HTML fragment that contains
    // the blog's text directly.
    content = "<P>" + textBody + "</P>";
}

// Use helper method to create the blog web page on the server
CreateHtm(blogPath, fileName, blogTitle, content);

如需協助程式方法的詳細資訊，請參閱範例原始程式碼。

執行範例

平板電腦 SDK 1.7 預設會安裝 Ink 部落格 Web 範例。若要執行範例，請在 Internet Explorer 中流覽至 [https://localhost/TabletPCSDK_WebSamples/InkBlogWeb/Default.aspx. 如果您執行的是 Windows Server 2003，請將您的電腦名稱取代為 “localhost”。

注意

編譯的 Web 範例不會由 SDK 的預設安裝選項安裝。您必須完成自定義安裝，然後選取 [預先編譯的Web範例] 子選項加以安裝。

您也可以在 Visual Studio<實體類型=“reg”/> .NET Microsoft 中開啟和建置專案，然後將它部署到執行 IIS 的個別計算機，以執行範例。

範例疑難排除

執行或裝載範例時可能會造成困難的三個區域是許可權和辨識。

權限

此範例需要該帳戶在嘗試於虛擬根資料夾中建立新的部落格文章時擁有寫入許可權。根據預設，平板電腦 SDK 1.7 中提供的範例編譯版本具有正確的許可權設定，以符合此需求。

如果您使用提供的 Web 安裝程式部署專案來建置和部署範例，您必須為 InkBlogWeb 虛擬根目錄所指向的檔案系統資料夾提供 %MACHINENAME%\Users 群組寫入許可權（例如 C：\InetPub\WWWRoot\InkBlogWeb）。 [使用者] 群組包含 IIS 所使用的匿名帳戶，因此允許 ASP.NET 應用程式將新的部落格專案寫入文件系統。替代方法是移除虛擬根目錄的匿名存取，並強制驗證。

識別

必須安裝手寫辨識器，才能辨識部落格標題中的筆跡。如果您從非 Windows XP Tablet PC Edition 的作業系統，但安裝了 Tablet PC SDK 1.7 的電腦存取 InkBlog 應用程式，您可以在 InkArea 控制項中以筆跡書寫，但辨識引擎將不存在，並且您的部落格文章不會顯示任何標題。不過，物體內的墨水含量仍會顯現。

計算機設定

如果您已在計算機上安裝 ASP.NET 和 .NET Framework，然後卸載並重新安裝 IIS，腳本對應將會中斷，ASP.NET 將無法運作。如果發生這種情況，您可以使用 ASP.NET IIS 註冊工具來修復 ASP.NET 腳本對映（Aspnet_regiis.exe -i）。

InkCollector
Web 上的筆跡
筆跡數據格式
System.Windows.Forms.UserControl 類別

意見反應

此頁面對您有幫助嗎？

Last updated on 2025-03-22