2018-8-29-win2d-渐变颜色
title | author | date | CreateTime | categories |
---|---|---|---|---|
win2d 渐变颜色
|
lindexi
|
2018-08-29 08:58:14 +0800
|
2018-7-7 20:5:36 +0800
|
UWP 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
2018-8-29-win2d-渐变颜色相关推荐
- win2d 渐变颜色
本文告诉大家如何在 win2d 使用渐变颜色 线条渐变 在 UWP 的 Win2d 使用渐变颜色需要 CanvasLinearGradientBrush 做颜色,本文告诉大家如何在 win2d 使用 ...
- Python Matplotlib绘制渐变色柱状图(bar)并加边框和配置渐变颜色条(colorbar)
热力图是数据分析的常用方法,通过色差.亮度来展示数据的差异.易于理解.目前,常见的是看数据表里多个特征两两的相关度热力图. 基于此思想,做出柱状热力图,用于展现单个特征针对整体的相关度,以此列出所有特 ...
- 【原】Github系列之三:开源iOS下 渐变颜色的进度条WGradientProgress
概述 今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有"B格".它拥有渐变的颜色, ...
- 【SeeMusic】音符方块颜色设置 ( 单一颜色设置 | 多彩音符设置 | 定时变色设置 | 渐变颜色 | 分轨道提示 )
SeeMusic 系列文章目录 [SeeMusic]下载安装并注册 SeeMusic 软件 [SeeMusic]购买付费版本 ( 进入购买页面 | 购买流程 ) [SeeMusic]创建 SeeMus ...
- 【跃迁之路】【448天】刻意练习系列207(2018.04.29)
@(跃迁之路)专栏 叨叨两句 技术的精进不能只是简单的刷题,而应该是不断的"刻意"练习 该系列改版后正式纳入[跃迁之路]专栏,持续更新 一.SQL [跃迁之路]Java基础--SQ ...
- .QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序
.QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序 qt自定义控件-圆形通用指示表盘
- C#实现渐变颜色的Windows窗体控件
C#实现渐变颜色的Windows窗体控件! 1,定义一个BaseFormGradient,继承于System.Windows.Forms.Form 2,定义三个变量: private Color _C ...
- ai怎么渐变颜色_Ai渐变插画怎么丰富细节
此次教程只需小伙伴对AI软件有基本的操作了解就可以完成,易上手容易理解. 止疼药瓶子 1.新建画布800X600,绘制止疼药瓶子轮廓 用矩形工具(W)绘制止疼药瓶子轮廓,圆角处用直接选择工具(A)选择 ...
- unity 渐变消失_Unity3D实现渐变颜色效果|chu
基于unity3D实现渐变颜色的简单脚本,代码很少,就不废话了,直接上代码和效果图. 效果图: using System; using System.Collections.Generic; usin ...
- 训练日志 2018.9.29
电脑终于拿回来了,重新配环境配了一下午,蛋疼的一批 明天上午上完课国庆假期算正式开始了,之前电脑坏了欠下的东西不少,状压DP一个题也没做,Java作业还没写,青岛赛.CCPC的总结也要补,事情总是要一 ...
最新文章
- php一个数组赋值给对象,php数组与对象相互转换方法
- 找不到工作,一程序员去帮屠夫卖猪肉 | 每日趣闻
- spring 托管bean_在非托管对象中使用Spring托管Bean
- HDU 3790 最短路径问题
- Java中的Selenium / WebDriver示例
- 按大小排序php,php中按大小进行排序的函数有哪些
- Postgresql使用coalesce实现类似oracle的NVL方法
- python回车换行怎么不行_解决pycharm回车之后不能换行或不能缩进的问题
- 代写python作业 费用_代写dither method作业、代做python程序设计作业、代写python语言作业、代做Image Dithering作...
- 1688商品类目API接口-(item_cat_get-获得1688商品类目接口)
- Python -- 网络编程 -- 抓取网页图片 -- 豆瓣妹子
- 机械制图标准化基础知识简介
- 振荡电路设计原理与设计
- civil 3d 计算机配置,Civil 3D技巧:如果做到设计文件的高效出图?
- Gson解析空字符串异常的处理
- 关于织梦后台dedecms管理员后台权限、新增后台管理员的功能
- 入门级深度学习服务器配置方案
- 【英语】英语写作——三段式开头
- JSP项目进度管理系统myeclipse开发sql数据库BS模式java编程网页结构
- unity3d:Matrix4x4矩阵位移,缩放,旋转