1. 前言 之前用PointLight做了一个番茄钟,效果还不错,具体可见这篇文章: [UWP]使用PointLight并实现动画效果 后来试玩了Win2D,这次就用Win2D实现文字的镂空效果,配合PointLight做一个内敛不张扬的番茄钟. 实现镂空文字的核心思想是使用CanvasGeometry.CreateText从TextLayout获取一个Geometry,然后使用DrawGeometry将它画到DrawingSurface.这篇文章介绍了具体的实现步骤. 2. 参考例子 Win2…

本文来告诉大家如何通过 Win2d 完全控制笔迹绘制逻辑,本文适合用来实现复杂的自定义逻辑,可以完全控制笔迹的行为.包括在书写过程中切换模式,如进行手势擦除切换为橡皮擦模式 本文提供的方法适合用来做复杂的自定义,本文的方法的优点也是缺点.优点是啥都可以自己控制,缺点是啥都需要自己控制.需要自己处理笔迹的多笔同步问题,处理笔迹的长笔迹分段问题,处理笔迹的绘制问题,处理动态笔迹切换 本文提供的方法依然可以实现非常高性能的笔迹,比 WPF 最快的笔迹实现还要快,但需要自己处理好各个部分的逻辑,如动态笔…

1. 成果 献祭了周末的晚上,成功召唤出了上面的番茄钟.正当我在感慨"不愧是Shadow大人,这难道就是传说中的五彩斑斓的黑?" "那才不是什么阴影效果,那是发光效果."被路过的老婆吐槽了. 系系系,老婆说的都系对的.我还以为我在做阴影动画,现在只好改博客标题了? 要实现上面的动画效果,首先使用CompositionDrawingSurface,在它上面用DrawTextLayout画出文字,然后用GaussianBlurEffect模仿成阴影,然后用CanvasA…

win10在设置颜色里有个从“背景图片中选取一种主题颜色”的选项,还有在很多内容展示软件中都使用了这样的功能. 现在我们需要在 nuget 引用 win2d.uwp 和 Toolkit.uwp 两个库. 首先将一个图片流转换成 win2d 的 CanvasBitmap 对象,然后通过 CanvasBitmap 的 GetPixelColors 方法获取到图片的全部颜色数组. /// <summary> /// 通过stream获取主题色 /// </summary> /// <…

先看下截圖: 做了幾個效果:普通.倒影.陰影.歌詞. 普通效果代碼: private void normal_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args) { CanvasTextFormat fmt = new CanvasTextFormat(); fmt.FontFamily = "Vladimi…

1. WPF有,而UWP没有的图片平铺功能 在WPF中只要将ImageSource的TileMode属性设置为Tile即可实现图片的平铺,具体可见WPF的这些文档: ImageBrush 类 (System.Windows.Media) _ Microsoft Docs TileBrush 类 (System.Windows.Media) _ Microsoft Docs TileBrush.TileMode 属性 (System.Windows.Media) _ Microsoft Docs…

1. 前言 什么是故障艺术(Glitch Art 风)?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球.故障艺术它模拟了画面信号出现故障导致成像错误的感觉.青色色块与红色色块无法重合就是这种故障的体现.从胶片时代开始到今天的数码时代,这种故障一直是观众非常熟悉的现象. 上个月看到CSS 故障艺术这篇文章,最近想转换心情于是开始抄它的动画了(顺便为博客园的UWP板块吊命).CSS的mix-blend-mode好像很好用,这次用…

这次,我主要向大家介绍一下CSS3下的-webkit-text-stroke属性,并分享几个用该属性制作的镂空文字效果. 1.-webkit-text-stroke属性简介 CSS边框的一个不足就是只有矩形的元素才能使用.-webkit-text-stroke可以为文字添加边框.它不但可以设置文字边框的宽度,也能设置其颜色.而且,配合使用color: transparent属性,你还可以创建镂空的字体. 2.一起看几个利用-webkit-text-stroke制作的文字特效 第一个CSS代码如下…

本文来告诉大家 CanvasVirtualControl ,在什么时候使用这个控件. 在之前的入门教程win10 uwp win2d 入门 看这一篇就够了我直接用的是CanvasControl,实际上可以使用的画布还有下面两个 CanvasAnimatedControl CanvasVirtualControl 虽然本文主要告诉大家CanvasVirtualControl但是也是会告诉大家什么时候用哪个 CanvasAnimatedControl 如果使用 CanvasControl ,那么只会…

-webkit-background-clip:padding-box | border-box | content-box | text,指定对象的背景图像向外裁剪的区域.对应的脚本特性为backgroundClip padding-box 从padding区域(不含padding)开始向外裁剪背景. border-box 从border区域(不含border)开始向外裁剪背景. content-box 从content区域开始向外裁剪背景. text 从前景内容的形状(比如文字)作为裁剪区域…