2019-8-31-win2d-通过-CanvasActiveLayer-画出透明度和裁剪
title | author | date | CreateTime | categories |
---|---|---|---|---|
win2d 通过 CanvasActiveLayer 画出透明度和裁剪
|
lindexi
|
2019-08-31 08:52:36 +0800
|
2019-1-17 21:4:6 +0800
|
UWP win2d
|
本文告诉大家如果在 UWP 的 win2d 通过 CanvasActiveLayer 创建一层,在这里画出的图片有透明度或者裁剪
在 win2d 如果需要对某个元素裁剪,可以使用很多方法,本文只是告诉大家使用图层的方法裁剪。如果熟悉 WPF 那么对于这个裁剪将会比较简单,当然没有接触过 WPF 的小伙伴也可以继续看,如果有发现不懂的,欢迎在评论喷
首先创建一个 win2d 的控件,如何安装 win2d 请看 win10 uwp win2d 入门 看这一篇就够了
<xaml:CanvasVirtualControl x:Name="Canvas" RegionsInvalidated="Canvas_OnRegionsInvalidated"></xaml:CanvasVirtualControl>
本文创建的是 CanvasVirtualControl 关于这个控件请看 win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl
在后台代码创建 Canvas_OnRegionsInvalidated
方法,然后就是开始本文的例子
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{ }
在这个方法里面创建一个矩形,然后画出来
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (var ds = sender.CreateDrawingSession(args.VisibleRegion))
{
ds.FillGeometry(rectangle, Color.FromArgb(128, 0, 0, 255));
}
}
现在运行代码可以看到显示一个矩形,如果现在代码无法运行,那么怎么没开光
然后再创建一个椭圆,画出椭圆
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
var ellipse = CanvasGeometry.CreateEllipse(sender, 100, 100, 50, 50);
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (var ds = sender.CreateDrawingSession(args.VisibleRegion))
{
ds.FillGeometry(ellipse, Colors.Black);
}
}
运行代码可以看到界面有一个椭圆
下面告诉大家如何使用 CanvasActiveLayer 的方法
创建 CanvasActiveLayer 方法
在 Canvas_OnRegionsInvalidated
方法可以通过 CreateDrawingSession 创建 CanvasDrawingSession 方法
在 CanvasDrawingSession 有 CreateLayer 方法,这里面有很多重载,下面将会通过修改透明度的方法告诉大家如何使用 CanvasActiveLayer 方法
在 CreateLayer 拿到的返回值进行 using 在里面写的代码将会被添加到这一个 Layer 在外面写的代码将不会添加到 Layer 里面
using (var canvasActiveLayer = ds.CreateLayer(参数))
{
// 这里面写的代码会在这个 Layer 里面
}
// 在外面写的代码不会添加到这个 layer 里面
透明度
首先创建 CanvasActiveLayer 方法
private void Canvas_OnRegionsInvalidated(CanvasVirtualControl sender, CanvasRegionsInvalidatedEventArgs args)
{
var ellipse = CanvasGeometry.CreateEllipse(sender, 100, 100, 100, 100);
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (var ds = sender.CreateDrawingSession(args.VisibleRegion))
{
using (var canvasActiveLayer = ds.CreateLayer(0.6f))
{
// 在这里写的代码会添加 0.6 透明
}
// 在这里写的代码是普通的
}
}
这里的 CreateLayer 有很多重载,现在使用的是一个传入透明度的方法,这里的透明度使用 [0,1] 的范围
在 using 里面画出的内容就会加上了这里设置的值,如我需要画出 0.6 的圆形
using (var canvasActiveLayer = ds.CreateLayer(0.6f))
{
ds.FillGeometry(ellipse, Colors.Black);
}
从代码可以看到 CreateLayer 的设计是创建一个简单的方法,在这个方法里面可以快速设置画出的界面,同时在这个方法外面将会和之前一样
透明度图片
除了直接设置透明度的值,还可以设置透明度的 Brush 方法,最简单的是设置纯色的 Brush 请看代码
using (var canvasActiveLayer = ds.CreateLayer(new CanvasSolidColorBrush(sender,Colors.Chocolate)))
{
ds.FillGeometry(ellipse, Colors.Black);
}
现在运行代码可以看到和之前没有什么不同的,因为这个透明度是不管使用什么的 Brush 有用的是颜色的透明一个值
如我使用 Colors.Chocolate 和使用黑色是一样的,但是如果我修改了透明如下面的代码
现在运行代码可以看到圆形是半透明的
在这里使用纯色的图片是没有什么用的,因为无论什么的颜色都是使用颜色的一个值,所以纯色和直接设置透明的是一样的,但是 Brush 可以是其他图片或者渐变,请看代码
var canvasGradientStopList = new CanvasGradientStop[]
{
new CanvasGradientStop()
{
Color = Color.FromArgb(0, 0, 0, 0),
Position = 0
}, new CanvasGradientStop()
{
Color = Color.FromArgb(255, 0, 0, 0),
Position = 1
},
}; var canvasLinearGradientBrush =
new CanvasLinearGradientBrush(sender, canvasGradientStopList)
{
StartPoint = new Vector2(0, 60),
EndPoint = new Vector2(100, 60)
}; using (ds.CreateLayer(canvasLinearGradientBrush))
{
ds.FillGeometry(ellipse, Colors.Black);
}
上面使用了渐变颜色,更多关于渐变请看 win2d 渐变颜色
如果有一些图片作为 Brush 也是可以,这里就不在继续说了
裁剪
除了设置透明度,还可以设置裁剪,为什么刚才可以设置纯色就是在这里用到的,虽然纯色只是使用透明但是可以在裁剪的时候,方便只是进行裁剪的方法。在只是进行裁剪的时候只需要传入一个纯色的 Brush 就可以。
最简单的裁剪是矩形裁剪,刚才都是画出一个圆,那么对这个圆进行矩形裁剪
现在运行代码可以看到界面是一个矩形
但是如果只能进行矩形裁剪,那么会觉得win2d不够好用,除了矩形,还可以使用任何的 Geometry 裁剪,请看代码
var ellipse = CanvasGeometry.CreateEllipse(sender, 100, 100, 50, 50);
var rectangle = CanvasGeometry.CreateRectangle(sender, 10, 10, 100, 100);
using (CanvasDrawingSession ds = sender.CreateDrawingSession(args.VisibleRegion))
{
var canvasGradientStopList = new CanvasGradientStop[]
{
new CanvasGradientStop()
{
Color = Color.FromArgb(0, 0, 0, 0),
Position = 0
}, new CanvasGradientStop()
{
Color = Color.FromArgb(255, 0, 0, 0),
Position = 1
},
}; var canvasLinearGradientBrush =
new CanvasLinearGradientBrush(sender, canvasGradientStopList)
{
StartPoint = new Vector2(0, 60),
EndPoint = new Vector2(100, 60)
}; using (ds.CreateLayer(canvasLinearGradientBrush, rectangle))
{
ds.FillGeometry(ellipse, Colors.Black);
}
}
运行一下发现渐变的圆被矩形裁剪,这里传入的是矩形实际可以按照自己需要传入任意的 Geometry 做出好看界面
关于如何做出一个 Geometry 和更多博客请看
win2d 毛玻璃:win10 uwp 毛玻璃
2019-8-31-win2d-通过-CanvasActiveLayer-画出透明度和裁剪的更多相关文章
- win2d 通过 CanvasActiveLayer 画出透明度和裁剪
本文告诉大家如果在 UWP 的 win2d 通过 CanvasActiveLayer 创建一层,在这里画出的图片有透明度或者裁剪 在 win2d 如果需要对某个元素裁剪,可以使用很多方法,本文只是告诉 ...
- win2d 画出好看的图形
本文告诉大家,win2d 不需要从零开始做,以前做出来的很多库其实只需要做很小修改就可以做出好看的效果,而且用在 UWP 上.本文修改原先 大神写的 GDI 图形到 win2d 上,而且可以运行起来 ...
- 纯CSS3画出小黄人并实现动画效果
前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
- 用JAVA中BufferedImage画出漂亮的验证码点击变化
如果我们想用JAVA中BufferedImage画出漂亮的验证码点击变化怎么实现呢,类似这样: 点击变化,以下是实现过程,直接上代码: 首先前台:<i><img style=&quo ...
- 利用python画出动态高优先权优先调度
之前写过一个文章. 利用python画出SJF调度图 动态高度优先权优先调度 动态优先权调度算法,以就绪队列中各个进程的优先权作为进程调度的依据.各个进程的优先权在创建进程时所赋予,随着进程的推进或其 ...
- H5坦克大战之【画出坦克】
今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...
- 像画笔一样慢慢画出Path的三种方法(补充第四种)
今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- MATLAB 画出三个通信小区cell边界示意图
d=1000; %两个小区中心间距离的一半 rcell=2*d/sqrt(3); %小区半径 ncell=3; %小区个数 cellposition=zeros(ncell,2); %初始化小区中心位 ...
随机推荐
- bzoj1013题解
[解题思路] 初看以为是二次方程组,但这些方程有相同的右值r2,于是可以化为一次方程组,高斯消元即可.复杂度O(n3). 化简过程: 假设第i个方程和第j个方程联立,得: ∑(a[i,k]-a[0, ...
- NX二次开发-UF_ASSEM_ask_component_data获取装配部件的相关信息
NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_assem.h> ], void* user_ ...
- 【开篇】基于C#+EmguCV的机器视觉平台开发
市面上关于通用的机器视觉平台已有不少,一些大的视觉产品.设备制造商都有开发自己的一套系统.其通用性也都有一些行业局限,难以囊括所有可能性,一些需要经过二次开发,这也是难以攻克的问题.本人水平有限,再加 ...
- KiFastCallEntry() 机制分析
1. 概述 从 windows xp 和 windows 2003 开始使用了快速切入内核的方式提供系统服务例程的调用. KiFastCallEntry() 的实现是直接使用汇编语言,C 语言不能直接 ...
- jeecg下实现自动默认模糊查询
也许jeecg的作者深受SAP毒害吧,没考虑到广大使用JEECG的人群为SAP用户,及所开发的项目均为中小项目,无惧大数据模糊查询带来的功能影响. 经网友“&&康&&& ...
- Git及github使用(二)上传项目
接上篇中创建好的项目. 1.进入到相应的目录右键Git bash here打开客户端 2.创建一个readme文本 $ echo "# Python日常记录积累" >> ...
- Spring 源码学习——加载 Bean
继上次注册 bean 之后好久没更新,这两天有空查了查资料也自己看了看 spring BeanFactory 的 getBean(beanName); 这个方法.因时间有限不能像之前那样复制代码并一行 ...
- 运行mybatis项目,运行测试类,点击test后,出现Cannot start compilation: the output path is not specified for module "前......
Cannot start compilation: the output path is not specified for module "前 后来发现是在pom.xml右击,有个+号,把 ...
- USACO2007 捕牛记 /// queue+桶 oj1503
题目大意: John和牛都站在一条直线上,开始时John位于坐标点N上( 0 ≤ N ≤ 100,000 ),牛位于坐标点K上( 0 ≤ K ≤ 100,000 ). John有两种行动方式:步行和瞬 ...
- springboot中参数处理
springboot1中处理是这样的 @Configuration public class WebConfig extends WebMvcConfigurerAdapter{ @Autowired ...