如何允许旋转变换和布局变换一起工作

Question

我有一个简单的画布如下:

<Canvas x:Name="canvBackground" Grid.Row="0" Margin="20" Background="Blue">
        <Canvas.LayoutTransform>
            <ScaleTransform x:Name="scaleTransformBackground"
                            ScaleX="{Binding Value,
                                             ElementName=uiSliderZoom}"
                            ScaleY="{Binding Value,
                                             ElementName=uiSliderZoom}" />
        </Canvas.LayoutTransform>
        <Canvas.RenderTransform>
            <RotateTransform x:Name="rotateTransformBackground"
                            Angle="{Binding Value,
                                             ElementName=uiSliderRotate}"></RotateTransform>
        </Canvas.RenderTransform  >
    </Canvas>

这些转换被绑定到两个滑块控件。我已经为画布的背景分配了一个imagebrush，它可以很好地工作。在我分配imagebrush的时候，我将两个变换的centerX和centerY属性设置为图像X和Y的一半。缩放滑块和旋转滑块一样正常工作。

当我结合缩放和滑动条时，我得到了奇怪的结果(即旋转变换仍然基于原始尺寸图像的centerX和centerY属性)。因此，旋转和缩放不像预期的那样(放大到缩小和围绕图像中心旋转)。

有人能帮忙吗?

许多谢谢。

Answer 1

你可以将这两个transform放到TransformGroup中，并将其分配给LayoutTransform或RenderTransform:

<Canvas x:Name="canvBackground" Grid.Row="0" Margin="20" Background="Blue">
    <Canvas.RenderTransform>
        <TransformGroup>
            <ScaleTransform x:Name="scaleTransformBackground"
                            ScaleX="{Binding Value, ElementName=uiSliderZoom}"
                            ScaleY="{Binding Value, ElementName=uiSliderZoom}" />
            <RotateTransform x:Name="rotateTransformBackground"
                             Angle="{Binding Value, ElementName=uiSliderRotate}" />
        </TransformGroup>
    </Canvas.RenderTransform  >
</Canvas>

你可能还需要设置RenderTransformOrigin.