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

《影音沖擊感官(理論).ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《影音沖擊感官(理論).ppt（33頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

第8章影音沖擊感官,本章內(nèi)容,Silverlight多媒體DeepZoom應(yīng)用墨跡標(biāo)注控件應(yīng)用,本章目標(biāo),理解Silverlight多媒體應(yīng)用的優(yōu)勢(shì)創(chuàng)建和控制音頻和視頻能夠使用DeepZoomComposer開發(fā)DeepZoom應(yīng)用能夠使用InkPresenter控件實(shí)現(xiàn)墨跡標(biāo)注效果,1.Silverlight多媒體,1.1MediaElement,MediaElement控件是一個(gè)矩形區(qū)域，可以在其上顯示視頻或播放音頻，通過為該控件的Source屬性指定一個(gè)多媒體文件的URI，即可進(jìn)行播放,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}","播放進(jìn)度：",mediaElement.Position.Hours,mediaElement.Position.Minutes,mediaElement.Position.Seconds);}lblDroppedFramesPerSecond.Text="每秒正在丟棄的幀數(shù)："+mediaElement.DroppedFramesPerSecond.ToString();}voidmediaElement_BufferingProgressChanged(objectsender,RoutedEventArgse){lblBufferingProgress.Text=string.Format("緩沖進(jìn)度：{0:##%}",mediaElement.BufferingProgress);}voidmediaElement_DownloadProgressChanged(objectsender,RoutedEventArgse){lblDownloadProgress.Text=string.Format("下載進(jìn)度：{0:##%}",mediaElement.DownloadProgress);}privatevoidmediaElement_CurrentStateChanged(objectsender,RoutedEventArgse){lblState.Text="播放狀態(tài)："+mediaElement.CurrentState.ToString();},播放控制,控制外觀MediaElement也是一個(gè)UI控件，可以通過Clip屬性設(shè)置幾何圖形對(duì)其外觀進(jìn)行裁剪，使MediaElement呈現(xiàn)的外觀發(fā)生變化,,播放控制,播放列表Silverlight多媒體功能支持服務(wù)器端播放列表和客戶端播放列表,,服務(wù)器端播放列表需要?jiǎng)?chuàng)建XML格式的文件.wsx，將需要播放的媒體序列在該文件中指定，然后通過流媒體服務(wù)發(fā)布,強(qiáng)制該容器中的媒體元素以它們出現(xiàn)在元素中的順序進(jìn)行播放,定義播放列表中的音頻或視頻文件,播放控制,客戶端播放列表客戶端播放列表是基于XML格式的，文件后綴名為.asx,PlaylistsampleAnintrolductionofSilverlightMicrosoftCorporation(c)2008MicrosoftCorporationBeautifulButterflyMicrosoftCorporation(c)2008MicrosoftCorporation,,引用播放列表,小結(jié)1,控制媒體播放，需要使用MediaElement控件的哪些方法？MediaElementState枚舉包含哪幾種媒體播放狀態(tài)？,2.深度縮放,2.1DeepZoom概述,DeepZoom技術(shù)能夠?qū)崿F(xiàn)使用多分辨率圖像來實(shí)現(xiàn)大圖像的高幀速率和快速打開體驗(yàn)。在加載時(shí)，只有少量數(shù)據(jù)需要在屏幕上快速顯示內(nèi)容。最初加載體驗(yàn)是顯示圖像的低分辨率版本，在變得可用時(shí)逐漸提高分辨率,DeepZoom概述,DeepZoom技術(shù)應(yīng)用領(lǐng)域：探究非常大或高分辨率圖像三維攝影廣告,圖像棱錐圖：一個(gè)DeepZoom圖像由多個(gè)不同分辨率的JPEG或PNG圖像的圖塊組成，這些圖塊構(gòu)成一個(gè)圖像棱錐圖每個(gè)圖塊存儲(chǔ)在單獨(dú)的文件中，并且每個(gè)棱錐圖級(jí)別存儲(chǔ)在單獨(dú)的文件夾中DeepZoom可以只提取屏幕上當(dāng)前圖像大小所需的那些圖塊，而不必下載整個(gè)圖像,DeepZoom應(yīng)用,開發(fā)DeepZoom應(yīng)用一般需要3個(gè)步驟：創(chuàng)建圖像棱錐圖將MultiScaleImage或MultiScaleSubImage添加到應(yīng)用程序，并將這些對(duì)象的Source屬性指向DeepZoom圖像向DeepZoom對(duì)象注冊(cè)事件以添加交互性，實(shí)現(xiàn)縮放或平滑移動(dòng),MultiScaleImagemyDeepZoomObject=newMultiScaleImage();myDeepZoomObject.Source=newUri("source/items.xml");privatevoidDeepZoomObject_MouseEnter(objectsender,MouseEventArgse){this.deepZoomObject.ZoomAboutLogicalPoint(3,.5,.5);},2.2DeepZoom應(yīng)用,使用DeepZoomComposer工具開發(fā)DeepZoom應(yīng)用,使用DeepZoomComposer工具創(chuàng)建DeepZoom項(xiàng)目,DeepZoom應(yīng)用,向項(xiàng)目中添加一個(gè)或多個(gè)高分辨率圖像,DeepZoom應(yīng)用,導(dǎo)出棱錐圖,DeepZoom應(yīng)用,在Silverlight項(xiàng)目中引入棱錐圖，并添加事件處理,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);},鼠標(biāo)進(jìn)入圖片區(qū)域，圖像放大,鼠標(biāo)移出圖片區(qū)域，圖像縮小,小結(jié)2,開發(fā)DeepZoom應(yīng)用需要哪幾個(gè)步驟?如何獲取MultiScaleSubImage中的子圖像列表？,3.應(yīng)用墨跡標(biāo)注,3.1InkPresenter控件,StrokeCollection,Stroke對(duì)象,包含若干StylusPoint對(duì)象,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();},通過事件交互的方式來實(shí)現(xiàn)手寫功能,3.2標(biāo)記美化和存儲(chǔ),設(shè)計(jì)筆畫通過Stroke對(duì)象的DrawingAtrributes屬性集合中屬性設(shè)置筆觸的顏色、輪廓顏色、寬和高,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);,標(biāo)記美化和存儲(chǔ),創(chuàng)建背景InkPresenter本身就是UI控件，可以在該控件中添加圖片或視頻作為背景,,標(biāo)記美化和存儲(chǔ),繪制涂寫區(qū)域可通過Stroke對(duì)象的GetBounds()方法獲得Rect結(jié)構(gòu)，該結(jié)構(gòu)包含筆觸繪制的區(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;},標(biāo)記美化和存儲(chǔ),擦除可以通過InkPresenter控件的Strokes集合來調(diào)用Remove()方法移除Stroke，實(shí)現(xiàn)擦除的功能,voidRemoveStroke(MouseEventArgse){//獲取當(dāng)前鼠標(biāo)所在位置處的StylusPoint集合StylusPointCollectionerasePoints=newStylusPointCollection();erasePoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));//與當(dāng)前鼠標(biāo)所在位置處的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();},標(biāo)記美化和存儲(chǔ),在Silverlight中構(gòu)造XElement，傳遞給服務(wù)方法，保存到服務(wù)器,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)建點(diǎn)XElementpoints=newXElement("Stroke.StylusPoints");foreach(StylusPointpins.StylusPoints){……}stroke.Add(points);strokes.Add(stroke);}client.SaveStrokesCompleted+=newEventHandler(client_SaveStrokesCompleted);client.SaveStrokesAsync(strokes);},標(biāo)記美化和存儲(chǔ),在Silverlight中通過服務(wù)方法獲取保存的筆畫數(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);}}},小結(jié)3,如何為墨跡標(biāo)注應(yīng)用設(shè)置筆畫寬度和顏色等屬性？如何擦除筆畫？,本章總結(jié),通過對(duì)MediaElement的Source屬性指定一個(gè)多媒體文件的URI播放多媒體MediaElement對(duì)象常用的屬性、方法和事件如下：Play()：播放媒體Pause()：暫停播放媒體Stop()：停止播放媒體IsMuted：是否靜音CurrentState：媒體的當(dāng)前狀態(tài)Balance：音量平衡Volume：音量大小Position：媒體的位置CurrentStateChanged：播放狀態(tài)（CurrentState）發(fā)生改變時(shí)所觸發(fā)的事開發(fā)DeepZoom應(yīng)用一般需要3個(gè)步驟：創(chuàng)建圖像棱錐圖將MultiScaleImage或MultiScaleSubImage添加到應(yīng)用程序，并將這些對(duì)象的Source屬性指向DeepZoom圖像向DeepZoom對(duì)象注冊(cè)事件以添加交互性，實(shí)現(xiàn)縮放或平滑移動(dòng)InkPresenter實(shí)現(xiàn)墨跡標(biāo)注效果,