本文告诉大家,win2d 不需要从零开始做,以前做出来的很多库其实只需要做很小修改就可以做出好看的效果,而且用在 UWP 上。本文修改原先 大神写的 GDI 图形到 win2d 上,而且可以运行起来


一开始先发一张图片给大家看,本文就是告诉大家如何做出下面这张图的效果。

本文的算法是学习 山人大大的博客 http://blog.csdn.net/johnsuna/article/details/7981521 ,在他上面做一点修改做出来的。

可以看到他的博客使用的方法就是 GDI ,这是古时候使用的技术,而现在的 UWP 可以在以前的技术上,做一点修改就可以使用。

如果需要使用 win2d ,我希望大家先看这篇文章,本文不会继续告诉大家如何安装 win2d 。

首先需要了解一个技术,从 point 数组画出来。

如果给了一个 point 数组,那么可以使用这个数组画出形状。

在 win2d 下,可以使用 DrawGeometry 方法画出来。

可以看到 DrawGeometry 的第一个参数是 CanvasGeometry ,第二个参数是可以选的 ,一般使用颜色就好了。

但是 CanvasGeometry 是没有构造方法,所以 UWP 需要使用 CanvasGeometry.CreatePolygon 等方法创建出来。

本文因为需要把 point 数组显示,所以就使用了 CanvasGeometry.CreatePolygon 。这个方法的第一个参数是 ICanvasResourceCreator ,获得 ICanvasResourceCreator 很简单,传入 draw.Device 。

所以代码如下。

        private void Canvas_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
var draw = args.DrawingSession; var canvasGeometry = CanvasGeometry.CreatePolygon(draw.Device,
point.Select(temp => new Vector2((float) temp.X, (float) temp.Y)).ToArray());
draw.DrawGeometry(canvasGeometry, Color.FromArgb(255, 100, 100, 100));
}

那么 point 是如何得到,本文使用 http://blog.csdn.net/johnsuna/article/details/7981521 的方法获得。

        public static Point[] CreateStone(Point center, int outerRadius, int innerRadius, int arms)
{
int centerX = (int) center.X;
int centerY = (int) center.Y;
Point[] points = new Point[arms * 2];
double offset = Math.PI / 2;
double arc = 2 * Math.PI / arms;
double half = arc / 2;
for (int i = 0; i < arms; i++)
{
Random randomOuter = new Random((int) DateTime.Now.Ticks);
outerRadius = outerRadius -
randomOuter.Next((int) (innerRadius * 0.06 * new Random().Next(-20, 20) / 30d),
(int) (innerRadius * 0.08));
Random randomInner = new Random(Guid.NewGuid().GetHashCode());
innerRadius = innerRadius +
randomInner.Next((int) (innerRadius * 0.02 * new Random().Next(-100, 100) / 150d),
(int) (innerRadius * 0.08));
if (innerRadius > outerRadius)
{
int temp = outerRadius;
outerRadius = innerRadius;
innerRadius = temp;
}
double angleTemp = arc * randomInner.Next(-5, 5) / 10d;
var angle = i * arc;
angle += angleTemp;
points[i * 2].X = (float) (centerX + Math.Cos(angle - offset) * outerRadius) + 20;
points[i * 2].Y = (float) (centerY + Math.Sin(angle - offset) * outerRadius) + 20;
points[i * 2 + 1].X = (float) (centerX + Math.Cos(angle + half - offset) * innerRadius) + 20;
points[i * 2 + 1].Y = (float) (centerY + Math.Sin(angle + half - offset) * innerRadius) + 20;
} return points;
}

如果需要画出来图形,那么需要两个成员属性

        private List<Point[]> _points = new List<Point[]>();

        private Dictionary<string, Stone> _stone;

_points 就是所有画出的点,_stone 就是告诉说,如何画,因为可以传入的数值 角度,长宽,胖瘦,微移间隙 等的不同,可以画出不同的图形,所以需要通过一个属性来告诉如何画

    public class Stone
{
public static Point[] CreateStone(Point center, int outerRadius, int innerRadius, int arms)
{
int centerX = (int) center.X;
int centerY = (int) center.Y;
Point[] points = new Point[arms * 2];
double offset = Math.PI / 2;
double arc = 2 * Math.PI / arms;
double half = arc / 2;
for (int i = 0; i < arms; i++)
{
Random randomOuter = new Random((int) DateTime.Now.Ticks);
outerRadius = outerRadius -
randomOuter.Next((int) (innerRadius * 0.06 * new Random().Next(-20, 20) / 30d),
(int) (innerRadius * 0.08));
Random randomInner = new Random(Guid.NewGuid().GetHashCode());
innerRadius = innerRadius +
randomInner.Next((int) (innerRadius * 0.02 * new Random().Next(-100, 100) / 150d),
(int) (innerRadius * 0.08));
if (innerRadius > outerRadius)
{
int temp = outerRadius;
outerRadius = innerRadius;
innerRadius = temp;
}
double angleTemp = arc * randomInner.Next(-5, 5) / 10d;
var angle = i * arc;
angle += angleTemp;
points[i * 2].X = (float) (centerX + Math.Cos(angle - offset) * outerRadius) + 20;
points[i * 2].Y = (float) (centerY + Math.Sin(angle - offset) * outerRadius) + 20;
points[i * 2 + 1].X = (float) (centerX + Math.Cos(angle + half - offset) * innerRadius) + 20;
points[i * 2 + 1].Y = (float) (centerY + Math.Sin(angle + half - offset) * innerRadius) + 20;
} return points;
} public Func<float, float, int, int, Point> GetCenter;
public Func<float, int> GetinnerRadius;
public Func<float, int> GetouterRadius;
public int maxCorners = 18;
public int minCorners = 3;
}

所以在构造使用下面代码

        public MainPage()
{
InitializeComponent(); _stone = new Dictionary<string, Stone>()
{
{
"星", new Stone()
{
minCorners = 3,
maxCorners = 20,
GetCenter = (perX, perY, i, j) => new Point((int) (perX * j), (int) (perY * i)),
GetouterRadius = perX => (int) (perX * 0.18f),
GetinnerRadius = perX => (int) (perX * 0.06f)
}
},
};
}

在界面弄个按钮

        <xaml:CanvasControl x:Name="canvas" Margin="10,10,10,100" Height="600" ClearColor="White" Draw="Canvas_OnDraw"></xaml:CanvasControl>

         <Button Margin="10,600,10,10" Content="星" Click="Button_OnClick"></Button>           

然后写他的点击代码

        private void Button_OnClick(object sender, RoutedEventArgs e)
{
string str = ((Button) sender).Content?.ToString(); _points = new List<Point[]>(); int width = 500;
int height = 500;
int numX = 10;
int numY = 10;
float perX = width * 1f / numX;
float perY = height * 1f / numY; int minCorners = _stone[str].minCorners;
int maxCorners = _stone[str].maxCorners; int lastCorners = minCorners;
Random random = new Random();
for (int i = 0; i < numX; i++)
{
for (int j = 0; j < numY; j++)
{
int corners = random.Next(minCorners, maxCorners);
if (Math.Abs(corners - lastCorners) < (maxCorners - minCorners) / 2)
corners = RetrievRandomCorners(minCorners, maxCorners);
lastCorners = corners;
Point point = _stone[str].GetCenter(perX, perY, i, j);
int outerRadius = _stone[str].GetouterRadius(perX);
int innerRadius = _stone[str].GetinnerRadius(perX);
var points = Stone.CreateStone(point, outerRadius,
innerRadius, corners);
_points.Add(points);
}
} canvas.Invalidate();
}

尝试跑一下,点击一次按钮就会有不同的图形,是不是感觉世界都是假的。

是不是觉得这样已经完成?实际上不要忘记很重要一步,win2d在不使用需要自己手动把他从视觉树释放,所以在后台代码页面跳出使用下面代码


private void Page_OnUnloaded(object sender, RoutedEventArgs e)
{
canvas.RemoveFromVisualTree();
canvas = null;
}

感觉这个星期的时间很快,我仔细想了从 2015 年开始 UWP 的研究到现在,实际我一个软件都没做出来,就是在写写博客。如果你觉得有哪个地方不想去看,或者垃圾微软写的不太好的,但你不想去研究的,就可以告诉我,我去研究一下,如果我学会了,我就会写一篇博客,虽然我写出来肯定比不上微软的。

代码:https://github.com/lindexi/UWP/tree/master/uwp/control/win2d/Dclutterpalan


本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系

win2d 画出好看的图形的更多相关文章

  1. 2018-9-1-win2d-画出好看的图形

    title author date CreateTime categories win2d 画出好看的图形 lindexi 2018-09-01 16:25:40 +0800 2018-2-13 17 ...

  2. wpf 在不同DPI下如何在DrawingVisual中画出清晰的图形

    环境Win10 VS2017 .Net Framework4.7.1   本文仅讨论在DrawingVisual中进行的画图.   WPF单位,系统DPI,显示器DPI三者的定义及关系 WPF单位:一 ...

  3. 用CSS画出好玩的图形

    1.上三角 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px so ...

  4. win2d 通过 CanvasActiveLayer 画出透明度和裁剪

    本文告诉大家如果在 UWP 的 win2d 通过 CanvasActiveLayer 创建一层,在这里画出的图片有透明度或者裁剪 在 win2d 如果需要对某个元素裁剪,可以使用很多方法,本文只是告诉 ...

  5. 使用CAShapeLayer与UIBezierPath画出想要的图形

    使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 步骤: 1.新建UIBezierPath对象bezierPath 2.新建CAS ...

  6. opengl画不出直线 线段 坐标轴 却能画出其他图形的坑

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12054507.html 好多次都是画坐标轴的三条直线画不出来,虽然最后都解决了  但是还是耽误 ...

  7. matlplotlib根据函数画出图形

    根据函数画出函数的轨迹 import matht = np.linspace(0, math.pi, 1000)x = np.sin(t)y = np.cos(t) + np.power(x, 2.0 ...

  8. 利用python画出动态高优先权优先调度

    之前写过一个文章. 利用python画出SJF调度图 动态高度优先权优先调度 动态优先权调度算法,以就绪队列中各个进程的优先权作为进程调度的依据.各个进程的优先权在创建进程时所赋予,随着进程的推进或其 ...

  9. H5坦克大战之【画出坦克】

    今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...

随机推荐

  1. Eclipse Jobs 和后台进程

    Eclipse后台进程 1.主线程(Main thread) 一个Eclipse客户端只能跑一个进程,但却可以创建很多线程. 在Eclipse框架中,会用一个单线程去运行所有的代码指令,这个线程执行客 ...

  2. LeetCode136 Single Number, LeetCode137 Single Number II, LeetCode260 Single Number III

    136. Single Number Given an array of integers, every element appears twice except for one. Find that ...

  3. LintCode_420 报数

    题目 报数指的是,按照其中的整数的顺序进行报数,然后得到下一个数.如下所示: 1, 11, 21, 1211, 111221, ... 1 读作 "one 1" -> 11. ...

  4. python 正确地初始化对象

  5. python 利用csv模块导入数据

  6. oracle审计的格式

    audit table; audit table by xxx(username); audit table by xxx(username) whenever not successful; 系统表 ...

  7. BZOJ4241历史研究题解

    题目连接 很显然可以想到分块,用f[i][j]表示块i到块j的ans,然后发现答案一定是f[i][j] 或者其他在边角出现的数字 我们在记下g[i][j]从开头到块i中的数字j出现的次数 这样就每一次 ...

  8. bzoj2424 订货

    Description 某公司估计市场在第i个月对某产品的需求量为Ui,已知在第i月该产品的订货单价为di,上个月月底未销完的单位产品要付存贮费用m,假定第一月月初的库存量为零,第n月月底的库存量也为 ...

  9. 程序中提醒用户进去App Store 评分 跳转 代码

           大家都知道,评论和评分是决定app在appstore中排名的重要因素,但是大部分用户下载安装APP后却不会去点评,所以添加提示用户去点评的功能是很必要的,如下是代码: 很多用户用了好软件 ...

  10. Mac如何通过终端开启/关闭SSH?Mac新手教程

    Mac如何通过终端开启/关闭SSH?Mac新手教程   SSH(Secure Shell)是一种通用的.功能强大的.基于软件的网络安全解决方案.计算机每次向网络发送数据时,SSH都会自动对其进行加密. ...