代码改变世界

《Silverlight4InAction》每帧渲染的过程等

2010-11-26 22:44  撞破南墙  阅读(1630)  评论(3编辑  收藏  举报

1 运行时动态拼接xaml装载

   private int width = 50;
        
private void button1_Click(object sender, RoutedEventArgs e) {
            var element 
= CreateRectangle();
            LayoutRoot.Children.Add(element);

        }
        
private Rectangle CreateRectangle() {
            StringBuilder xaml 
= new StringBuilder();
            
string ns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation";
            xaml.Append(
"<Rectangle ");
            xaml.AppendFormat(
"xmlns='{0}'", ns); width += 50;
            xaml.AppendFormat(
" Width='{0}' Height='{0}'", width);
            xaml.Append(
" Fill='Orange'");
            xaml.Append(
" Stroke='Black' />");
            var rectangle 
= (Rectangle)XamlReader.Load(xaml.ToString());
            
return rectangle;
        }

  

2 装载Silverlight的过程

 

3 windowless和background

 

4 呈现的过程

 

  

Silverlight中的渲染过程。用户界面往往比较复杂。 大多数浏览器拥有一个简单的线程模型, 

变化的 沙箱 设置,理解渲染过程很重要尤其当他关系到性能。 

浏览器线程,渲染,性能优化,如何作为线程的插件,使用回调函数 。

 

#1 更新所在浏览器可视的部分。

#2 CLICK:控制动画和视频等的时钟自增。

#3 事件触发:调用事件,所要触发的用户自定义的代码。

#4 布局:重新测量和布局所有的元素并显示。

#5 每帧刷新前的回调函数:调用它们。

    是这个事件:CompositionTarget.Rendering

#6 rasterize:栅格化,栅格化每个点的内容,包括视频和图片。

 

  6.1  视觉树中的递归呈现的顺序

Children Cache

Opacity mask Opacity

Effects (intermediate surface) Clip

Projection (intermediate surface) Render transform

Layout offset (internal layout transform) 10 Parent node

 

6.2 OCCLUSION(封闭-不知道如何翻译)

在一个3D呈现中 ,即使不被显示屏幕中也需要为其计算。

 

 6.3缓存机制

当首次运行或者每次改变的时候。每一帧都会被bitemap缓存,然后被随后的帧调用。直到下次改变。其改变包括布局和元素的改变。对于拥有复杂的子视觉树,可以实现巨大的缓存组成性能优势。

System.Windows.UIElement  元素都可以使用 CacheMode="BitmapCache" 默认不开启

 


 

 6.4 开启硬件加速

<param name="EnableGPUAcceleration" value="true" />

获取一个值,该值指示是否对高速缓存的组合使用图形处理器单元硬件加速(这可能导致图形优化)。 

默认为false。

在对象级别,您可以使用 CacheMode 属性和 BitmapCache 值为图形设置缓存合成信息。

在应用程序开发的分析和性能优化阶段,可以将 Settings..::..EnableCacheVisualization 设置为 true,以便在 UI 中生成正在进行硬件加速的区域的重叠可视化。

EnableGPUAcceleration 在运行时是只读的,但您可以在浏览器外配置中设置它。 

看过深蓝学长教程的人应该都知道是怎么回事了吧。

 

6.5可视区的缓存和重绘区域

 <param name="enableCacheVisualization" value="true"/>

获取或设置一个值,该值指示是否使用非生产分析可视化模式,显示页面中使用彩色覆盖进行 GPU 加速的部分。不要在成品代码中使用。 

在应用程序开发的分析和性能优化阶段,可以将 EnableCacheVisualization 设置为 true,以便在 UI 中生成正在进行硬件加速的区域的重叠可视化。还可以在插件级别,在宿主 HTML 中设置此属性。

 

<param name="enableRedrawRegions" value="true" /> 

获取或设置一个值,该值指示是否显示重新绘制每个帧的 Silverlight 插件的区域。 

EnableRedrawRegions 属性启用在开发过程中使用的诊断功能,可以通过显示重新绘制每个帧的插件的区域来优化应用程序的性能。不能在初始化期间设置此属性。通常,在加载 Silverlight 插件后通过使用事件处理程序来启用和禁用此属性。 

 

 

 7显示 帧:

Clock tick:动画和视频 是基于时钟的增长而不是帧,所以Silverlight

能够跳过一些帧。换句话说一个两秒钟的

动画在快和慢的机器上都是只运行两秒钟 

 

 

6 c#调用JS和JS调用C#代码

 前台

  function buttonClick() {
            
var plugin = document.getElementById("mysl");
            plugin.content.bridge.ExecuteFunctionInSL();
        }
        
function SayHello(name) {
            alert(
"Hello " + name);

        } 

 

后台 

     //后台调用前台JS

        public void TempTestHtml() {
            ScriptObject hello 
= HtmlPage.Window.GetProperty("SayHello"as ScriptObject;
            hello.InvokeSelf(textBox1.Text);

        }

        [ScriptableMember]
        
//被前台调用的C#方法
        public void ExecuteFunctionInSL() {
            button1_Click(
nullnull);
            MessageBox.Show(
"ExecuteFunctionInSL called");
        }

 

代码下载  

示例: 

Get Microsoft Silverlight

==== ===

参考Silverlight4 in action