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.

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

推荐答案

事实证明这是可以做到的.

It turns out this can be done.

<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屋！