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 和更多博客请看

win10 uwp win2d 入门 看这一篇就够了

win2d 毛玻璃:win10 uwp 毛玻璃

win10 uwp 萤火虫效果

win2d 图片水印

win2d CanvasRenderTarget vs CanvasBitmap

win10 uwp win2d 使用 Path 绘制界面

win10 uwp win2d 离屏渲染

win2d 画出好看的图形

win10 uwp win2d 特效

win10 uwp 通过 win2d 画出笔迹

CanvasActiveLayer

void

2019-8-31-win2d-通过-CanvasActiveLayer-画出透明度和裁剪的更多相关文章

  1. win2d 通过 CanvasActiveLayer 画出透明度和裁剪

    本文告诉大家如果在 UWP 的 win2d 通过 CanvasActiveLayer 创建一层,在这里画出的图片有透明度或者裁剪 在 win2d 如果需要对某个元素裁剪,可以使用很多方法,本文只是告诉 ...

  2. win2d 画出好看的图形

    本文告诉大家,win2d 不需要从零开始做,以前做出来的很多库其实只需要做很小修改就可以做出好看的效果,而且用在 UWP 上.本文修改原先 大神写的 GDI 图形到 win2d 上,而且可以运行起来 ...

  3. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  4. 用JAVA中BufferedImage画出漂亮的验证码点击变化

    如果我们想用JAVA中BufferedImage画出漂亮的验证码点击变化怎么实现呢,类似这样: 点击变化,以下是实现过程,直接上代码: 首先前台:<i><img style=&quo ...

  5. 利用python画出动态高优先权优先调度

    之前写过一个文章. 利用python画出SJF调度图 动态高度优先权优先调度 动态优先权调度算法,以就绪队列中各个进程的优先权作为进程调度的依据.各个进程的优先权在创建进程时所赋予,随着进程的推进或其 ...

  6. H5坦克大战之【画出坦克】

    今天是个特殊的日子,圣诞节,也是周末,在这里先祝大家圣诞快乐!喜庆的日子,我们可以稍微放松一下,扯一扯昨天雷霆对战凯尔特人的比赛,这场比赛大威少又双叒叕拿下三双,而且是一个45+11+11的超级三双, ...

  7. 像画笔一样慢慢画出Path的三种方法(补充第四种)

    今天大家在群里大家非常热闹的讨论像画笔一样慢慢画出Path的这种效果该如何实现. 北京-LGL 博客号@ligl007发起了这个话题.然后各路高手踊跃发表意见.最后雷叔 上海-雷蒙 博客号@雷蒙之星 ...

  8. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  9. MATLAB 画出三个通信小区cell边界示意图

    d=1000; %两个小区中心间距离的一半 rcell=2*d/sqrt(3); %小区半径 ncell=3; %小区个数 cellposition=zeros(ncell,2); %初始化小区中心位 ...

随机推荐

  1. bzoj1013题解

    [解题思路] 初看以为是二次方程组,但这些方程有相同的右值r2,于是可以化为一次方程组,高斯消元即可.复杂度O(n3). 化简过程: 假设第i个方程和第j个方程联立,得:  ∑(a[i,k]-a[0, ...

  2. NX二次开发-UF_ASSEM_ask_component_data获取装配部件的相关信息

    NX9+VS2012 #include <uf.h> #include <uf_ui.h> #include <uf_assem.h> ], void* user_ ...

  3. 【开篇】基于C#+EmguCV的机器视觉平台开发

    市面上关于通用的机器视觉平台已有不少,一些大的视觉产品.设备制造商都有开发自己的一套系统.其通用性也都有一些行业局限,难以囊括所有可能性,一些需要经过二次开发,这也是难以攻克的问题.本人水平有限,再加 ...

  4. KiFastCallEntry() 机制分析

    1. 概述 从 windows xp 和 windows 2003 开始使用了快速切入内核的方式提供系统服务例程的调用. KiFastCallEntry() 的实现是直接使用汇编语言,C 语言不能直接 ...

  5. jeecg下实现自动默认模糊查询

    也许jeecg的作者深受SAP毒害吧,没考虑到广大使用JEECG的人群为SAP用户,及所开发的项目均为中小项目,无惧大数据模糊查询带来的功能影响. 经网友“&&康&&& ...

  6. Git及github使用(二)上传项目

    接上篇中创建好的项目. 1.进入到相应的目录右键Git bash here打开客户端 2.创建一个readme文本 $ echo "# Python日常记录积累" >> ...

  7. Spring 源码学习——加载 Bean

    继上次注册 bean 之后好久没更新,这两天有空查了查资料也自己看了看 spring BeanFactory 的 getBean(beanName); 这个方法.因时间有限不能像之前那样复制代码并一行 ...

  8. 运行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右击,有个+号,把 ...

  9. USACO2007 捕牛记 /// queue+桶 oj1503

    题目大意: John和牛都站在一条直线上,开始时John位于坐标点N上( 0 ≤ N ≤ 100,000 ),牛位于坐标点K上( 0 ≤ K ≤ 100,000 ). John有两种行动方式:步行和瞬 ...

  10. springboot中参数处理

    springboot1中处理是这样的 @Configuration public class WebConfig extends WebMvcConfigurerAdapter{ @Autowired ...