win2d 画出好看的图形

本文告诉大家，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 画出好看的图形相关推荐

2018-9-1-win2d-画出好看的图形
title author date CreateTime categories win2d 画出好看的图形 lindexi 2018-09-01 16:25:40 +0800 2018-2-13 17 ...
简笔彩色圣诞树的python代码_python怎么画出好看的圣诞树
在python设计语言中,可以使用不同的符号绘制不同的图形,还可以使用符号组合成树形图形.那么,如何绘制好看的圣诞树呢? 工具/原料 python pycharm 截图工具 WPS 方法/步骤 1 打 ...
php 字体好看点,字丑不用怕，带你轻松画出好看字体！
Hi,我是秋小叶~ 在电子设备发达的今天,越来越少的人拿起笔写字.写字好看也成为了一项加分的技能,每每看到好看的字总是让人羡慕不已~ 而写字不好看的人,连自己都不愿意看到自己的字,也不喜欢记录,因此错 ...
用python如何画出好看的地图
最近正好在学空间数据处理,这次更一下用python如何画出好看的地图下面主要是用 folium poltly geopandas+matplotlib 三种方式绘制地图 1.folium impor ...
【论文写作】如何画出好看的图表
文章目录前言图表的作用什么时候需要图表? 表格的技巧技巧1 图的技巧技巧1 技巧2 基于论文中的优秀图表案例,总结出一些规律方法规律总结结论参考文献前言创作开始时间:2021年1 ...
用python绘制好看的图形_怎么用Python画出好看的词云图？
相信很多人在第一眼看到下面这些图时,都会被其牛逼的视觉效应所吸引,这篇文章就教大家怎么用Python画出这种图. 前期准备上面的这种图叫做词云图,主要用途是将文本数据中出现频率较高的关键词以可视化的 ...
如何用PPT画出好看的科研图
前言好看的科研图可以从前人的作品中进行借鉴,今天介绍2副精美的科研图以及他们在PPT中的绘制方法,话不多说,先摆上标准科研图 1. 黑色粗体边框以及淡填充颜色黑色粗体边框和淡填充颜色真的让矩形一下 ...
excel流程图连接线锁定_excel流程图难画？教你三个方法,15分钟就能画出好看高级的流程图...
一.Excel绘制 1.Smart Art 如果我们想要绘制流程图的话,其实是可以在Excel中完成的.利用Excel里面的[Smart Art]功能就能轻松搞定. 2.具体操作我们可以在Excel ...
echarts词云图形状_怎么用Python画出好看的词云图？
相信很多人在第一眼看到下面这些图时,都会被其牛逼的视觉效应所吸引,这篇文章就教大家怎么用Python画出这种图. 前期准备上面的这种图叫做词云图,主要用途是将文本数据中出现频率较高的关键词以可视化的 ...

win2d 画出好看的图形

win2d 画出好看的图形相关推荐

最新文章

热门文章