保存到桌面加入收藏设为首页
IOS开发
当前位置:首页 > IOS开发

(UWP开发)基于Windows10 Anniversary SDK造出位于可视化层的DropShadow-安度博客

时间:2019-02-08 15:56:52   作者:   来源:   阅读:98   评论:0
内容摘要:Windows.UI.Composition API是可以从任何通用Windows平台应用程序调用的声明性保留模式API,从而可以直接在应用程序中创建合成对象、动画和效果。Composition API在 10586SDK 中就已经出现,但是在年度更新之后,该SDK变得更加完善,......
  • Windows.UI.Composition API是可以从任何通用Windows平台应用程序调用的声明性保留模式API,从而可以直接在应用程序中创建合成对象动画效果

    Composition API在 10586SDK 中就已经出现,但是在年度更新之后,该SDK变得更加完善,也有了更多样性的功能。今天我们就来谈谈如何在基于 Anniversary SDK 的UWP应用中使用Composition API创建DropShadow效果。

    1.首先,假如我们想要为一个Ellipse对象创造DropShadow效果,那么第一步,我们需要先创建一个Canvas对象,这个对象位于Ellipse的“背后”,要被Ellipse遮挡住,比如这样:

    <Grid> <Canvas x:Name=&#39;host&#39;/> <Ellipse x:Name=&#39;target&#39;/></Grid>

    2.使用ElementCompositionPreview.GetElementVisual()方法获得Canvas的Visual,然后得到该Visual的Compositor,其中下面代码中的host是我们在XMAL中创建的Canvas:

     Visual hostvisual = ElementCompositionPreview.GetElementVisual(host); Compositor compositor = hostvisual.Compositor;

    3.现在我们要通过compositor创建一个新的SpriteVisual。SpriteVisual派生于ContainerVisual类,而ContainerVisual类派生于Visual类。相比起ContainerVisual,SpriteVisual类还包含了图像、效果和交换链形式的内容。在我们这篇blog中,我们就是通过这个SpriteVisual来构建DropShadow。创建好SpriteVisual之后,我们还需要使用ElementCompositionPreview.SetElementChildVisual()方法将这个SpriteVisual添加到XMAL的可视化树中:

     SpriteVisual spritevisual = compositor.CreateSpriteVisual(); ElementCompositionPreview.SetElementChildVisual(host spritevisual);

    4.现在开始进入重要部分,开始构建shadow。我们还是需要使用compositor,通过它我们可以创造一个新的DropShadow。这个创造出的DropShadow就是我们需要的shadow啦!我们可以通过设置这个DropShadow的属性来的到我们需要的DropShadow:

     DropShadow dropshadow = compositor.CreateDropShadow(); dropshadow.Color = apptheme.Gary_Color_Brush.Color; dropshadow.Opacity = 0.5f; dropshadow.Offset = new System.Numerics.Vector3(0f 5f 0f); dropshadow.Mask = (target as Shape).GetAlphaMask();

    这里的这几行要解释一下:Color属性和Opacity属性都不需要怎么介绍了吧,就是代表着这个DropShadow的颜色和不透明度。Offset表示的是阴影的偏移量。这个偏移量是相对于Canvas在UI中的位置来说的,并且Vector3这个类型在上面代码中的构造函数的三个参数都是float类型,因此数值后面要加上f。最下面的Mask属性呢,可以通过ImageTextBlockShape 这三个类各自实现一个称为 GetAlphaMask 的方法,该方法返回一个 CompositionBrush,用于表示带有元素形状的灰度图像。 此 CompositionBrush 可充当复合DropShadow的输入,因此阴影可以反映元素的形状,而不是矩形。 这将为文本、带有 alpha 的图像和形状启用像素完美、基于轮廓的阴影。如果不是这三个类型的对象是不会带有GetAlphaMask()方法的,因此在使用时一定要注意,否则会抛出异常。

    5.然后,我们要把这个DropShadow赋值给spritevisual的Shadow属性:

     spritevisual.Shadow = dropshadow;

    6.最后,我们要创建一个表达式动画。完成了这一步之后,DropShadow效果就实现啦:

     expressionAnimation animation = compositor.CreateexpressionAnimation(&#39;hostvisual.Size&#39;); animation.SetReferenceParameter(&#39;hostvisual&#39; hostvisual); spritevisual.StartAnimation(&#39;Size&#39; animation);

     至此,我们的DropShadow效果就创建完成啦,大家可以自己动手试试~


本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)