Как работает Silverlight Image Clipping? - PullRequest
Новая
       8

Как работает Silverlight Image Clipping?

2 голосов
/ 14 апреля 2009

У меня очень большое изображение, которое я хотел бы использовать для техник спрайтов (à 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>

Это обрезает исходное изображение до 24x12 в относительной позиции 258, 10632 в исходном изображении.

Проблема в том, что я хочу, чтобы обрезанное изображение показывалось в 0,0 в testImage, тогда как оно показывает 258, 10632. Геометрия используется в качестве направляющей резки, но также и в качестве направляющей макета .

У кого-нибудь есть идеи, как это сделать? если вообще .

Вывод: Кажется, в настоящее время нет хорошего способа сделать это, решение Graeme, кажется, наиболее близко к достижению этого с Silverlight 2.0.

Тем не менее, если кто-нибудь знает лучший способ сделать это, пожалуйста, ответьте с ответом.

Ответы [ 5 ]

3 голосов
/ 22 апреля 2009

Оказывается, это можно сделать. 

<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;
1 голос
/ 01 апреля 2010

Это вполне выполнимо - решение состоит в том, чтобы использовать отрицательные поля, а не преобразования. Просто установите отрицательное поле top и left, чтобы сместить смещение клипа top / left (258,10632 в вашем примере). Отрицательные поля также нужны справа и снизу, чтобы съесть оставшуюся часть исходного изображения; формула для правого поля:

-1 * (width_of_source - x_coord_of_clip - width_of_clip_region)

1 голос
/ 16 апреля 2009

API-интерфейс Bitlight API Silverlight 3.0 позволяет получить клип из изображения спрайта.

См. Этот пост на Как обрезать вместо клипа в Silverlight

1 голос
/ 17 апреля 2009

Зачем вообще это делать, весь смысл спрайтов изображений CSS заключается в том, чтобы сократить время загрузки, сделав один запрос вместо множества. Но вы можете добиться того же, просто поместив все свои изображения в xap (или THE xap) и загрузив их одним запросом.

1 голос
/ 15 апреля 2009

Предполагая, что вы находитесь на холсте 

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

<Редактировать>

При дальнейшем экспериментировании решение без использования холста: 

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

Он делает то же самое, что и холст, только немного аккуратнее.

...