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

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>

这些变换绑定到两个滑块控件.我已经为画布的背景分配了一个画笔,工作正常.在我分配画笔时,我将两个变换的centerX和centerY属性设置为图像的X和Y的一半.缩放滑块与旋转滑块一样按预期工作.

当我组合缩放和滑块时,我得到奇怪的结果(即旋转变换仍然基于原始尺寸图像的centerX和centerY属性.因此旋转和缩放的行为不符合预期(放大并旋转)围绕图像的中心.

有人可以帮忙吗？

非常感谢.

Answer 1

您可以将两个Transforms放在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.