使用 Win2D 绘制带图片纹理的圆（或椭圆）
- 2020 年 2 月 10 日
- 筆記
使用 Win2D 绘制带图片纹理的圆（或椭圆）
发布于 2018-11-11 21:50 更新于 2018-11-28 08:25
使用 Win2D 绘制图片和绘制椭圆都非常容易，可是如何使用 Win2D 绘制图片纹理的椭圆呢？
▲ 重力迷宫
你可以看到这个小球就像一个透明塑料小球一样，纹理会跟随背景而动。这显然不是 Win2D 中的游戏循环：CanvasAnimatedControl 一文中我用 DrawEllipse 画的那个灰色小球。
Win2D 实现
我们会使用到 Win2D 中的多种特效：
MorphologyEffect- 用于将背景那些红色的洞洞转换成较虚的形态，以便球看起来不是扁平的。
- 不是必要的，只是为了好看而已。
CropEffect- 将背景区域裁剪成一个较小的区域。
- 不是必要的。
AlphaMaskEffect- 使用透明度蒙版使得图片只露出椭圆部分。
- 这是绘制椭圆必要的特效。
ShadowEffect- 做一个小球的阴影。
- 不是必要的。
要画出图片纹理的椭圆，只需要这么一点代码即可：
using (var list = new CanvasCommandList(creator)) { using (var s = list.CreateDrawingSession()) { s.FillEllipse(_xPosition, _yPosition, _radius, _radius, Colors.Black); } var mask = new AlphaMaskEffect { Source = bitmap, AlphaMask = list, }; ds.DrawImage(mask); }
▲ 带图片纹理的椭圆
现在，如果你希望获得本文一开始获得的那种奇妙的效果，可以添加更多的特效：
var bitmap = _game.Material.bitmap; var morphology = new MorphologyEffect { Source = bitmap, Mode = MorphologyEffectMode.Dilate, Width = 40, Height = 40, }; var crop = new CropEffect { Source = morphology, SourceRectangle = new Rect( _xPosition - _radius, _yPosition - _radius, _radius + _radius, _radius + _radius), }; using (var list = new CanvasCommandList(creator)) { using (var s = list.CreateDrawingSession()) { s.FillEllipse(_xPosition, _yPosition, _radius, _radius, Colors.Black); } var mask = new AlphaMaskEffect { Source = crop, AlphaMask = list, }; var shadow = new ShadowEffect { Source = mask, BlurAmount = 4, ShadowColor = Color.FromArgb(0x40, 0x00, 0x00, 0x00), }; ds.DrawImage(shadow); ds.DrawImage(mask); }
关于 CanvasCommandList
上面的例子中，我们是用到了 CanvasCommandList。它可以帮助我们将绘制命令先绘制到一个缓存的上下文中，以便被其他绘制上下文进行统一的处理。
阅读林德熙的博客了解更多 CanvasCommandList 的资料：win2d CanvasCommandList 使用方法 – 林德熙。
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 ([email protected]) 。
