불투명도 마스크가 ClipToBounds를 무시합니다.

Question

메인 페인팅 캔버스의 OpacityMask 소스로 사용할 "마스크 캔버스"가 있습니다.

두 캔버스의 크기가 같지만 캔버스 테두리 근처에 그림을 그리기 시작할 때 예기치 않은 결과가 나타납니다.

필자는 내 문제를 설명하기 위해 GIF를 만들어 : 지프에서

를, 내가 먼저 (검은 색) 마스크를 그렸다. 그런 다음 OpacityMask가 마스크 캔버스에 바인딩 된 다른 캔버스에서 잔디 텍스처로 페인팅을 시작했습니다. 캔버스 안에 페인트하면 잘 작동하지만, 캔버스 테두리 근처에 있으면 그림이 변환되고 크기가 조정됩니다.

가장자리 근처에 올 때 그림 캔버스의 크기가 변경되어 이미지가 왜곡됩니다. 이 문제를 해결하려면 어떻게해야합니까? 이미 두 캔버스 모두에 대해 ClipToBounds = "True"로 설정합니다. 마스크 캔버스를 페인팅 캔버스에 비례하도록 유지하려면 어떻게해야합니까?

편집 - 다음은 두 캔버스에 대한 코드입니다. 마스크 캔버스 :

<ItemsControl Name="maskDataBinding" Background="Transparent" Panel.ZIndex="-1" ClipToBounds="True" Height="512" Width="512" HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas Background="Transparent" 
         Height="512" 
         Width="512" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center" 
         ClipToBounds="True"> 
       </Canvas> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 

     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Image Source="{Binding Name}" 
          Width="{Binding Width}" 
          Height="{Binding Height}" 
          Opacity="{Binding Opacity}"> 
        <Image.RenderTransform> 
         <TransformGroup> 
          <TranslateTransform X="{Binding OffsetX}" Y="{Binding OffsetY}"/> 
          <RotateTransform CenterX="{Binding CenterX}" CenterY="{Binding CenterY}" Angle="{Binding Angle}"/> 
         </TransformGroup> 
        </Image.RenderTransform> 
       </Image> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 

회화 캔버스 :

이

<!--Outer collection--> 
<ItemsControl Name="canvasDataBinding" 
      Focusable="True" 
      HorizontalAlignment="Center" 
      Height="512" 
      Width="512" 
      VerticalAlignment="Center" 
      ClipToBounds="True"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <Canvas MouseMove="Canvas_MouseMove" 
        MouseEnter="Canvas_MouseEnter" 
        MouseLeave="Canvas_MouseLeave" 
        MouseDown="Canvas_MouseDown" 
        MouseUp="Canvas_MouseUp" 
        Background="Transparent" 
        ClipToBounds="True"> 

      </Canvas> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 

      <!--nested collection--> 
      <ItemsControl Height="512" Width="512" HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding ImageSource}" ClipToBounds="True"> 

       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Canvas Background="Transparent" 
           Height="512" 
           Width="512" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           ClipToBounds="True"> 
          <Canvas.OpacityMask> 
           <VisualBrush Visual="{Binding ElementName=maskDataBinding}"/> 
          </Canvas.OpacityMask> 
         </Canvas> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 

       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Image Source="{Binding Name}" 
         Width="{Binding Width}" 
         Height="{Binding Height}" 
         Opacity="{Binding Opacity}"> 
          <Image.RenderTransform> 
           <TransformGroup> 
            <TranslateTransform X="{Binding OffsetX}" Y="{Binding OffsetY}"/> 
            <RotateTransform CenterX="{Binding CenterX}" CenterY="{Binding CenterY}" Angle="{Binding Angle}"/> 
           </TransformGroup> 
          </Image.RenderTransform> 
         </Image> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 

     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

내 페인트 캔버스 정말 캔버스의 단지 모음 (레이어를 시뮬레이션하기 위해 각 캔버스를)입니다. 그리고 각 캔버스에는 이미지 모음이 있습니다. 중첩 컬렉션의 캔버스 안에 OpacityMask를 바인딩하는 것을 볼 수 있습니다.

: 제 가정은 옳습니다. 페인팅 캔버스의 너비가 증가하고 (왼쪽/오른쪽 테두리 근처에있을 경우) 높이가 커지기 때문에 테두리 근처에있을 때 이미지가 왜곡되어 마스크가 늘어납니다. 솔루션/해결 방법에 대한 아이디어가 있습니까?

다음은 다른 gif입니다. 불투명 마스크를 제거 했으므로 이제 캔버스에 그림을 그려야합니다. 내 그림 캔버스에서 ClipToBounds = False를 설정합니다. 불투명 마스크는 ClipToBounds가 false 또는 true인지 여부에 관계없이이 클리핑되지 않은 페인팅 캔버스에 적용됩니다.

Answer 1

나는 그것을 알아 냈다. OpacityMask를 캔버스의 부모에게 적용해야했습니다. OpacityMask는 캔버스의 모든 것을 경계선 외부의 항목으로 간주합니다 (True 또는 False로 설정된 ClipToBounds는 관련 없음). Canvas의 부모 (내 경우에는 실제 ItemsControl)는 Canvas 경계 외부의 정보를 제거하므로 부모에게 마스크를 적용하는 것이 좋습니다.

<!--nested collection--> 
<ItemsControl Height="512" Width="512" HorizontalAlignment="Center" VerticalAlignment="Center" ItemsSource="{Binding ImageSource}" > 

    <ItemsControl.ItemsPanel> 

     <ItemsPanelTemplate> 

      <Canvas Name="paintingCanvas" 
        Background="Transparent" 
        Height="512" 
        Width="512" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        ClipToBounds="True"> 
      </Canvas> 
     </ItemsPanelTemplate> 

    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Image Source="{Binding Name}" 
     Width="{Binding Width}" 
     Height="{Binding Height}" 
     Opacity="{Binding Opacity}"> 
       <Image.RenderTransform> 
        <TransformGroup> 
         <TranslateTransform X="{Binding OffsetX}" Y="{Binding OffsetY}"/> 
         <RotateTransform CenterX="{Binding CenterX}" CenterY="{Binding CenterY}" Angle="{Binding Angle}"/> 
        </TransformGroup> 
       </Image.RenderTransform> 
      </Image> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
    <ItemsControl.OpacityMask> 
     <VisualBrush Visual="{Binding ElementName=maskDataBinding}"/> 
    </ItemsControl.OpacityMask> 
</ItemsControl>