1、WIN2D学习记录(win2d实现JS雨天效果)

一、Win2D

Win2D是微软开源的项目

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

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

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

二、运用

1、上手win2d十分快,在nuget下载安装相应win2d插件即可使用了。

2、win2d里面有canvasControl ,CanvasAnimatedControl等实用的控件。

3、大量不懂的可以看Sample里面的代码。

三、例子

去年实习的时候,看过js实现下雨天的效果( https://github.com/maroslaw/rainyday.js ),所以一直想自己按照js的思路用C#实现一遍,win2d正好的适用。

最后是基本实现了效果,还有好多可以扩展优化的(其中几个效果会卡)。

1、实现背景高斯模糊

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

2、加载背景

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

3、玻璃准备

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

4、画不同形状的雨滴

 /// <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 < )
{
clipGeo = CanvasGeometry.CreateCircle(context, new Vector2(x, y), r);
}
else if (colliding != null || yspeed > )
{
if (colliding != null)
{
var collider = colliding;
r = 1.001f * (r > collider.r ? r : collider.r);
x += (collider.x - x);
colliding = null;
}
float yr = + 0.1f * yspeed;
using (CanvasPathBuilder path = new CanvasPathBuilder(context))
{
path.BeginFigure(x - r / yr, y);
path.AddCubicBezier(new Vector2(x - r, y - r * ), new Vector2(x + r, y - r * ), 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(, clipGeo))
{
rainyday.Reflection(context, this);
}
}
if (clipGeo != null)
{
clipGeo.Dispose();
}
}

5、清除某个矩形区域

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

6、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;
}
}

四、实现效果动图

图一:

1、WIN2D学习记录(win2d实现JS雨天效果)

图2:(全屏)

1、WIN2D学习记录(win2d实现JS雨天效果)

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

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

上一篇:VISUALSVN: UNABLE TO CONNECT TO A REPOSITORY AT URL 无法连接主机的解决办法


下一篇:Vue.js学习 — 微信公众号菜单编辑器(一)