取消

使用 Win2D 绘制带图片纹理的圆(或椭圆)

使用 Win2D 绘制图片和绘制椭圆都非常容易,可是如何使用 Win2D 绘制图片纹理的椭圆呢?


重力迷宫小球

重力迷宫
▲ 重力迷宫

你可以看到这个小球就像一个透明塑料小球一样,纹理会跟随背景而动。这显然不是 Win2D 中的游戏循环:CanvasAnimatedControl 一文中我用 DrawEllipse 画的那个灰色小球。

Win2D 实现

我们会使用到 Win2D 中的多种特效:

  • MorphologyEffect
    • 用于将背景那些红色的洞洞转换成较虚的形态,以便球看起来不是扁平的。
    • 不是必要的,只是为了好看而已。
  • CropEffect
    • 将背景区域裁剪成一个较小的区域。
    • 不是必要的。
  • AlphaMaskEffect
    • 使用透明度蒙版使得图片只露出椭圆部分。
    • 这是绘制椭圆必要的特效。
  • ShadowEffect
    • 做一个小球的阴影。
    • 不是必要的。

要画出图片纹理的椭圆,只需要这么一点代码即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
}

带图片纹理的椭圆
▲ 带图片纹理的椭圆

现在,如果你希望获得本文一开始获得的那种奇妙的效果,可以添加更多的特效:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 使用方法 - 林德熙

本文会经常更新,请阅读原文: https://blog.walterlv.com/post/draw-bitmap-ellipse-using-win2d.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

知识共享许可协议

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名 吕毅 (包含链接: https://blog.walterlv.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 ([email protected])

登录 GitHub 账号进行评论