Silverlight InkPresenter 實作路徑回放的探索

從Silverlight從1.0版本開始，就提供了InkPresenter控件。很多人在第一次了解到這個控件時非常興奮，紛紛打算做“手寫識别”“網絡共享白闆”等應用程式。可惜Silverlight的InkPresenter隻是WPF中InkPresenter的閹割版，想要擴充它不是說不可以，而是一件相當傷腦筋的麻煩事——至少，到目前為止，我都沒有見到過真正的Silverlight網絡共享白闆。

webabcd的在4個月前的一篇文章的評論中，也說到了打算做Silverlight 網絡白闆的問題。

而WXWinter(冬)在3個月前用Silverlight+WCF完成了一個“近似”的“網絡共享白闆”。

為什麼我說他是“近似”的呢？

這得先從InkPresenter的原理說起：使用者用滑鼠畫在InkPresenter上的筆迹，都被儲存為

StrokeCollection類型的inkPresenter.Strokes裡。顧名思義，StrokeCollection是Stroke      

的集合。Stroke可以通俗地了解成“一筆”。而這“一筆”是“一條線”，它是包由很多“點”構成的，Stroke把關鍵的點（有轉折的點）儲存在Stroke.StylusPoints裡，StylusPoint則是具體點每個點。

可惜的是，StylusPoint裡除了X和Y坐标外，幾乎沒有提供任何可供程式設計的接口和方法，連Visible這種屬性都沒有提供。Stroke稍好一些，但也提供得不多。

WXWinter(冬)的“網絡共享白闆”是以Stroke為機關的。當使用者畫完“一整筆”後，Silverlight程式将描述這”一整筆”的Stroke通過WCF發送到伺服器，同時通過Timer定時取得伺服器上最新版本的所有Stroke。

用過基于socket的“網絡白闆”的人都知道，WXWinter(冬)的方法隻是一個近似的方法。第一，它沒有真正的“實時”，這個問題不大,就算是不直接使用socket,Shareach也示範了使用WCF的解決方式；第二，它的資料是以“線”為機關的，在實際使用時，對方看不到你畫線的過程，隻是會突然發現自己的螢幕上出現一條别人畫的線，這是一件比較囧的事。

說了這麼多，終于進入正題了：我最近一直在思考以上提到的第二個問題，如何直播或回放使用者畫線的過程，而不是讓那些筆迹一整條一整條地跳出來呢？我認為，首先要把“點”從“線”中分離出來，對“點”程式設計而不是操作“線”；其次記錄使用者畫每個點的準确時間；第三，使用動畫。本文展示一個回放使用者在InkPresenter上塗鴉過程的Demo。

效果圖：

現場Demo  (需要安裝Silverlight 3.0控件,在這裡安裝：http://download.microsoft.com/download/0/D/7/0D76C405-E0E5-43CC-89D3-18243A4FCA86/Silverlight.3.0_Developer.exe )

【使用說明】

1.等待資料加載完,

2.點選“開始錄制”,

3.音樂響起，你可以随便塗寫.

4.畫完後點選“停止錄制”.

5.點選”回放預覽”檢視你的傑作。

（如果你看不到下面的Silverlight對象，可以到這裡檢視：http://azuredrive.blob.core.windows.net/netdrive1/file_98a1cf05-94e2-4918-a6ef-29e791c8e327.html）

實作步驟草圖：

1.InkPresenter的XAML代碼及基本操作

  <InkPresenter Name='inkPresenter' Canvas.Left='10' Canvas.Top='10' 

                MouseLeftButtonDown='onInkPresenterDown' MouseMove='onInkPresenterMove' MouseLeftButtonUp='onInkPresenterUp'>

        <InkPresenter.Resources>

            <Storyboard Duration="0:0:0" Completed="onStrokePlaybackTimerTick" x:Name="strokePlaybackTimer" />

        </InkPresenter.Resources>

        <MediaElement Name='mediaElement' Source="http://azuredrive.blob.core.windows.net/netdrive1/file_c6184705-b9f7-49e9-a2e9-1e76a01a4565.wmv" Width='720' Height='480' 

                  AutoPlay='False'   MediaEnded="onMediaEnded"/>

    </InkPresenter>

InkPresenter的基本操作請參考webabcd的這篇文章。

2.用視訊(或音頻)的時間軸來作為塗鴉事件的時間軸，記錄每一筆的開始時間

仔細看看上文的InkPresenter的XAML代碼。它的Resources裡是動畫資訊，它的内容僅僅是一個WMV媒體檔案。我們之前提到了要儲存每一個筆畫的時間，就可以直接使用這個媒體檔案的時間軸。

具體操作是這樣的：

   if (isRecording)

{

                //捕獲滑鼠

                inkPresenter.CaptureMouse();

                newStroke = new Stroke();

                //設定該筆畫的屬性。本Demo中全部使用預設屬性。

                newStroke.DrawingAttributes = defaultDrawingAttributes;

                //記錄該筆的第一個點的資訊

                newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));

                inkPresenter.Strokes.Add(newStroke);

                //記錄該筆第一個點畫下的時間

                strokeStartTimes.Add(mediaElement.Position.Seconds);

            }

  //用于儲存每筆每個點的資訊，分别用';'和','隔開

        string inkStringForPlayback = null;

        //用于儲存每筆的開始時間

        List<int> strokeStartTimes = new List<int>();

private string ConvertInkToString(StrokeCollection strokes)

            string serializedStylusPoints = "";

            if (strokes != null)

                int strokeCount = strokes.Count;

                for (int i = 0; i < strokeCount; i++)

                    Stroke stroke = strokes[i];

                    int packetCount = stroke.StylusPoints.Count;

                    for (int j = 0; j < packetCount; j++)

                        StylusPoint stylusPoint = stroke.StylusPoints[j];

                        serializedStylusPoints += stylusPoint.X.ToString();

                        serializedStylusPoints += ",";

                        serializedStylusPoints += stylusPoint.Y.ToString();

                        if (j != packetCount - 1)

                            serializedStylusPoints += ",";

                        }

                        else

                            serializedStylusPoints += ";";

                    }

                }

            return serializedStylusPoints;

        }

        private StrokeCollection ConvertStringToInk(string serializedStylusPoints)

            StrokeCollection strokes = new StrokeCollection();

            string[] strokeStrings = serializedStylusPoints.Split(';');

            for (var i = 0; i < strokeStrings.Length - 1; i++)

                Stroke stroke = new Stroke();

                stroke.DrawingAttributes = defaultDrawingAttributes;

                string[] stylusPoints = strokeStrings[i].Split(',');

                for (var j = 0; j < stylusPoints.Length / 2; j++)

                    StylusPoint stylusPoint = new StylusPoint();

                    stylusPoint.X = double.Parse(stylusPoints[2 * j]);

                    stylusPoint.Y = double.Parse(stylusPoints[2 * j + 1]);

                    stroke.StylusPoints.Add(stylusPoint);

                strokes.Add(stroke);

            return strokes;

private void onStrokePlaybackTimerTick(object sender,  EventArgs e)

            if (strokesForPlayback.Count == 0) return;

            Stroke currentStroke = strokesForPlayback[playbackStrokeIndex];

            if (playbackPointIndex == 0)

                if (mediaElement.Position.Seconds < strokeStartTimes[playbackStrokeIndex])

                    strokePlaybackTimer.Begin();

                    return;

                strokeToPlayback = new Stroke();

                inkPresenter.Strokes.Add(strokeToPlayback);

                strokeToPlayback.DrawingAttributes = currentStroke.DrawingAttributes;

            strokeToPlayback.StylusPoints.Add(currentStroke.StylusPoints[playbackPointIndex]);

            playbackPointIndex++;

            if (playbackPointIndex < currentStroke.StylusPoints.Count)

                strokeToPlayback.StylusPoints.Add(currentStroke.StylusPoints[playbackPointIndex]);

                playbackPointIndex++;

            if (playbackPointIndex == currentStroke.StylusPoints.Count)

                playbackPointIndex = 0;

                playbackStrokeIndex++;

                if (playbackStrokeIndex == strokesForPlayback.Count)

            strokePlaybackTimer.Begin();