影音冲击感官(理论).ppt

第8章影音冲击感官,本章内容,Silverlight多媒体DeepZoom应用墨迹标注控件应用,本章目标,理解Silverlight多媒体应用的优势创建和控制音频和视频能够使用DeepZoomComposer开发DeepZoom应用能够使用InkPresenter控件实现墨迹标注效果,1.Silverlight多媒体,1.1MediaElement,MediaElement控件是一个矩形区域，可以在其上显示视频或播放音频，通过为该控件的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;elsemute.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);,播放控制,控制状态MediaElement控件通过事件CurrentStateChanged来检测状态变化，状态由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,播放进度：,mediaElement.Position.Hours,mediaElement.Position.Minutes,mediaElement.Position.Seconds);lblDroppedFramesPerSecond.Text=每秒正在丢弃的帧数：+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=播放状态：+mediaElement.CurrentState.ToString();,播放控制,控制外观MediaElement也是一个UI控件，可以通过Clip属性设置几何图形对其外观进行裁剪，使MediaElement呈现的外观发生变化,播放控制,播放列表Silverlight多媒体功能支持服务器端播放列表和客户端播放列表,服务器端播放列表需要创建XML格式的文件.wsx，将需要播放的媒体序列在该文件中指定，然后通过流媒体服务发布,强制该容器中的媒体元素以它们出现在元素中的顺序进行播放,定义播放列表中的音频或视频文件,播放控制,客户端播放列表客户端播放列表是基于XML格式的，文件后缀名为.asx,PlaylistsampleAnintrolductionofSilverlightMicrosoftCorporation(c)2008MicrosoftCorporationBeautifulButterflyMicrosoftCorporation(c)2008MicrosoftCorporation,引用播放列表,小结1,控制媒体播放，需要使用MediaElement控件的哪些方法？MediaElementState枚举包含哪几种媒体播放状态？,2.深度缩放,2.1DeepZoom概述,DeepZoom技术能够实现使用多分辨率图像来实现大图像的高帧速率和快速打开体验。在加载时，只有少量数据需要在屏幕上快速显示内容。最初加载体验是显示图像的低分辨率版本，在变得可用时逐渐提高分辨率,DeepZoom概述,DeepZoom技术应用领域：探究非常大或高分辨率图像三维摄影广告,图像棱锥图：一个DeepZoom图像由多个不同分辨率的JPEG或PNG图像的图块组成，这些图块构成一个图像棱锥图每个图块存储在单独的文件中，并且每个棱锥图级别存储在单独的文件夹中DeepZoom可以只提取屏幕上当前图像大小所需的那些图块，而不必下载整个图像,DeepZoom应用,开发DeepZoom应用一般需要3个步骤：创建图像棱锥图将MultiScaleImage或MultiScaleSubImage添加到应用程序，并将这些对象的Source属性指向DeepZoom图像向DeepZoom对象注册事件以添加交互性，实现缩放或平滑移动,MultiScaleImagemyDeepZoomObject=newMultiScaleImage();myDeepZoomObject.Source=newUri(source/items.xml);privatevoidDeepZoomObject_MouseEnter(objectsender,MouseEventArgse)this.deepZoomObject.ZoomAboutLogicalPoint(3,.5,.5);,2.2DeepZoom应用,使用DeepZoomComposer工具开发DeepZoom应用,使用DeepZoomComposer工具创建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);,鼠标进入图片区域，图像放大,鼠标移出图片区域，图像缩小,小结2,开发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();,通过事件交互的方式来实现手写功能,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);,标记美化和存储,创建背景InkPresenter本身就是UI控件，可以在该控件中添加图片或视频作为背景,标记美化和存储,绘制涂写区域可通过Stroke对象的GetBounds()方法获得Rect结构，该结构包含笔触绘制的区域,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，实现擦除的功能,voidRemoveStroke(MouseEventArgse)/获取当前鼠标所在位置处的StylusPoint集合StylusPointCollectionerasePoints=newStylusPointCollection();erasePoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter);/与当前鼠标所在位置处的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();,标记美化和存储,在Silverlight中构造XElement，传递给服务方法，保存到服务器,privatevoidMyIP_LostMouseCapture(objectsender,MouseEventArgse)foreach(StrokesinMyIP.Strokes)/创建笔画属性stroke=newXElement(Stroke,newXElement(Stroke.DrawingAttributes,newXElement(DrawingAttributes,newXAttribute(Color,s.DrawingAttributes.Color),newXAttribute(OutlineColor,s.DrawingAttributes.OutlineColor);/创建点XElementpoints=newXElement(Stroke.StylusPoints);foreach(StylusPointpins.StylusPoints)stroke.Add(points);strokes.Add(stroke);client.SaveStrokesCompleted+=newEventHandler(client_SaveStrokesCompleted);client.SaveStrokesAsync(strokes);,标记美化和存储,在Silverlight中通过服务方法获取保存的笔画数据,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：媒体的当前状态Balance：音量平衡Volume：音量大小Position：媒体的位置CurrentStateChanged：播放状态（CurrentState）发生改变时所触发的事开发DeepZoom应用一般需要3个步骤：创建图像棱锥图将MultiScaleImage或MultiScaleSubImage添加到应用程序，并将这些对象的Source属性指向DeepZoom图像向DeepZoom对象注册事件以添加交互性，实现缩放或平滑移动InkPresenter实现墨迹标注效果,