Silverlight에서 조정 변환 문제

Question

저는 Silverlight 3.0 + .Net 3.5 + VSTS 2008 + C#을 사용하여 ASP.Net 기반 실버 라이트 응용 프로그램을 개발하고 있습니다. 다음 코드 스 니펫에서 "TranslateTransform"및 "RenderTransformOrigin"의 기능에 대해 매우 혼란 스럽습니다.

BTW : RenderTransformOrigin은 x 축과 y 축의 UI 요소를 일부 오프셋만큼 이동한다는 것을 대략 이해합니다. 맞습니까? 전체 UI 요소를 이동 하시겠습니까?

 <Grid Margin="-1,0,100,0" x:Name="controlsContainer" Height="35" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Bottom"> 
      <Grid.RenderTransform> 
       <TransformGroup> 
        <ScaleTransform/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform Y="0"/> 
       </TransformGroup> 
      </Grid.RenderTransform> 
      <Rectangle Margin="0,0,0,0" Height="35" VerticalAlignment="Top" Fill="#97000000" Stroke="#00000000" RenderTransformOrigin="0.5,0.5"/> 
      <VideoPlayer:mediaControl Height="35" Margin="1,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" x:Name="mediaControls" Visibility="Visible"/> 
     </Grid> 

Answer 1

RenderTransformOrigin에 대한 귀하의 이해는 정확하지 않습니다.

RenderTransformOrigin은 RotateTransform과 같은 RenderTransforms가 적용되는 원점 또는 중심점을 정의하는 점을 허용합니다.

RenderTransformOrigin에 의해 정의 된 지점에서 흥미로운 점은 절대 좌표가 아닌 것입니다. 그게 무슨 뜻 이죠? 예를 들어 중심을 중심으로 45도 회전과 같이 중심점을 중심으로 변형을 적용하려면 100 x 100 픽셀의 요소가 있다고 가정하면 이 아닌은 절대 좌표가 50, 50이지만 오히려 0.5, 0.5은 기본적으로 요소의 원점이 0.5 또는 반 건너편이고 0.5가 아래라고 말합니다.

원점의 일반적인 값은 0과 1 사이입니다. 여기서 X 축의 0은 요소의 왼쪽이고 1은 오른쪽이고 Y 축의 0은 요소의 상단이고 1은 요소의 맨 아래에있는 원점을 요소 외부의 점으로 설정할 수도 있습니다. 1.5, 0.5처럼 원점 hlaf 방법으로 요소를 설정하고 요소 너비의 절반을 요소의 오른쪽 바깥쪽으로 설정합니다.

TranslateTransform, 요소를 번역 할 경우 번역 또는 이동을 수행합니다. 45,60 요소의 의미는 45 단위를 오른쪽으로, 60 아래로 이동하는 것입니다.

다음은 내가 할 수있는 몇 가지 예입니다.

<!-- Rectangle rotated around the left top corner --> 
    <Rectangle Width="100" Height="100" Fill="Red" RenderTransformOrigin="0,0"> 
     <Rectangle.RenderTransform> 
      <RotateTransform Angle="45" /> 
     </Rectangle.RenderTransform> 
    </Rectangle> 

    <!-- Rectangle rotated around the center point --> 
    <Rectangle Width="100" Height="100" Fill="Blue" RenderTransformOrigin="0.5,0.5"> 
     <Rectangle.RenderTransform> 
      <RotateTransform Angle="45" /> 
     </Rectangle.RenderTransform> 
    </Rectangle> 

    <!-- Rectangle rotated around the bottom right corner --> 
    <Rectangle Width="100" Height="100" Fill="Yellow" RenderTransformOrigin="1,1"> 
     <Rectangle.RenderTransform> 
      <RotateTransform Angle="45" /> 
     </Rectangle.RenderTransform> 
    </Rectangle> 

    <!-- Rectangle translated 50 units to the right 70 units up, the origin does not matter here--> 
    <Rectangle Width="100" Height="100" Fill="Green" RenderTransformOrigin="0,0"> 
     <Rectangle.RenderTransform> 
      <TranslateTransform X="50" Y="-70" /> 
     </Rectangle.RenderTransform> 
    </Rectangle> 

Answer 2

RenderTransformOrigin은 RotateTransform과 가장 관련이 있으며 회전 중심을 결정합니다.

TranslateTransform은 그리드를 X/Y 축의 특정 픽셀 수만큼 이동시킵니다. 이 경우 Y가 0이고 X가 기본값 0이기 때문에 아무 것도하지 않습니다. 이 경우 시각적 상태의 애니메이션이나 애니메이션은 TranslateTransform.Y를 수정합니다. 보는 것은 Y = 0의 초기 값입니다.