Question

我试图在画布应用了缩放变换时，实现画布子项的行为规范。特别是对于图像，我需要支持图像在缩放父级时保持宽度和高度的情况。当我调查渲染和布局比例变换时，看起来孩子不会自动意识到应用于祖先的变换，因此不遵守它的伸展规则。

以下是xaml中的示例：

<Canvas Background="#99000000">
    <Canvas Background="white" Canvas.Left="100"  Canvas.Top="100" Width="400" Height="300">
        <UserControl x:Name="_panelGreen" RenderTransformOrigin=".5 .5">
            <Canvas Background="#FF9ACD32" Width="100" Height="100">
                <TextBlock Text="Green Box"></TextBlock>
            </Canvas>
        </UserControl>
        <UserControl x:Name="_panelRed" RenderTransformOrigin=".5 .5">
            <UserControl.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="{Binding Path=Value, ElementName=xScale}" ScaleY="{Binding Path=Value, ElementName=yScale}" />
                    <RotateTransform Angle="{Binding Path=Value, ElementName=Rotate}"/>
                    <TranslateTransform X="{Binding Path=Value, ElementName=xTranslate}" Y="{Binding Path=Value, ElementName=yTranslate}"/>
                </TransformGroup>
            </UserControl.RenderTransform>
            <Canvas Background="red" Width="100" Height="100">
                <Image Source="Error-50.png" Stretch="None" Width="50" Height="50"></Image>
                <TextBlock Text="Red Box"></TextBlock>
            </Canvas>
        </UserControl>

    </Canvas>
    <StackPanel Canvas.Left="800">
        <Label Content="Rotate"></Label>
        <Slider Name="Rotate" Margin="10,10,10,0" Minimum="0" Maximum="359" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="X Position"></Label>
        <Slider Name="xTranslate" Margin="10,10,10,0" Minimum="0" Maximum="500" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="Y Position"></Label>
        <Slider Name="yTranslate" Margin="10,10,10,0" Minimum="0" Maximum="500" Width="100" TickFrequency="1" IsSnapToTickEnabled="True"/>
        <Label Content="X Scale"></Label>
        <Slider Name="xScale" Margin="10,10,10,0" Minimum="1" Maximum="2" Width="100" TickFrequency=".1" IsSnapToTickEnabled="True"/>
        <Label Content="Y Scale"></Label>
        <Slider Name="yScale" Margin="10,10,10,0" Minimum="1" Maximum="2" Width="100" TickFrequency=".1" IsSnapToTickEnabled="True"/>
    </StackPanel>
</Canvas>

无论变换是渲染还是布局，图像都会在父级缩放时缩放。

我想知道是否有人建议在父级比例下保持图像50x50。我是否应该通过订阅父级比例更改的事件来尝试对图像应用反比例？

管理这个系统的实际规则可能比这更复杂，因为我必须使用n深度树来完成这项工作。我在这里尝试从最基本的例子开始。

Answer 1

将两个画布放在网格中，使它们重叠。将可缩放的子项放在一个画布中，将不可缩放的子项放到另一个画布中。只对可缩放的画布进行转换。

WPF Xaml：在保持子图像大小的同时缩放父面板

1 个答案: