Silverlight 图像剪辑如何工作? [英] How does Silverlight Image Clipping work?

问题描述

我有一个非常大的图像，我想将其用于精灵技术(à la css 图像精灵).

I've got a very large image which I'd like to use for sprite techniques (à la css image sprites).

我有下面的代码:

<Image x:Name="testImage" Width="24" Height="12" Source="../Resources/Images/sprites.png">
     <Image.Clip>
         <RectangleGeometry Rect="258,10632,24,12" />
     </Image.Clip>
</Image>

这会将源图像在源图像中相对位置 258、10632 处剪切为 24x12.

This clips the source image to 24x12 at the relative position of 258, 10632 in the source image.

问题是我希望裁剪后的图像在 testImage 中显示为 0,0，而它显示在 258, 10632.它使用几何作为 切割指南，但也作为布局指南.

The problem is that I want the cropped image to show at 0,0 in the testImage whereas it shows it at 258, 10632. It's using the geometry as a cutting guide but also as a layout guide.

有人知道这应该怎么做吗?如果有的话.

Anyone have any idea how this should be done? if at all.

结论:目前似乎没有什么好的方法可以做到这一点，Graeme 的解决方案似乎是最接近 Silverlight 2.0 的解决方案.

Conclusion: There seems to be no good way of doing this at present, Graeme's solution seems to be the closest to achieving this with Silverlight 2.0.

也就是说，如果有人知道更好的方法，请回复.

推荐答案

原来是可以做到的.

<Rectangle x:Name="myRect" Width="28" Height="12" />

ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = //Load in image source
imageBrush.Stretch = Stretch.None;
imageBrush.AlignmentX = AlignmentX.Left;
imageBrush.AlignmentY = AlignmentY.Top;

TranslateTransform offsetTransform = new TranslateTransform();
offsetTransform.X = -258;
offsetTransform.Y = -10632;

imageBrush.Transform = offsetTransform;

这篇关于Silverlight 图像剪辑如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！