Question

我有一个非常大的图像，我想用它来进行精灵技术（àlacss 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。

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

任何人都知道应该怎么做？ 如果有的话。

结论： 目前似乎没有好办法，Graeme的解决方案似乎最接近Silverlight 2.0的实现。

那就是说，如果有人知道更好的方法，请回答一下。

Answer 1

事实证明这可以做到。

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

Answer 2

假设你在画布上

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

使用WPF，您可以使用CroppedBitmap，但遗憾的是Silverlight中不存在。

<强>＆LT;编辑＆gt;

通过进一步的实验，不使用画布的解决方案：

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

它的效果和画布稍微整齐一样。

Answer 3

Silverlight 3.0的Bitmap API将允许您从精灵图像中抓取剪辑。

在How to crop instead of clip in silverlight

上查看此帖子

Answer 4

为什么这样做，css图像精灵的全部意义在于通过提出一个请求而不是多个请求来改善下载时间。但是你可以通过将所有图像放在xap（或者xap）中并在一个请求中下载它们来实现相同的目的。

Answer 5

这是完全可行的 - 解决方案是使用负边距而不是变换。只需在上边和左边设置一个负边距来消耗剪辑顶部/左边的偏移量（在你的例子中为258,10632）。右边和底部也需要负边距来消耗源图像的其余部分;右边距的公式为：

-1 *（width_of_source - x_coord_of_clip - width_of_clip_region）

Silverlight Image Clipping如何工作？

5 个答案: