影音沖擊感官(理論).ppt

《影音沖擊感官(理論).ppt》由會員分享，可在線閱讀，更多相關《影音沖擊感官(理論).ppt（33頁珍藏版）》請在裝配圖網上搜索。

第8章影音沖擊感官,本章內容,Silverlight多媒體DeepZoom應用墨跡標注控件應用,本章目標,理解Silverlight多媒體應用的優(yōu)勢創(chuàng)建和控制音頻和視頻能夠使用DeepZoomComposer開發(fā)DeepZoom應用能夠使用InkPresenter控件實現(xiàn)墨跡標注效果,1.Silverlight多媒體,1.1MediaElement,MediaElement控件是一個矩形區(qū)域，可以在其上顯示視頻或播放音頻，通過為該控件的Source屬性指定一個多媒體文件的URI，即可進行播放,1.2播放控制,控制播放使用MediaElement控件的Play()、Pause()和Stop()方法控制媒體播放,VolumeSeekTo,privatevoidbtnPlay_Click(objectsender,RoutedEventArgse){myMediaElement.Play();}privatevoidbtnPause_Click(objectsender,RoutedEventArgse){myMediaElement.Pause();}privatevoidbtnStop_Click(objectsender,RoutedEventArgse){myMediaElement.Stop();},播放控制,控制聲音通過MediaElement控件的Volume、IsMuted和Balance屬性可以控制播放聲音,,voidmute_Click(objectsender,RoutedEventArgse){if(mediaElement.IsMuted==true){mute.Content="靜音";mediaElement.IsMuted=false;}else{mute.Content="有聲";mediaElement.IsMuted=true;}}privatevoidvolumeSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgse){mediaElement.Volume=volumeSlider.Value;lblVolume.Text=string.Format("音量大?。簕0:##%}",volumeSlider.Value);}privatevoidbalanceSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgse){mediaElement.Balance=balanceSlider.Value;lblBalance.Text=string.Format("音量平衡：{0:##%}",balanceSlider.Value);},播放控制,控制狀態(tài)MediaElement控件通過事件CurrentStateChanged來檢測狀態(tài)變化，狀態(tài)由MediaElementState枚舉定義,voidVideoPlayer_Loaded(objectsender,RoutedEventArgse){timer.Interval=TimeSpan.FromMilliseconds(500);timer.Tick+=newEventHandler(timer_Tick);timer.Start();}voidtimer_Tick(objectsender,EventArgse){if(mediaElement.CurrentState==MediaElementState.Playing){lblPlayTime.Text=string.Format("{0}{1:00}:{2:00}:{3:00}","播放進度：",mediaElement.Position.Hours,mediaElement.Position.Minutes,mediaElement.Position.Seconds);}lblDroppedFramesPerSecond.Text="每秒正在丟棄的幀數(shù)："+mediaElement.DroppedFramesPerSecond.ToString();}voidmediaElement_BufferingProgressChanged(objectsender,RoutedEventArgse){lblBufferingProgress.Text=string.Format("緩沖進度：{0:##%}",mediaElement.BufferingProgress);}voidmediaElement_DownloadProgressChanged(objectsender,RoutedEventArgse){lblDownloadProgress.Text=string.Format("下載進度：{0:##%}",mediaElement.DownloadProgress);}privatevoidmediaElement_CurrentStateChanged(objectsender,RoutedEventArgse){lblState.Text="播放狀態(tài)："+mediaElement.CurrentState.ToString();},播放控制,控制外觀MediaElement也是一個UI控件，可以通過Clip屬性設置幾何圖形對其外觀進行裁剪，使MediaElement呈現(xiàn)的外觀發(fā)生變化,,播放控制,播放列表Silverlight多媒體功能支持服務器端播放列表和客戶端播放列表,,服務器端播放列表需要創(chuàng)建XML格式的文件.wsx，將需要播放的媒體序列在該文件中指定，然后通過流媒體服務發(fā)布,強制該容器中的媒體元素以它們出現(xiàn)在元素中的順序進行播放,定義播放列表中的音頻或視頻文件,播放控制,客戶端播放列表客戶端播放列表是基于XML格式的，文件后綴名為.asx,PlaylistsampleAnintrolductionofSilverlightMicrosoftCorporation(c)2008MicrosoftCorporationBeautifulButterflyMicrosoftCorporation(c)2008MicrosoftCorporation,,引用播放列表,小結1,控制媒體播放，需要使用MediaElement控件的哪些方法？MediaElementState枚舉包含哪幾種媒體播放狀態(tài)？,2.深度縮放,2.1DeepZoom概述,DeepZoom技術能夠實現(xiàn)使用多分辨率圖像來實現(xiàn)大圖像的高幀速率和快速打開體驗。在加載時，只有少量數(shù)據(jù)需要在屏幕上快速顯示內容。最初加載體驗是顯示圖像的低分辨率版本，在變得可用時逐漸提高分辨率,DeepZoom概述,DeepZoom技術應用領域：探究非常大或高分辨率圖像三維攝影廣告,圖像棱錐圖：一個DeepZoom圖像由多個不同分辨率的JPEG或PNG圖像的圖塊組成，這些圖塊構成一個圖像棱錐圖每個圖塊存儲在單獨的文件中，并且每個棱錐圖級別存儲在單獨的文件夾中DeepZoom可以只提取屏幕上當前圖像大小所需的那些圖塊，而不必下載整個圖像,DeepZoom應用,開發(fā)DeepZoom應用一般需要3個步驟：創(chuàng)建圖像棱錐圖將MultiScaleImage或MultiScaleSubImage添加到應用程序，并將這些對象的Source屬性指向DeepZoom圖像向DeepZoom對象注冊事件以添加交互性，實現(xiàn)縮放或平滑移動,MultiScaleImagemyDeepZoomObject=newMultiScaleImage();myDeepZoomObject.Source=newUri("source/items.xml");privatevoidDeepZoomObject_MouseEnter(objectsender,MouseEventArgse){this.deepZoomObject.ZoomAboutLogicalPoint(3,.5,.5);},2.2DeepZoom應用,使用DeepZoomComposer工具開發(fā)DeepZoom應用,使用DeepZoomComposer工具創(chuàng)建DeepZoom項目,DeepZoom應用,向項目中添加一個或多個高分辨率圖像,DeepZoom應用,導出棱錐圖,DeepZoom應用,在Silverlight項目中引入棱錐圖，并添加事件處理,privatevoidDeepZoomObj_MouseEnter(objectsender,MouseEventArgse){this.deepZoomObj.ZoomAboutLogicalPoint(3,.5,.5);}privatevoidDeepZoomObj_MouseLeave(objectsender,MouseEventArgse){doublezoom=1;zoom=zoom/3;this.deepZoomObj.ZoomAboutLogicalPoint(zoom,.5,.5);},鼠標進入圖片區(qū)域，圖像放大,鼠標移出圖片區(qū)域，圖像縮小,小結2,開發(fā)DeepZoom應用需要哪幾個步驟?如何獲取MultiScaleSubImage中的子圖像列表？,3.應用墨跡標注,3.1InkPresenter控件,StrokeCollection,Stroke對象,包含若干StylusPoint對象,3.1InkPresenter控件,...,InkPresenter控件,privatevoidink_MouseLeftButtonDown(objectsender,MouseEventArgse){ink.CaptureMouse();StylusPointCollectionMyStylusPointCollection=newStylusPointCollection();MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(ink));NewStroke=newStroke(MyStylusPointCollection);ink.Strokes.Add(NewStroke);}privatevoidink_MouseMove(objectsender,MouseEventArgse){if(NewStroke!=null)NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(ink));}privatevoidink_LostMouseCapture(objectsender,MouseEventArgse){NewStroke=null;}privatevoidSetBoundary(){RectangleGeometryMyRectangleGeometry=newRectangleGeometry();MyRectangleGeometry.Rect=newRect(0,0,ink.ActualWidth,ink.ActualHeight);ink.Clip=MyRectangleGeometry;}privatevoidink_MouseLeftButtonUp(objectsender,MouseButtonEventArgse){ink.ReleaseMouseCapture();},通過事件交互的方式來實現(xiàn)手寫功能,3.2標記美化和存儲,設計筆畫通過Stroke對象的DrawingAtrributes屬性集合中屬性設置筆觸的顏色、輪廓顏色、寬和高,newStroke=newSystem.Windows.Ink.Stroke();newStroke.DrawingAttributes.Width=3d;newStroke.DrawingAttributes.Height=3d;newStroke.DrawingAttributes.Color=currentColor;newStroke.DrawingAttributes.OutlineColor=Colors.Yellow;newStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));inkPresenter.Strokes.Add(newStroke);,標記美化和存儲,創(chuàng)建背景InkPresenter本身就是UI控件，可以在該控件中添加圖片或視頻作為背景,,標記美化和存儲,繪制涂寫區(qū)域可通過Stroke對象的GetBounds()方法獲得Rect結構，該結構包含筆觸繪制的區(qū)域,privatevoidinkPresenter_LostMouseCapture(objectsender,MouseEventArgse){RectMyRect=newRect();MyRect=newStroke.GetBounds();RectangleMyRectangle=newRectangle();MyRectangle.Height=MyRect.Height;MyRectangle.Width=MyRect.Width;ThicknessMyThickness=newThickness(MyRect.X,MyRect.Top,0,0);MyRectangle.Margin=MyThickness;SolidColorBrushMyBrush=newSolidColorBrush(Colors.Black);MyRectangle.Stroke=MyBrush;inkPresenter.Children.Add(MyRectangle);newStroke=null;},標記美化和存儲,擦除可以通過InkPresenter控件的Strokes集合來調用Remove()方法移除Stroke，實現(xiàn)擦除的功能,voidRemoveStroke(MouseEventArgse){//獲取當前鼠標所在位置處的StylusPoint集合StylusPointCollectionerasePoints=newStylusPointCollection();erasePoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));//與當前鼠標所在位置處的StylusPoint集合相連的Stroke集合StrokeCollectionhitStrokes=inkPresenter.Strokes.HitTest(erasePoints);for(inti=0;inewmyStroke{C=p.Element("Stroke.DrawingAttributes").Element("DrawingAttributes").Attribute("Color").Value,OutC=p.Element("Stroke.DrawingAttributes").Element("DrawingAttributes").Attribute("OutlineColor").Value,W=p.Element("Stroke.DrawingAttributes").Element("DrawingAttributes").Attribute("Width").Value,H=p.Element("Stroke.DrawingAttributes").Element("DrawingAttributes").Attribute("Height").Value,Points=p.Element("Stroke.StylusPoints").Descendants("StylusPoint").Select(ps=>newmyInkPoint{X=ps.Attribute("X").Value,Y=ps.Attribute("Y").Value}).ToList()});returnst.ToList();},標記美化和存儲,在Silverlight中構造XElement，傳遞給服務方法，保存到服務器,privatevoidMyIP_LostMouseCapture(objectsender,MouseEventArgse){foreach(StrokesinMyIP.Strokes){//創(chuàng)建筆畫屬性stroke=newXElement("Stroke",newXElement("Stroke.DrawingAttributes",newXElement("DrawingAttributes",newXAttribute("Color",s.DrawingAttributes.Color),newXAttribute("OutlineColor",s.DrawingAttributes.OutlineColor))));//創(chuàng)建點XElementpoints=newXElement("Stroke.StylusPoints");foreach(StylusPointpins.StylusPoints){……}stroke.Add(points);strokes.Add(stroke);}client.SaveStrokesCompleted+=newEventHandler(client_SaveStrokesCompleted);client.SaveStrokesAsync(strokes);},標記美化和存儲,在Silverlight中通過服務方法獲取保存的筆畫數(shù)據(jù),voidclient_GetStrokesCompleted(objectsender,StrokeSave.Mstanford.GetStrokesCompletedEventArgse){if(e.Result!=null){ObservableCollectionlst=e.Result;MyIP.Strokes.Clear();foreach(varvinlst){StylusPointCollectionMyStylusPointCollection=newStylusPointCollection();foreach(varvvinv.Points){MyStylusPointCollection.Add(newStylusPoint(){X=double.Parse(vv.X),Y=double.Parse(vv.Y)});}System.Windows.Ink.Strokestroke=newStroke(MyStylusPointCollection);stroke.DrawingAttributes.Color=getColorFromString(v.C);stroke.DrawingAttributes.OutlineColor=getColorFromString(v.OutC);stroke.DrawingAttributes.Width=double.Parse(v.W);stroke.DrawingAttributes.Height=double.Parse(v.H);MyIP.Strokes.Add(stroke);}}},小結3,如何為墨跡標注應用設置筆畫寬度和顏色等屬性？如何擦除筆畫？,本章總結,通過對MediaElement的Source屬性指定一個多媒體文件的URI播放多媒體MediaElement對象常用的屬性、方法和事件如下：Play()：播放媒體Pause()：暫停播放媒體Stop()：停止播放媒體IsMuted：是否靜音CurrentState：媒體的當前狀態(tài)Balance：音量平衡Volume：音量大小Position：媒體的位置CurrentStateChanged：播放狀態(tài)（CurrentState）發(fā)生改變時所觸發(fā)的事開發(fā)DeepZoom應用一般需要3個步驟：創(chuàng)建圖像棱錐圖將MultiScaleImage或MultiScaleSubImage添加到應用程序，并將這些對象的Source屬性指向DeepZoom圖像向DeepZoom對象注冊事件以添加交互性，實現(xiàn)縮放或平滑移動InkPresenter實現(xiàn)墨跡標注效果,