码迷,mamicode.com
首页 > Web开发 > 详细

.NET实时2D渲染入门·动态时钟

时间:2019-10-23 10:01:18      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:代码实现   和我   对象   forms   square   区分   简化   状态   基于   

.NET实时2D渲染入门·动态时钟

从小以来“坦克大战”、“魂斗罗”等游戏总令我魂牵梦绕。这些游戏的基础就是2D实时渲染,以前没意识,直到后来找到了Direct2D。我的2D实时渲染入门,是从这个动态时钟开始的。

本文将使用我写的“准游戏引擎”FlysEngine完成。它是对Direct2D.NETSharpDX浅层次的封装,隐藏了一些细节,简化了一些调用。同时还保留了Direct2D的原汁原味。

本文的最终效果如下:
技术图片

绘制动态时钟

要绘制动态时钟,需要有以下步骤:

  • 创建一个实时渲染窗口;
  • 画一个圆圈,表示时钟边缘;
  • 在圆圈内等距离画上60个分钟刻度,其中12个比较长,为小时刻度;
  • 用不同粗细、不同长短、不同颜色的画笔画上时钟、分钟和秒钟。

实时渲染窗口

using var form = new RenderWindow { ClientSize = new System.Drawing.Size(400, 400) };
form.Draw += (RenderWindow sender, DeviceContext ctx) =>
{
    ctx.Clear(Color.CornflowerBlue);
};
RenderLoop.Run(form, () => form.Render(1, PresentFlags.None));

其中form.Render(1, ...)中的1表示垂直同步,玩过游戏的可能见过,这个设置可以在尽可能节省CPU/GPU资源的同时得到最佳的呈现效果。

熟悉glut的肯定知道,这种写法和glut非常像,执行效果如下:
技术图片

注意:

RenderWindow其实继承于System.Windows.Forms.Form,确实是基于“WinForm”,但实质却和“拖控件”完全不一样。“控件”是模态的,本身有状态,但Direct2D是实时渲染,界面完全没有状态,需要动态每隔一个垂直同步时间(如1/60秒)全部清除,然后再重绘一次。

画圆圈

RenderWindow简单封装了Direct2D,可以直接使用里面的XResource属性来访问DirectX相关资源,包括:

  • Direct2D Factory
  • Direct2D DeviceContext
  • DirectWrite Factory
  • Transition Library 动画库
  • Animation Manager 动画管理器
  • SwapChain
  • WIC ImagingFactory2

除此之外,还进一步封装了以下组件,以简化图片、文字、颜色等调用和渲染:

  • TextFormatManager 简化创建TextFormat
  • BitmapManager 简化加载图片
  • TextLayoutManager 简化创建TextLayout
  • .GetColor(color) 方法,简化使用颜色

这里我们将使用Direct2D DeviceContext,这在COM中的名字叫ID2D1DeviceContext

回到Draw事件,它包含两个参数:(RenderWindow sender, DeviceContext ctx)

  • 其中sender就是原窗口,可以用外层的form代替;
  • ctx参数就是D2D绘图的核心,我们将围绕它进行绘制。

要画圆圈,得先算出一个能放下一个完整圆的半径,并留下少许空间(5):

float r = Math.Min(ctx.Size.Width, ctx.Size.Height) / 2 - 5

然后调用ctx参数,使用黑色画笔将圆画出来,线宽为1/40半径:

ctx.DrawEllipse(new Ellipse(Vector2.Zero, r, r), sender.XResource.GetColor(Color.Black), r/40);

执行效果如下:
技术图片

可见圆只显示了四分之一,要显示完整的圆,必须将其“移动”到屏幕正中心,我们可以调整圆的参数,将中心点从Vector2.Zero改成new Vector2(ctx.Size.Width/2, ctx.Size.Height/2),或者用更简单的办法,通过矩阵变换:

ctx.Transform = Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);

注意:“矩阵变换”这几个字听起来总令人联想到“高数”,挺吓人的。但实际是并不是非要知道线性代码基础才能使用。首先只要知道它能完成任务即可,之后再慢慢理解也行。

有多种方法可以完成像平移这样的任务,但通常来说使用“矩阵变换”更简单,更不伤脑筋,尤其是多个对象,进行旋转、扭曲等复杂、或者组合操作等,这些操作如果不使用“矩阵变换”会非常非常麻烦。

这样,即可将该圆“平移”至屏幕正中心,执行效果如下:
技术图片

Draw方法完整代码:

ctx.Clear(Color.CornflowerBlue);
float r = Math.Min(ctx.Size.Width, ctx.Size.Height) / 2 - 5;
ctx.Transform = Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);
ctx.DrawEllipse(new Ellipse(Vector2.Zero, r, r), sender.XResource.GetColor(Color.Black), r/40);

画刻度

刻度就是线条,共60-12=48个分钟刻度和12个时钟刻度,其中分钟刻度较短,时钟刻度较长。

刻度的一端是沿着圆的边缘,另一端朝着圆的中心,边缘位置可以通过sin/cos等三角函数计算出来……呃,可能早忘记了,不怕,我们有“矩阵变换”。

利用矩阵变换,可以非常容易地完成这项工作:

for (var i = 0; i < 60; ++i)
{
    ctx.Transform = 
        Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) * 
        Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);
    ctx.DrawLine(new Vector2(r-r/30,0), new Vector2(r,0), form.XResource.GetColor(Color.Black),r/200);
}

执行效果如下:
技术图片

注意:此处用到了矩阵乘法:

Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) * 
Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);

注意乘法是有顺序的,这符合空间逻辑,可以这样想想,先旋转再平移,和先平移再旋转显然是有区别的。

然后再加上长时钟,只需在原代码基础上加个判断即可,如果i % 5 == 0,则为长时钟,粗细设置为r/100

for (var i = 0; i < 60; ++i)
{
    ctx.Transform =
        Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) *
        Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
    if (i % 5 == 0)
    {   // 时钟
        ctx.DrawLine(new Vector2(r - r / 15, 0), new Vector2(r, 0), form.XResource.GetColor(Color.Black), r/100);
    }
    else
    {   // 分钟
        ctx.DrawLine(new Vector2(r - r / 30, 0), new Vector2(r, 0), form.XResource.GetColor(Color.Black), r/200);
    }
}

执行效果如下:
技术图片

画时、分、秒钟

时、分、秒钟是动态的,必须随着时间变化而变化;其中时钟最短、最粗,分钟次之,秒钟最细长,然后时钟必须叠在分钟和秒钟之上。

用代码实现,可以先画秒钟、再画分钟和时钟,即可实现重叠效果。还可以通过设置一定的透明度和不同的颜色,可以让它们区分更明显。

获取当前时间可以通过DateTime.Now来完成,DateTime提供了时、分、秒和毫秒,可以轻松地计算各个指针应该指向的位置。

画秒钟的代码如下,显示为蓝色,长度为0.9倍半径,宽度为1/50半径:

// 秒钟
ctx.Transform = 
    Matrix3x2.Rotation(MathF.PI * 2 / 60 * time.Second) * 
    Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(Color.Blue), r/50);

效果如下:
技术图片

依法炮制,可以画出分钟和时钟:

// 分钟
ctx.Transform =
    Matrix3x2.Rotation(MathF.PI * 2 / 60 * time.Minute) *
    Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
ctx.DrawLine(Vector2.Zero, new Vector2(0, -r * 0.8f), form.XResource.GetColor(Color.Green), r / 35);

// 时钟
ctx.Transform =
    Matrix3x2.Rotation(MathF.PI * 2 / 12 * time.Hour) *
    Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
ctx.DrawLine(Vector2.Zero, new Vector2(0, -r * 0.7f), form.XResource.GetColor(Color.Red), r / 20);

效果如下:
技术图片

优化

其实到了这一步,已经是一个完整的,可运行的时钟了,但还能再优化优化。

半透明时钟

首先可以设置一定的半透明度,使三根钟重叠时不显得很突兀,代码如下:

var blue = new Color(red: 0.0f, green: 0.0f, blue: 1.0f, alpha: 0.7f);
ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(blue), r/50);

只需将原本的Color.Blue等颜色改成自定义,并且指定alpha参数为0.7(表示70%半透明)即可,效果如下:
技术图片

时钟两端的尖角或者圆角

Direct2D可以很方便地控制绘制的线段两端,有许多风格可供选择,具体可以参见CapStyle枚举:

public enum CapStyle
{
    /// <unmanaged>D2D1_CAP_STYLE_FLAT</unmanaged>
    Flat,
    /// <unmanaged>D2D1_CAP_STYLE_SQUARE</unmanaged>
    Square,
    /// <unmanaged>D2D1_CAP_STYLE_ROUND</unmanaged>
    Round,
    /// <unmanaged>D2D1_CAP_STYLE_TRIANGLE</unmanaged>
    Triangle
}

此处我们将使用Round用于做中心点,用Triangle用于做针尖,首先创建一个StrokeStyle对象:

using var clockLineStyle = new StrokeStyle(form.XResource.Direct2DFactory, new StrokeStyleProperties 
{ 
    StartCap = CapStyle.Round, 
    EndCap = CapStyle.Triangle, 
});

然后在调用ctx.DrawLine()时,将clockLineStyle参数传入最后一个参数即可:

ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(blue), r/50, clockLineStyle);

执行效果如下(可见有那么点意思了):
技术图片

平滑移动

Direct2D是实时渲染,我们不能浪费这实时二字带来的好处。更何况显示出来的时钟也不太合理,因为当时时间是9:57,此时时钟应该指向偏10点的位置。但现在由于忽略了这一分量,指向的是9点,这不符合实时的时钟。

因此计算小时角度时,可以加入分钟分量,计算分钟角度时,可以加入秒钟分量,计算秒钟角度时,也可以加入毫秒的分量。代码只需将矩阵变换代码稍微变动一点点即可:

// 秒钟
ctx.Transform = 
    Matrix3x2.Rotation(MathF.PI * 2 / 60 * (time.Second + time.Millisecond / 1000.0f)) * 
    Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
// ...
// 分钟
ctx.Transform =
    Matrix3x2.Rotation(MathF.PI * 2 / 60 * (time.Minute + time.Second / 60.0f)) *
    Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
// ...
// 时钟
ctx.Transform =
    Matrix3x2.Rotation(MathF.PI * 2 / 12 * (time.Hour + time.Minute / 60.0f)) *
    Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);

执行效果如下:
技术图片

阴影效果

和边缘刻度不一样,时钟多少是和窗口底层有距离的,因此怎么说也会显示一些阴影效果。这在Direct2D中也能轻易实现。代码会复杂一点,过程如下:

  • 先将创建一个临时的Bitmap1;
  • 将时、分、秒钟绘制到这个Bitmap中;
  • 创建一个ShadowEffect,传入这个Bitmap的内容生成一个阴影贴图;
  • 调用ctx.DrawImage()ShadowEffect先绘制;
  • 调用ctx.DrawBitmap()绘制最后真正的时、分、秒钟。

注意这个过程的顺序不能错,否则可能出现阴影显示的真实物体上的虚幻效果。

临时的Bitmap1ShadowEffect可以在CreateDeviceSizeResourcesReleaseDeviceSizeResources事件中创建和销毁:

Bitmap1 bitmap = null;
Shadow shadowEffect = null;

form.CreateDeviceSizeResources += (RenderWindow sender) =>
{
    bitmap = new Bitmap1(form.XResource.RenderTarget, form.XResource.RenderTarget.PixelSize,
        new BitmapProperties1(new PixelFormat(Format.B8G8R8A8_UNorm, SharpDX.Direct2D1.AlphaMode.Premultiplied),
        dpi, dpi, BitmapOptions.Target));
    shadowEffect = new SharpDX.Direct2D1.Effects.Shadow(form.XResource.RenderTarget);
};

form.ReleaseDeviceSizeResources += o =>
{
    bitmap.Dispose();
    shadowEffect.Dispose();
};

其中dpiDirect2DFactory.DesktopDpi.Width进行获取。

先将ctxTarget属性指定这个bitmap,但又同时保存老的Target属性用于稍后绘制:

var oldTarget = ctx.Target;
ctx.Target = bitmap;
ctx.BeginDraw();
{
    ctx.Clear(Color.Transparent);
    // 上文中的绘制时钟部分...
}
ctx.EndDraw();

注意ctx.Clear(Color.Transparent);是有必要的,否则将出现重影:
技术图片

这样即可将时钟单独绘制到bitmap中,对这个bitmap生成一个阴影:

shadowEffect.SetInput(0, ctx.Target, invalidate: new RawBool(false));

最后进行绘制,绘制时记得顺序:

ctx.Target = oldTarget;
ctx.BeginDraw();
{
    ctx.Transform = Matrix3x2.Identity;
    ctx.UnitMode = UnitMode.Pixels;
    ctx.DrawImage(shadowEffect);
    ctx.DrawBitmap(bitmap, 1.0f, InterpolationMode.NearestNeighbor);
    ctx.UnitMode = UnitMode.Dips;
}

注意两点:

首先,设置ctx.Transform = identity是有必要的,否则会上文的矩阵变换会一直保持作用;

然后两次设置ctx.UnitMode = pixels/dips也是有必要的,因为此时的绘制相当于是图片,按照默认的高DPI显示会导致显示模糊,因此显示图片时需要改成点对点显示;

效果如下:
技术图片

这个阴影默认是完全重叠的,现实中这种光线较小,加一点点平移效果可能会更好:

ctx.DrawImage(shadowEffect, new Vector2(r/20,r/20));

效果如下(显然更逼真了):
技术图片

更好的动画

有些时钟的秒确实是这样动的,但我印象中儿时的记忆,秒是一格一格地动,它是每动一下,停顿一下再动的那种感觉。

为了实现这种感觉,我加入了Windows Animation Manager的功能,这也是COM组件的一部分,我的FlysEngine中稍微封装了一下。使用时需要引入一个timer进行配合:

float secondPosition = DateTime.Now.Second;
Variable secondVariable = null;

var timer = new System.Windows.Forms.Timer { Enabled = true, Interval = 1000 };
timer.Tick += (o, e) =>
{
    secondVariable?.Dispose();
    secondVariable = form.XResource.CreateAnimation(secondPosition, DateTime.Now.Second, 0.2f);
};

form.FormClosing += delegate { timer.Dispose(); };

form.UpdateLogic += (window, dt) =>
{
    secondPosition = (float)(secondVariable?.Value ?? 0.0f);
};

注意此处我使用了UpdateLogic事件,这也是FlysEngine中封装的,可以在绘制呈现前执行一段更新逻辑的代码。

然后后面的绘制时,将获取秒的矩阵变换参数改为secondPosition变量即可:

ctx.Transform = 
    Matrix3x2.Rotation(MathF.PI * 2 / 60 * secondPosition) * 
    Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);

最后的执行效果如下:
技术图片

看起来一切正常,但……如果经过分钟满时,会出现这种情况:
技术图片

这是因为秒数从59秒到00秒的动画,是一个递减的过程(59->00),因此秒钟反向转了一圈,这明显不对。

解决这个问题可以这样考虑,如果当前是59秒,我们假装它是-1秒即可,这时计算角度不会出错,矩阵变换也没任何问题,通过C# 8.0强大的switch expression功能,可以不需要额外语句,在表达式内即可解决:

secondVariable = form.XResource.CreateAnimation(secondPosition switch
{
    59 => -1, 
    var x => x, 
}, DateTime.Now.Second, 0.2f);

最后的最后,最终效果如下:
技术图片

结语

说来这是我和我老婆的爱情故事。

记得6年前我老婆第一次来我出租房玩,然后……我给她感受了作为一个程序员的“浪漫”,花了一整个下午时间,把这个demo0开始做了出来给她看,不过那时我还在用C++。多年后和她说起这个入门demo,她仍记忆尤新。

本文中最终效果的代码,可以从我的github仓库下载:
https://github.com/sdcb/blog-data/blob/master/2019/20191021-render-clock-using-dotnet/clock.linq

有了.NET,那些代码已经远比当年简单,我的确是从这个例子出发,做出了许多好玩的东西,以后有机会我会慢慢介绍,敬请期待。

喜欢的朋友 请关注我的微信公众号:【DotNet骚操作】

技术图片

.NET实时2D渲染入门·动态时钟

标签:代码实现   和我   对象   forms   square   区分   简化   状态   基于   

原文地址:https://www.cnblogs.com/sdflysha/p/20191021-render-clock-using-dotnet.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!