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

问题描述

我有一个非常大的图像，我想用于精灵技术（àla css image sprites ）。

我有下面的代码：

 < Image x：Name =testImageWidth =24Height =12Source =../ Resources / Images / sprites.png> 
< Image.Clip> 
< RectangleGeometry Rect =258,10632,24,12/> 
 < /图片> 
  

这会将源图像在源图像中的相对位置258,10632处剪切为24x12。 / p>

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

任何人有任何想法应该如何做？ 。。

结论：
这样做似乎没有好的方法目前，Graeme的解决方案似乎是最接近用Silverlight 2.0实现这一点的。

这就是说，如果有人知道这样做的更好方法，请回复并给出答案。

解决方案

事实证明，这可以做到。

 < Rectangle x：Name =myRectWidth =28Height =12/> 
 
 ImageBrush imageBrush = new ImageBrush（）; 
 imageBrush.ImageSource = //在图像源中加载
 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; 
  

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

I've got the code below:

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

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

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.

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.

That said, if anyone knows of a better way of doing this, please reply with an answer.

解决方案

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