一、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

 

完成這個例子仍是挺爽的。繼續努力，學多點，看多點