Win2D
首发于Win2D
第三章(特殊篇) 图像特效Effect

第三章(特殊篇) 图像特效Effect

由于win2D的特效比较多,真正能用在UWP上能用到的也不多,所以选几个有用的特效单独写(水)一篇

本文承接 第三章(调整篇) 图像特效Effect

......

老规矩,先准备一张图片:

准备一张图片

高斯模糊特效(GaussianBlurEffect)

高斯模糊能够把一张图片按照一定的原理均匀的模糊掉,具体的原理请移步 祥子:高斯模糊的原理是什么,怎样在界面中实现?这里我们不做太多讨论,简单来讲在win2D中高斯模糊有三个参数

  • 模糊数值(BlurAmount)
  • 边缘模式(BorderMode)

软(EffectBorderMode.Soft)

硬(EffectBorderMode.Hard)

  • 性能优化(Optimization):

速度(Speed)

平衡(Balanced)

质量(Quality)


代码与效果如下:

//实例化高斯模糊
GaussianBlurEffect effect= new GaussianBlurEffect
{
      Source = bitmap,
      BlurAmount = 90.0f,//BlurAmount模糊数值的范围在0.0f到100.0f之间
      BorderMode = EffectBorderMode.Soft,//边缘有软硬之分
      Optimization = EffectOptimization.Speed,//质量有高中低之分
};
高斯模糊(GaussianBlurEffect) BlurAmount=90.0f

定向模糊特效(DirectionalBlurEffect)

定向模糊也叫运动模糊、动态模糊,嗯......它的效果大概是这样的:

我控几不住我记几啊


定向模糊与高斯模糊相比参数都一样,但是定向模糊多了一个参数:Angle角度

因此它的写法是这样的:

//实例化定向模糊
DirectionalBlurEffect effect= new DirectionalBlurEffect
{
   Source = bitmap,
   Angle=Math.PI,//Angle角度的范围在0.0f到2π之间
};
定向模糊(DirectionalBlurEffect) Angle=π

投影特效(ShadowEffect)

投影顾名思义就是给图片一个投影,注意投影和阴影是两回事,请加以甄别

投影有两个参数:

  • 模糊数值(BlurAmount)
  • 投影颜色(ShadowColor)

它的效果是这样的一大坨:

//实例化投影特效
ShadowEffect effect = new ShadowEffect
{
     Source = bitmap,
      BlurAmount = 90.0f,//BlurAmount模糊数值的范围在0.0f到100.0f之间
      ShadowColor = Colors.Black,//ShadowColor投影颜色一般是黑色      
};
投影(ShadowEffect)


但是!这个鬼样子黑黑的一大坨肯定是不行的,因此想实现比较美观的投影,我们一般把它与结合特效和变换特效一起用。

写法如下:

//实例化阴影特效
ShadowEffect shadowEffect = new ShadowEffect
{
    Source = bitmap,
    BlurAmount = 60.0f,
    ShadowColor = Colors.Black,
};
//实例化变换特效
Transform2DEffect transform2DEffect = new Transform2DEffect
{
    Source = shadowEffect,
    TransformMatrix=Matrix3x2.CreateTranslation(new Vector2(10,10)),
};
//实例化透明特效
OpacityEffect opacityEffect = new OpacityEffect
{
    Source = transform2DEffect,
    Opacity = 0.82f,
};


//实例化结合特效
CompositeEffect effect = new CompositeEffect
{
   Sources =
   {
      opacityEffect ,
      bitmap,
   },
};
一张真正的带阴影的图片是用三个特效叠加起来的

亮度转不透明度特效(LuminanceToAlphaEffect)

亮度转不透明度特效可以把图片的亮度转为不透明度,使得一张图片变得灰度、半透明

需要注意的是:

  1. 亮度转不透明度没有参数,输入一个图片即可。
  2. 输入的图片像素与输出的图片像素相比,输入像素的亮度,成了输出灰度像素的不透明度。
  3. 越亮的地方越不透明度,越暗的地方越透明

代码如下:

//实例化亮度转不透明度特效
LuminanceToAlphaEffect effect = new LuminanceToAlphaEffect
{
   Source = bitmap,
};
这是输出的图片
为了方便大家观察透明度,我把它叠在了风景图上

乍一看,似乎这个特效没啥用嘛,但是其实还是有用的。


在绘画软件SAI里,有一个类似的亮度转不透明度功能。

与win2D的特效不同的是,它可以把白底线稿转换成透明线稿,非常好用。

Paint Tool SAI ver.2 (64bit)
展示透明线稿,图片侵删有人知道作者请联系我Σ(゚д゚;)

我们可以用LuminanceToAlphaEffect来实现这种功能。

代码如下:

new InvertEffect { Source = new LuminanceToAlphaEffect { Source = new InvertEffect { Source = bitmap } };

  • 当然了,实现方法也很简单,先反色,再亮度转不透明度,再反色.........就是这么简单粗暴

注意

没有什么可以注意的,全是重点没法单独拎出来写

不行东西太多了写不完了,想到什么就再来更新以后慢慢补充,

有能力的童鞋去我的开源项目《修图》里翻翻吧

ysdy44/Retouch-Photo-UWPgithub.com图标
特效按钮

就酱......

编辑于 2018-06-02

文章被以下专栏收录

    Win2D是一款易于使用的Windows运行时API,可用于GPU加速的即时模式2D图形渲染。它适用于为Windows通用平台(UWP)编写应用程序的C#,C ++和VB开发人员。它利用了Direct2D的强大功能,并与XAML和CoreWindow无缝集成。