.NET绘制旋转太极图
前言
我之前发了一篇《 用.NET写“算命”程序
》的文章,但有人纷纷提出了质疑,认为没有“科学”( mi
xin
)依据????。
所谓“太极生两仪,两仪生四象,四象生八卦,八卦定吉凶,吉凶生大业”,因此,我只要证明 .NET
可以将太极图绘制出来,不就说明 .NET
算命的“科学”是有依据了嘛????
首先来看一下最终效果:
太极的构成
仔细观察这个太极图,它分为以下几部分:
基本窗口
白色左圆、黑色右圆
白色左圆中的黑色
1/4
圆,黑色右圆中的白色1/4
圆黑色、白色半圆
旋转动画
因此制作时,我们从这些方面着手制作。
基本窗口
首先需要一个渲染窗口,使用 FlysEngine.Desktop
,可以轻松制作一个:
using var taiji = new RenderWindow();
taiji.Draw += (o, e) =>
{e.Clear(Color.CornflowerBlue);
};
RenderLoop.Run(taiji, () => taiji.Render(1, 0));
运行效果如下:
白色左圆、黑色右圆
Direct2D
有绘制圆和非常简单的 API
,可以直接调用,但在此之前需要先确定该圆的半径,我们最窗口 宽
和 高
的较小值减去 5
单位的边距( Margin
),顺便计算一下中心点,以便于稍后做矩阵变换:
float GetMinEdge() => Math.Min(taiji.XResource.RenderTarget.Size.Width, taiji.XResource.RenderTarget.Size.Height);
Vector2 GetCenter() => new Vector2(taiji.XResource.RenderTarget.Size.Width / 2, taiji.XResource.RenderTarget.Size.Height / 2);
float GetR() => (GetMinEdge() - 5.0f) / 2;
顺便定义一下黑、白两种颜色:
Color Color_Black = Color.Black;
Color Color_White = Color.White;
所以绘制的代码如下:
float scale = GetR();
Vector2 center = GetCenter();
Matrix3x2 rotation = Matrix3x2.Rotation(angle);
ctx.Transform = rotation * Matrix3x2.Scaling(scale, scale) * Matrix3x2.Translation(center);
ctx.FillEllipse(new Ellipse(new Vector2(0.5f, 0), 0.5f, 0.5f), o.XResource.GetColor(Color_Black));
ctx.FillEllipse(new Ellipse(new Vector2(-0.5f, 0), 0.5f, 0.5f), o.XResource.GetColor(Color_White));
此时,运行效果如下:
1/4圆
1/4
圆是太极的精髓之一,正是它代表了阴与阳的互生互补。
其本质就是圆的中心还有另一个颜色的圆,代码相对简单,只需在上文代码中添加如下即可:
ctx.FillEllipse(new Ellipse(new Vector2(0.5f, 0), 0.25f, 0.25f), o.XResource.GetColor(Color_White));
ctx.FillEllipse(new Ellipse(new Vector2(-0.5f, 0), 0.25f, 0.25f), o.XResource.GetColor(Color_Black));
此时,运行效果如下:
黑白半圆
还需要最后临门一脚,就是需要一个更大的圆,包含这个图形。仔细想想,其实这个“更大的圆”是两个不同颜色的半圆,在 Direct2D
中,需要使用 Geometry
来实现,首先来定义这个半圆:
using var arc = new PathGeometry(taiji.XResource.Direct2DFactory);
var sink = arc.Open();
sink.BeginFigure(new Vector2(-1f, 0), FigureBegin.Filled);
sink.AddArc(new ArcSegment
{Point = new Vector2(1f, 0), Size = new Size2F(1f, 1f), RotationAngle = 0.0f, SweepDirection = SweepDirection.Clockwise, ArcSize = ArcSize.Large,
});
sink.EndFigure(FigureEnd.Open);
sink.Close();
然后在 Draw
事件的 Clear
之后,首先绘制黑色上半圆:
ctx.Transform = Matrix3x2.Scaling(scale, scale) * Matrix3x2.Translation(center);
ctx.FillGeometry(arc, o.XResource.GetColor(Color_Black));
运行效果如下:
然后再绘制白色下半圆,注意代码也要写在绘制左右圆的代码之前:
ctx.Transform = Matrix3x2.Scaling(scale, scale) * Matrix3x2.Rotation((float)Math.PI) * Matrix3x2.Translation(center);
ctx.FillGeometry(arc, o.XResource.GetColor(Color_White));
运行效果如下:
此时就已经是一个完整的太极图标了,最后还需要添加旋转动画。
旋转动画
动画的本质,是图形的坐标、旋转随着时间的移动,而有规律的移动。这里特指旋转,我们定义每秒旋转 0.25
圈(即每 4
秒转一圈):
const float Speed = 0.25f;
转换为旋转角,需要在 UpdateLogic
中添加代码如下:
float angle = 0.0f;
taiji.UpdateLogic += (w, dt) =>
{angle += MathUtil.Mod2PI(Speed * MathUtil.TwoPi * dt);
};
最后需要将旋转角 angle
转换为矩阵变换,注意在操作矩阵乘法时,旋转往往要放在第一位,否则旋转中心点可能会出现意外,代码如下,用于替换上文中的直接绘制代码:
Matrix3x2 rotation = Matrix3x2.Rotation(angle);
ctx.Transform = rotation * Matrix3x2.Scaling(scale, scale) * Matrix3x2.Translation(center);
ctx.FillGeometry(arc, o.XResource.GetColor(Color_Black));
ctx.Transform = rotation * Matrix3x2.Scaling(scale, scale) * Matrix3x2.Rotation((float)Math.PI) * Matrix3x2.Translation(center);
ctx.FillGeometry(arc, o.XResource.GetColor(Color_White));
ctx.Transform = rotation * Matrix3x2.Scaling(scale, scale) * Matrix3x2.Translation(center);
最后,运行效果如下:
总结
前言中关于“科学”的论述,只是开个玩笑……但绘制这个太极图形,还是需要一些技巧的。
本文中的所有可直接运行的代码,已经上传到我的 Github
:https://github.com/sdcb/blog-data/tree/master/2020/20200119-draw-taiji-using-dotnet
喜欢的朋友请关注我的微信公众号:【DotNet骚操作】
.NET绘制旋转太极图相关推荐
- Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: 1 <script type="text/java ...
- HTML 5:绘制旋转的太极图
2019独角兽企业重金招聘Python工程师标准>>> HTML: <!DOCTYPE><html><head><meta charset= ...
- python太极代码_Python turtle绘制阴阳太极图代码解析
本文详细分析如何使用python turtle绘制阴阳太极图,先来分解这个图形,图片中有四种颜色,每条曲线上的箭头表示乌龟移动的方向,首先从中心画一个半圆(红线),以红线所示圆的直径作半径画一个校园, ...
- 安卓学习笔记38:利用OpenGL ES绘制旋转立方体
文章目录 零.学习目标 一.绘制图形基本步骤 二.绘制旋转立方体 (一)运行效果 (二)实现步骤 1.创建安卓应用[DrawRotatingCube] 2.建模:立方体类 - Cube 3.渲染:立方 ...
- java如何画百分比圆环_canvas绘制旋转的圆环百分比进度条
作者:依然 | 时间:2015-05-29 | 阅读:122 canvas绘制旋转的圆环百分比进度条 从上一篇的文章使用HTML5 Canvas arc()绘制圆形/圆环 我们了解到了怎么使用ca ...
- MATLAB表白玫瑰花绘制——旋转玫瑰、蓝色玫瑰
MATLAB表白玫瑰花绘制--旋转玫瑰.蓝色玫瑰 搬运不易,路过的各位大佬请点个赞 MATLAB表白玫瑰花绘制--旋转玫瑰.蓝色玫瑰 MATLAB表白玫瑰花绘制--旋转玫瑰.蓝色玫瑰 一.旋转玫瑰花绘 ...
- MFC---定时器和双缓冲机制绘制旋转的金刚石图案
双缓冲原理 MFC中绘制动画的基本思路是在固定时间间隔内绘制图像,然后擦除旧图像再绘制新图像,这样连续 起来就在人类的视觉上形成动画.为了实现这种"绘制-擦除-再绘制&quo ...
- MFC绘制旋转Bezier曲面
MFC绘制旋转Bezier曲面 给出一条Bezier曲线,通过旋转64个控制点,4个曲面片,绘制出一个完整曲面 已知四个控制点:(50,100)(150,70)(120,-30)(90,-80) 理论 ...
- 利用QPainter基本函数+rotate/translate绘制旋转图形的方法
通常利用QPainter的drawXXX函数绘制的图形都是不带旋转的,而QPainter的rotate函数解释如下: void QPainter::rotate(qrealangle) Rotates ...
最新文章
- 财务学习mysql_从零开始学 MySQL - 前言
- 选择创业项目的基础——适合自己的才是最好的
- 手下两个应届生,一个踏实喜欢加班,一个技术强挑活,怎么选?
- 对比3家平台,我总结了疫情数据可视化的8点经验
- mojoportal学习——文章翻译之多行横排菜单
- Hibernate本地SQL查询SQLQuery
- Cluster_analysis
- JVM(4)——对象访问
- 小创意,大世界——休闲游戏开发者指南
- Discuz2.5菜鸟解析-2
- Linux下使用nohup运行python脚本报错:Import error: No module named numpy问题解决
- Android 用webService产生java.lang.ClassCastException: org.ksoap2.serialization.SoapPrimitive错误的解决 ....
- 完全卸载exchange2010
- android反翻译工具下载,安卓dex反编译工具(dex-translator)下载_安卓dex反编译工具(dex-translator)官方下载-太平洋下载中心...
- iOS 常用三方集合
- PHP上传ZIP压缩包并解压
- 安卓-恢复模式--Recovery
- 9-2 time类的加工
- PowerPoint Quick Tips PowerPoint快速提示 Lynda课程中文字幕
- google检索技巧-从菜鸟到黑客
热门文章
- 通用旗下Cruise推迟年底前推出自动驾驶出租车服务计划
- 前沿技术|人工智能的崛起和发展历程
- 深度强化学习算法(朴素DQN,DDQN,PPO,A3C等)比较与实现
- vscode php中文乱码,vscode打开乱码怎么办
- 用计算机唱歌弹奏china,如何用电脑进行吉它弹唱录音!
- 祁隆在徒弟面前自抬身价三十万,冷漠高安龙梅子段位是其四分之一
- USB存储设备禁用与解锁
- 牛掰!C++大神一小时打造千里眼远程计算机视频监控系统!
- python雪花曲线实验报告_探究“雪花”曲线
- 简单Android app之 一键签到 开发日记