2009-04-13 2 views
2

스프라이트 기법 (à la css image sprites)에 사용하고 싶은 매우 큰 이미지가 있습니다.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> 

이 클립 소스 이미지 소스 이미지에서 258, 10632의 상대적 위치에 24x12 할 수 있습니다.

문제는 자른 이미지가 testImage에서 0,0에 표시되도록하는 반면, 258, 10632에서는 자른 이미지를 표시하는 것입니다. 이것은 도형을 절단 가이드로 사용하지만 레이아웃 가이드으로도 사용합니다.

누구에게 어떤 조치가 필요합니까? (있는 경우).

결론 : 현재이 일을 더 좋은 방법은없는 것 같다, 그레엄의 솔루션은 실버 라이트 2.0이 달성에 가장 가까운 것 같다.

그렇다면 더 나은 방법을 알고 있다면 대답으로 답장하십시오.

답변

3

이것이 가능합니다.

<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

당신이 실버 라이트에 존재하지 않는 캔버스

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

당신이 CroppedBitmap을 사용 WPF와 함께

하지만 불행히도에있어 가정. 추가 실험으로

< 편집>

캔버스를 사용하지 않고 해결책 : 그것은 단지 약간 깔끔한 캔버스와 같은 일을하고있어

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

.

+0

숨 깁니다 내용.너비를 변경하면 원본 이미지의 비트가 표시됩니다. –

+0

너비와 높이를 원래 너비 = "800"높이 = "18928"로 남겨 둘 수 있지만 그 일을하는 데 올바른 방법입니까? –

+0

문제는 Silverlight가 아직 수행하려는 작업을 지원하지 않는다는 것입니다. CroppedBitmap은 올바른 방법이지만, 불행히도 WPF에만 존재합니다. 따라서 열린 반사경을 깨뜨리지 않고 직접 구현하면 Image –

1

에이 게시물을 참조, CSS 이미지 스프라이트의 요점 대신 중 하나 개 요청하여 다운로드 시간을 개선하는 것입니다. 그러나 모든 이미지를 xap (또는 xap)에 넣고 하나의 요청으로 다운로드하여 동일한 결과를 얻을 수 있습니다.

+0

필자가 인식하는 문제는 실버 라이트가 내부적으로 성능을 최적화 할 단일 이미지를 사용하는 대신 다수의 이미지를 로딩하는 것입니다. –

+1

나는 실제로 더 높은 메모리 사용량을 얻고 성능 저하를 가져올 것이라고 확신한다. 입증 된 병목 현상이 실제로 발생하지 않는 한이 "최적화"를 보여주는 측정치가 두 가지 계산법에서 모두 같지 않은 것을 향상시킬 수있는 경우가 아니라면 시간을 낭비하고 작업중인 모든 항목의 품질을 떨어 뜨릴 수 있습니다. –

1

이것은 완벽하게 해결할 수 있습니다. 해결책은 변형이 아닌 음수 여백을 사용하는 것입니다. 클립 위/왼쪽의 오프셋 (예 : 258,10632)을 먹기 위해 음의 여백을 위쪽과 왼쪽으로 설정하십시오. 원본 이미지의 나머지 부분을 먹기 위해서는 음의 여백도 오른쪽과 아래에 있어야합니다. 오른쪽 여백에 대한 공식은 다음과 같습니다

-1 * (width_of_source - x_coord_of_clip - width_of_clip_region) 여기 가고 있지만, 24 이미지 너비를 변경하고 어디 내가 좋아하는

관련 문제