在网格中旋转画布

Question

我可以使用LayoutTransform旋转画布。但角落超出网格宽度或高度。如何旋转和调整画布大小以使其保持在网格内。 以下是我如何轮换： -

    private void btnRotate_Click(object sender, RoutedEventArgs e)
    {
        if (RotationAngle == 360)
        {
            RotationAngle = 0;
        }
        RotationAngle = RotationAngle + 1;

        RotateTransform rotateTransform = new RotateTransform();
        rotateTransform.Angle = RotationAngle;
        TransformGroup transformGroup = new TransformGroup();
        transformGroup.Children.Add(rotateTransform);
        rotateTransform.CenterX = 0.5;
        rotateTransform.CenterY = 0.5;
        cnvsYardMap.LayoutTransform = transformGroup;   
    }

感谢。

Answer 1

如果Grid无法容纳其子Canvas的新大小，那么预计它会溢出边界。

所以，如果你有类似的东西：

<Grid Height="200">
  <Canvas x:Name="blah"
          Width="280"
          Height="150"
          Background="Tomato" />
</Grid>

并且您应用了50deg LayoutTransform，这确实会溢出。

对于您正在尝试的内容，您可以将Canvas包裹在ViewBox中。如下所示：

<Grid Height="200">
  <Viewbox>
    <Canvas x:Name="blah"
            Width="280"
            Height="150"
            Background="Tomato" />
  </Viewbox>
</Grid>

现在应用相同的转换将“显示”缩小Canvas大小以使其适合父Grid。请注意Viewbox缩放它的子项而不是调整它们的大小，因此它只是一种视觉效果。 Width的{​​{1}}和Height仍将保持原来在变换前的状态。

Answer 2

您拥有ClipToBounds属性，可以“裁剪”儿童的内容：

正常行为：

启用ClipToBounds：

另外，根据您的需要，您可能需要使用RenderTransform：

（来自LayoutTransform vs. RenderTransform – What’s the Difference?）