本文告诉大家如何在 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 渐变颜色的更多相关文章

  1. 【原】Github系列之三:开源iOS下 渐变颜色的进度条WGradientProgress

    概述 今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移 ...

  2. 渐变颜色的进度条WGradientProgress-备用

    今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移动的, ...

  3. 32.QT-制作最强电压电阻表盘,可以自定义阴影效果,渐变颜色,图标,文字标签等-附带demo程序

    由于上位机需要绘制电压电阻表盘,如下图所示: 后来,在网上找阿找,还是没找到满意的,索性自己来画控件算了,由于第一次画控件,所以花了我2天时间,才画好 效果图如下: 上图的所有颜色(包括滑动的渐变/单 ...

  4. CAGradientLayer渐变颜色动画

    CAGradientLayer渐变颜色动画 或许你用过CAGradientLayer,你知道他是用于渐变颜色的,但你是否直到,CAGradientLayer的渐变颜色是可以动画的哦. 源码: // / ...

  5. 跟我一起玩Win32开发(23):渐变颜色填充

    GradientFill函数可以对特定的矩形区域或者三角形区域进行渐变颜色的填充.我们先来看看GradientFill函数到底长得什么样子,帅不帅. BOOL GradientFill( _In_   ...

  6. iOS实现渐变颜色

    下面是我的两种实现: 1.直接图片展示,注意图片的变形问题; 2.用CAGradientLayer渐变颜色实现; 代码如下: // // ViewController.m // ImageStrenc ...

  7. 好看的css渐变颜色大全网址

    60个渐变颜色 https://webkul.github.io/coolhue/ 60个非常有用的CSS代码片段 https://baijiahao.baidu.com/s?id=160278735 ...

  8. 禁用ViewPager左右两侧拉到边界的渐变颜色

    Android ViewPager在拖拽到左边和右边的时候,禁止显示黄色或者蓝色的渐变图片的解决方法 先说明哦,想看看院里的,从头开始看,否则,就拉到最下面啦.解决方案就在最下面. 修改前: 修改后: ...

  9. matlplotlib 为折线图填充渐变颜色

    概要   本篇记录绘图时填充颜色时的一些常用设置,主要用到了 imshow,fill 函数.   填充图实例   填充的效果图如下: 图 1:渐变色效果图 可根据下方给出的代码进行自定义. #!/us ...

随机推荐

  1. FZU 1575 小学生的游戏【模拟二分】

    某天,无聊的小斌叫上几个同学玩游戏,其中有比较笨的小兴,比较傻的小雪,可爱的小霞和自以为是的小楠.他们去找聪明的小明去给他们当裁判.判定谁取得游戏胜利. 而这个游戏是由小斌想个1到10000000的数 ...

  2. DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS

    原文:DirectX11笔记(七)--Direct3D渲染3--INDICES AND INDEX BUFFERS 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  3. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  4. phpcms推送文章同时推送自定义字段

    首先进入phpcms后台,模型管理-字段管理里,新建字段,新建字段必须是主表字段,如图所示 2 来到网站根目录,寻找phpcms\modules\content\classes\push_api.cl ...

  5. 【JZOJ4923】【NOIP2017提高组模拟12.17】巧克力狂欢

    题目描述 Alice和Bob有一棵树(无根.无向),在第i个点上有ai个巧克力.首先,两人个选择一个起点(不同的),获得点上的巧克力:接着两人轮流操作(Alice先),操作的定义是:在树上找一个两人都 ...

  6. nginx与apache

    参考链接:https://www.cnblogs.com/changning0822/p/7844004.html

  7. python学习之旅1-2(基础知识)

    三,python基础初识. 1.运行python代码. 在d盘下创建一个t1.py文件内容是: print('hello world') 打开windows命令行输入cmd,确定后 写入代码pytho ...

  8. webpack配置vue项目

    npm init 安装webpack,webpack-cli 新建src目录,在src目录下新建main.js

  9. Ubuntu官方源

    由于国内使用官方源导致下载速度慢等各方面原因,很多人将官方源替换成阿里源等,但是某些应用安装会报错.现将官方源分享如下: 备份当前源: 执行命令:# sudo cp /etc/apt/sources. ...

  10. 免费报名 | 汇聚HBase&大数据最前沿 Apache HBaseConAsia2019盛会火热来袭

    Apache HBase介绍 Apache HBase是基于Apache Hadoop构建的一个高可靠性.高性能.可伸缩的分布式存储系统,它提供了大数据背景下的高性能的随机读写能力,HBase是Goo ...