win2d 渐变颜色
本文告诉大家如何在 win2d 使用渐变颜色
线条渐变
在 UWP 的 Win2d 使用渐变颜色需要 CanvasLinearGradientBrush 做颜色,本文告诉大家如何在 win2d 使用 CanvasLinearGradientBrush 做渐变。
渐变的颜色可以尝试打开任意一个控件,查看属性,就可以知道渐变的效果
渐变效果是渐变开始点,渐变结束点作为线性的渐变,也就是从点的开始到点的结束渐变。
中间在偏移多少的点,设置为中间颜色,这样两个颜色之间就会出现渐变的效果。如上面的图,只有第一个点和第二个点,两个点的颜色不相同,所以中间就会出现渐变的颜色。
在 win2d 渐变相对的是整个画布的颜色,也就是设置渐变的开始点不是相对于使用渐变的元素,而是画布的坐标。
请看图,使用的渐变是从(100,10)到(1000,1000),元素是从(300,100)开始画,元素的宽度是 300 高度是 200 ,所以实际上元素使用的渐变不是从开始的渐变开始算,而是拿到渐变的对应元素所在颜色
使用 CanvasLinearGradientBrush 需要 CanvasGradientStop 做中间的颜色,表示在相对于第一个点到最后一个点的多少颜色。
如使用下面代码,就是第一个点是白色,最后一个点是黑色。注意 Position 的范围是 0-1 ,也就是 0 就是第一个点,而 1 就是最后一个点
var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop
{
Position = 0,
Color = Colors.White
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
};
创建 CanvasLinearGradientBrush 需要 CanvasResourceCreator ,建议使用 win2d 的画板作为输入。
private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
// 忽略代码
var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop
{
Position = 0,
Color = Colors.White
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
};
var canvasLinearGradientBrush = new CanvasLinearGradientBrush(sender, canvasGradientStop)
{
StartPoint = new Vector2(0, 0),
EndPoint = new Vector2(0, 1000)
};
这里开始的点和结束的点都是相对于画布的坐标,而不是相对于使用颜色的元素。
这时创建一个矩形使用颜色,先设置他的坐标是 200,200,在点击按钮的时候移动矩形,可以看到矩形在移动的时候颜色在变化
args.DrawingSession.FillRectangle(new Rect(X, Y, 300, 300), canvasLinearGradientBrush);
如果需要在元素内做元素渐变,就需要修改 CanvasLinearGradientBrush 的 StartPoint 和 EndPoint,让 StartPoint 为元素的左上角加上的值。
也就是在原先的开始和最后的点都加上元素才可以进行元素的变化。
例如矩形是已知的,想要让矩形从上到下是渐变,就可以使用下面代码
var rect = new Rect(X, Y, 300, 300);
var canvasLinearGradientBrush = new CanvasLinearGradientBrush(sender, canvasGradientStop)
{
StartPoint = new Vector2(X, Y),
EndPoint = new Vector2(X, (float) (Y+rect.Height))
};
args.DrawingSession.FillRectangle(rect, canvasLinearGradientBrush);
从上面代码可以知道画出来的渐变需要开始的点和结束的点都是从 rect 计算,这样才可以做元素内的渐变
全部代码
xaml
xmlns:win2d="using:Microsoft.Graphics.Canvas.UI.Xaml"
忽略的代码
<win2d:CanvasControl Draw="CanvasControl_OnDraw"></
相信大家都可以创建一个 win2d 的控件,如果还不知道如何创建,请看win10 uwp win2d 入门 看这一篇就够了
在后台代码
private void CanvasControl_OnDraw(CanvasControl sender, CanvasDrawEventArgs args)
{
var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop()
{
Position = 0,
Color = Colors.White
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
};
var rect = new Rect(X, Y, 300, 300);
var canvasLinearGradientBrush = new CanvasLinearGradientBrush(sender, canvasGradientStop)
{
StartPoint = new Vector2(X, Y),
EndPoint = new Vector2(X, (float) (Y + rect.Height))
};
args.DrawingSession.FillRectangle(rect, canvasLinearGradientBrush);
}
private float X { set; get; } = 200;
private float Y { set; get; } = 200;
圆圈渐变
从上面的线条渐变可以知道使用的坐标都是画布,在圆圈也是,下面给大家看一下圆圈做出来的图片
使用这个颜色需要使用 CanvasRadialGradientBrush ,在创建的使用需要传入 CanvasResourceCreator 因为在 win2d 控件的画函数,所以使用下面代码
var canvasRadialGradientBrush = new CanvasRadialGradientBrush(sender, canvasGradientStop);
这里的 canvasGradientStop 还是上面的 canvasGradientStop ,但是需要知道这里的 Position 对应的是从圆心到最外面。
var canvasGradientStop = new CanvasGradientStop[2];
canvasGradientStop[0] = new CanvasGradientStop
{
Position = 0,
Color = Color.FromArgb(255, 210, 200, 162)
};
canvasGradientStop[1] = new CanvasGradientStop()
{
Position = 1,
Color = Colors.Black
};
所以我设置了圆心为 #D2C8A2
颜色,把最外面写为黑色,这样就可以做出上面看到的颜色
在圆圈需要设置圆心所在的坐标,这个坐标就是相对画布的,所以不是相对元素
为了让矩形的中心设置的颜色,我需要修改代码
var canvasRadialGradientBrush = new CanvasRadialGradientBrush(sender, canvasGradientStop)
{
Center = new Vector2((float) (rect.X + rect.Width / 2), (float) (rect.Y + rect.Height / 2)),
RadiusX = 300,
RadiusY = 300
};
因为可以使用椭圆,所以需要设置 RadiusX 就是圆的水平半径和 RadiusY 这个我也不知道什么的值。
这样可以做出圆心在矩形中心,半径为 300 的颜色,设置这个颜色,运行,就是上面的图片
参见:第四章(图形篇2) 几何图形CanvasGeometry
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系。
win2d 渐变颜色的更多相关文章
- 【原】Github系列之三:开源iOS下 渐变颜色的进度条WGradientProgress
概述 今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移 ...
- 渐变颜色的进度条WGradientProgress-备用
今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移动的, ...
- 32.QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序
由于上位机需要绘制电压电阻表盘,如下图所示: 后来,在网上找阿找,还是没找到满意的,索性自己来画控件算了,由于第一次画控件,所以花了我2天时间,才画好 效果图如下: 上图的所有颜色(包括滑动的渐变/单 ...
- CAGradientLayer渐变颜色动画
CAGradientLayer渐变颜色动画 或许你用过CAGradientLayer,你知道他是用于渐变颜色的,但你是否直到,CAGradientLayer的渐变颜色是可以动画的哦. 源码: // / ...
- 跟我一起玩Win32开发(23):渐变颜色填充
GradientFill函数可以对特定的矩形区域或者三角形区域进行渐变颜色的填充.我们先来看看GradientFill函数到底长得什么样子,帅不帅. BOOL GradientFill( _In_ ...
- iOS实现渐变颜色
下面是我的两种实现: 1.直接图片展示,注意图片的变形问题; 2.用CAGradientLayer渐变颜色实现; 代码如下: // // ViewController.m // ImageStrenc ...
- 好看的css渐变颜色大全网址
60个渐变颜色 https://webkul.github.io/coolhue/ 60个非常有用的CSS代码片段 https://baijiahao.baidu.com/s?id=160278735 ...
- 禁用ViewPager左右两侧拉到边界的渐变颜色
Android ViewPager在拖拽到左边和右边的时候,禁止显示黄色或者蓝色的渐变图片的解决方法 先说明哦,想看看院里的,从头开始看,否则,就拉到最下面啦.解决方案就在最下面. 修改前: 修改后: ...
- matlplotlib 为折线图填充渐变颜色
概要 本篇记录绘图时填充颜色时的一些常用设置,主要用到了 imshow,fill 函数. 填充图实例 填充的效果图如下: 图 1:渐变色效果图 可根据下方给出的代码进行自定义. #!/us ...
随机推荐
- FZU 1575 小学生的游戏【模拟二分】
某天,无聊的小斌叫上几个同学玩游戏,其中有比较笨的小兴,比较傻的小雪,可爱的小霞和自以为是的小楠.他们去找聪明的小明去给他们当裁判.判定谁取得游戏胜利. 而这个游戏是由小斌想个1到10000000的数 ...
- DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS
原文:DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- Vue. 之 Element获取table中选中的行
Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...
- phpcms推送文章同时推送自定义字段
首先进入phpcms后台,模型管理-字段管理里,新建字段,新建字段必须是主表字段,如图所示 2 来到网站根目录,寻找phpcms\modules\content\classes\push_api.cl ...
- 【JZOJ4923】【NOIP2017提高组模拟12.17】巧克力狂欢
题目描述 Alice和Bob有一棵树(无根.无向),在第i个点上有ai个巧克力.首先,两人个选择一个起点(不同的),获得点上的巧克力:接着两人轮流操作(Alice先),操作的定义是:在树上找一个两人都 ...
- nginx与apache
参考链接:https://www.cnblogs.com/changning0822/p/7844004.html
- python学习之旅1-2(基础知识)
三,python基础初识. 1.运行python代码. 在d盘下创建一个t1.py文件内容是: print('hello world') 打开windows命令行输入cmd,确定后 写入代码pytho ...
- webpack配置vue项目
npm init 安装webpack,webpack-cli 新建src目录,在src目录下新建main.js
- Ubuntu官方源
由于国内使用官方源导致下载速度慢等各方面原因,很多人将官方源替换成阿里源等,但是某些应用安装会报错.现将官方源分享如下: 备份当前源: 执行命令:# sudo cp /etc/apt/sources. ...
- 免费报名 | 汇聚HBase&大数据最前沿 Apache HBaseConAsia2019盛会火热来袭
Apache HBase介绍 Apache HBase是基于Apache Hadoop构建的一个高可靠性.高性能.可伸缩的分布式存储系统,它提供了大数据背景下的高性能的随机读写能力,HBase是Goo ...