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

【问题标题】：Display only certain portion of an image file in an Image在图像中仅显示图像文件的特定部分
【发布时间】：2011-09-29 06:41:22
【问题描述】：

我希望能够让 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" />

我想一次只渲染一个字符，然后使用按钮来更改它渲染的那个。我可以这样做吗？如果可以，怎么做？

【问题讨论】：

这应该会有所帮助：stackoverflow.com/questions/5812752/spritesheet-in-silverlight

标签： c# image windows-phone-7

【解决方案1】：

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

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

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

请记住，这里的性能关键是缓存位图，而不必在每次需要新图像时都提取它们。

【讨论】：

【解决方案2】：

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

<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);

【讨论】：