使用 Win2D 繪製帶圖片紋理的圓（或橢圓）

使用 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 使用方法 - 林德熙。