在 Windows 商店应用中剪裁图片

Question

那么我们究竟如何在 UWP a.k.a 中执行 sprites。 Windows 存储应用程序？ this SO post 中描述的两种方法在 UWP 中不起作用。（CroppedBitmap class 不起作用，ImageBrush class 没有 Viewbox 属性）。我尝试用 RenderTransform 做 Clip 但也没有成功。下一步要去哪里？

Answer 1

正如@ibebbs所说，Win2D中的Win2D is a good choice for using sprites in UWP. Win2D is an easy-to-use Windows Runtime API for immediate mode 2D graphics rendering with GPU acceleration. And CanvasSpriteBatch Class针对精灵场景进行了优化。

CanvasSpriteBatch 允许更有效地绘制多个位图并且比 DrawImage API 具有更好的性能，特别是如果使用相同的源位图。 CanvasSpriteBatch 支持以下功能：

精灵可以用它们自己的位置、比例、旋转和色调来绘制 (Draw Overload and DrawFromSpriteSheet Overload)
单个精灵可以水平或垂直翻转。 (CanvasSpriteFlip)
精灵表（DrawFromSpriteSheet Overload）
精灵可以 clamped to a source rectangle，消除了在精灵之间添加填充的需要 sheet。
批次可以 sorted by bitmap 以获得更好的性能。

有关如何使用 CanvasSpriteBatch 的更多信息，请参阅 GitHub 上的 CanvasSpriteBatch Class document and also Sprite Sheets sample。

更新：

如果您不想使用 Win2D，实现您想要的效果的一种简单方法是使用 ImageBrush with Transform，如下所示：

<Rectangle Width="128" Height="192">
    <Rectangle.Fill>
        <ImageBrush AlignmentX="Left"
                    AlignmentY="Top"
                    ImageSource="Assets/WizardIdleRight.png"
                    Stretch="None">
            <ImageBrush.Transform>
                <TranslateTransform x:Name="SpriteSheetOffset" X="0" Y="-384" />
            </ImageBrush.Transform>
        </ImageBrush>
    </Rectangle.Fill>
</Rectangle>

这里我使用了WizardIdleRight.png in Sprite Sheets sample, we can change the offset in TranslateTransform来显示我们想要的精灵。

在 Windows 商店应用中剪裁图片

Clipping image in Windows Store app

xaml

image

uwp

uwp-xaml