一、WIN2D学习记录（win2d实现JS雨天效果）

1、Win2D

Win2D是微软开源的项目

它的github地址是 https://github.com/Microsoft/Win2D  

里面有详细的文档 http://microsoft.github.io/Win2D/html/Introduction.htm

大量Sample https://github.com/Microsoft/Win2D-samples

 

2、运用

一、上手win2d十分快，在nuget下载安装相应win2d插件便可使用了。

二、win2d里面有canvasControl ，CanvasAnimatedControl等实用的控件。

三、大量不懂的能够看Sample里面的代码。

 

3、例子

去年实习的时候，看过js实现下雨天的效果（ https://github.com/maroslaw/rainyday.js ），因此一直想本身按照js的思路用C#实现一遍，win2d正好的适用。

最后是基本实现了效果，还有好多能够扩展优化的（其中几个效果会卡）。

一、实现背景高斯模糊

 blurEffect = new GaussianBlurEffect()
            {
                Source = imgbackground,
                BlurAmount = 4.0f, 
                BorderMode = EffectBorderMode.Soft
            };

二、加载背景

 imgbackground = await CanvasBitmap.LoadAsync(sender, imgPath, defaultDpi);

三、玻璃准备

 glassSurface = new CanvasRenderTarget(sender, imgW, imgH, defaultDpi);

四、画不一样形状的雨滴

 /// <summary>
        /// Draws a raindrop on canvas at the current position.
        /// </summary>
        public void Draw(RainyDay rainyday, CanvasDrawingSession context)
        {
            float orgR = r;
            r = 0.95f * r;
            if (r < 3)
            {
                clipGeo = CanvasGeometry.CreateCircle(context, new Vector2(x, y), r);
            }
            else if (colliding != null || yspeed > 2)
            {
                if (colliding != null)
                {
                    var collider = colliding;
                    r = 1.001f * (r > collider.r ? r : collider.r);
                    x += (collider.x - x);
                    colliding = null;
                }
                float yr = 1 + 0.1f * yspeed;
                using (CanvasPathBuilder path = new CanvasPathBuilder(context))
                {
                    path.BeginFigure(x - r / yr, y);
                    path.AddCubicBezier(new Vector2(x - r, y - r * 2), new Vector2(x + r, y - r * 2), new Vector2(x + r / yr, y));
                    path.AddCubicBezier(new Vector2(x + r, y + yr * r), new Vector2(x - r, y + yr * r), new Vector2(x - r / yr, y));
                    path.EndFigure(CanvasFigureLoop.Closed);
                    clipGeo = CanvasGeometry.CreatePath(path);
                }
            }
            else
            {
                clipGeo = CanvasGeometry.CreateCircle(context, new Vector2(x, y), 0.9f * r);
            }
            r = orgR;
            if (rainyday.Reflection != null)
            {
                using (context.CreateLayer(1, clipGeo))
                {
                    rainyday.Reflection(context, this);
                }
            }
            if (clipGeo != null)
            {
                clipGeo.Dispose();
            }
        }

五、清除某个矩形区域

 context.Blend = CanvasBlend.Copy;
            context.FillRectangle(x - r - 1, y - r - 2, 2 * r + 2, 2 * r + 2, Colors.Transparent);
            context.Blend = CanvasBlend.SourceOver;

六、UWP全屏设置

 private void btnFullScreen_IsChecked(object sender, RoutedEventArgs e)
        {
            if (btnFullScreen.IsChecked==true)
            {
                ApplicationView.TryUnsnapToFullscreen();

                ApplicationView.GetForCurrentView().TryEnterFullScreenMode();
                toolSP.Visibility = Visibility.Collapsed;
            }
            else
            {
                ApplicationView.GetForCurrentView().ExitFullScreenMode();
                toolSP.Visibility = Visibility.Visible;
            }
        }

 

4、实现效果动图

图一：

图2：（全屏）

 

实现源码：https://github.com/Neilxzn/RainDayForUAP

 

完成这个例子仍是挺爽的。继续努力，学多点，看多点