仅显示图像中图像文件的特定部分

Question

我希望能够让Image对象呈现图像的一部分，我将以编程方式控制。例如，这是我到目前为止：

<Image Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Height="160" 
    HorizontalAlignment="Right" Name="avatarImage" Stretch="None" 
    VerticalAlignment="Center" Width="160" 
    Source="/Crystal%20Cloud;component/data/images/characters.png" 
    Margin="0,0,40,0" />

我想一次只渲染一个角色，然后使用按钮更改它渲染的角色。我可以这样做，如果是的话，怎么做？

Answer 1

您绝对可以使用ImageBrush.Transform来提取您感兴趣的位图部分，如果您不需要非常高的帧速率，那么就可以了。

但是，如果您需要优化帧速率，则可以从精灵表中动态提取单个位图并缓存这些位图并根据需要显示它们。下面的博客文章提供了一些代码，您可以使用这些代码提取单个位图，然后可以缓存这些位图。

http://taylorza.blogspot.com/2009/08/silverlight-spritesheet-management-with.html

请记住，此处性能的关键是您缓存位图，并且在每次需要新图像时都不会遇到提取它们的所有麻烦。

Answer 2

您还可以将图像放置在画布中并为其定义剪辑（可见部分）。然后，为了设置角色动画，您可以按时间间隔以编程方式更改图像的顶部和左侧：

<Canvas Width="200" Height="100">       
    <Canvas.Clip>
        <RectangleGeometry Rect="0, 0, 200, 100"/>
    </Canvas.Clip>

    <Image x:Name="imgCharacter" Source="..." Canvas.Left="..." Canvas.Top="..." />
</Canvas>


imgCharacter.SetValue(Canvas.LeftProperty, currentFrame.Left);
imgCharacter.SetValue(Canvas.LeftProperty, currentFrame.Top);