影音冲击感官(理论).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 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 播放控制 控制状态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 0 1 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 i hitStrokes Count i 在InkPresenter上清除指定的StrokeinkPresenter Strokes Remove hitStrokes i 标记美化和存储 笔画存储可以通过两种方式来将笔画序列化到服务端 使用自定义可序列化对象构造XAML字符串传递到服务端由服务端解析该字符串 标记美化和存储 添加WebService 序列化笔画数据到服务器 WebMethod publicListGetStrokes XElementxml null try xml XElement Load Server MapPath ink xml catch returnnull 使用Linq查询XML文档varst xml Descendants Stroke Select p newmyStroke 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 创建笔画属性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 StylusPointCollectionMyStylusPointCollectio