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

第8章影音沖擊感官,本章內(nèi)容,Silverlight多媒體DeepZoom應(yīng)用墨跡標(biāo)注控件應(yīng)用,本章目標(biāo),理解Silverlight多媒體應(yīng)用的優(yōu)勢(shì)創(chuàng)建和控制音頻和視頻能夠使用DeepZoomComposer開(kāi)發(fā)DeepZoom應(yīng)用能夠使用InkPresenter控件實(shí)現(xiàn)墨跡標(biāo)注效果,1.Silverlight多媒體,1.1MediaElement,MediaElement控件是一個(gè)矩形區(qū)域，可以在其上顯示視頻或播放音頻，通過(guò)為該控件的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();,播放控制,控制聲音通過(guò)MediaElement控件的Volume、IsMuted和Balance屬性可以控制播放聲音,voidmute_Click(objectsender,RoutedEventArgse)if(mediaElement.IsMuted=true)mute.Content="靜音"mediaElement.IsMuted=false;elsemute.Content="有聲"mediaElement.IsMuted=true;privatevoidvolumeSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgse)mediaElement.Volume=volumeSlider.Value;lblVolume.Text=string.Format("音量大?。?:#%",volumeSlider.Value);privatevoidbalanceSlider_ValueChanged(objectsender,RoutedPropertyChangedEventArgse)mediaElement.Balance=balanceSlider.Value;lblBalance.Text=string.Format("音量平衡：0:#%",balanceSlider.Value);,播放控制,控制狀態(tài)MediaElement控件通過(guò)事件CurrentStateChanged來(lái)檢測(cè)狀態(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("01: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控件，可以通過(guò)Clip屬性設(shè)置幾何圖形對(duì)其外觀進(jìn)行裁剪，使MediaElement呈現(xiàn)的外觀發(fā)生變化,播放控制,播放列表Silverlight多媒體功能支持服務(wù)器端播放列表和客戶端播放列表,服務(wù)器端播放列表需要?jiǎng)?chuàng)建XML格式的文件.wsx，將需要播放的媒體序列在該文件中指定，然后通過(guò)流媒體服務(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)使用多分辨率圖像來(lái)實(shí)現(xiàn)大圖像的高幀速率和快速打開(kāi)體驗(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)用,開(kāi)發(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工具開(kāi)發(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,開(kāi)發(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();,通過(guò)事件交互的方式來(lái)實(shí)現(xiàn)手寫(xiě)功能,3.2標(biāo)記美化和存儲(chǔ),設(shè)計(jì)筆畫(huà)通過(guò)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ǔ),繪制涂寫(xiě)區(qū)域可通過(guò)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ǔ),擦除可以通過(guò)InkPresenter控件的Strokes集合來(lái)調(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;inewmyStrokeC=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=>newmyInkPointX=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)建筆畫(huà)屬性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中通過(guò)服務(wù)方法獲取保存的筆畫(huà)數(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è)置筆畫(huà)寬度和顏色等屬性？如何擦除筆畫(huà)？,本章總結(jié),通過(guò)對(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ā)的事開(kāi)發(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)注效果,