1

我曾期望以下两个 XAML 产生相同的输出。但是，路径上的 RenderTransform 使用了一些我不明白的时髦旋转点。有人可以向我解释为什么这两个 XAML 不等价吗？

<Window x:Class="CenterPathTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Canvas.RenderTransform>
            <TranslateTransform X="50" Y="50"/>
        </Canvas.RenderTransform>
        <Border Width="100" Height="200">
            <Border.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="70" Y="-100"/>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </Border.RenderTransform>
            <Path Width="100" Height="200" Stretch="Uniform"
                Data="M 0,20M 20,0M 6.04,4.51 C6.04,4.51 7.54,3 7.54,3 7.54,3 14.5,10 14.5,10 14.5,10 7.54,17 7.54,17 7.54,17 6.04,15.48 6.04,15.48 6.04,15.48 11.5,10 11.5,10 11.5,10 6.04,4.51 6.04,4.51 z" />
        </Border>
    </Canvas>
</Window>

我认为以下这一行为是不正确的：

<Window x:Class="CenterPathTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Canvas.RenderTransform>
            <TranslateTransform X="50" Y="50"/>
        </Canvas.RenderTransform>
        <Path Width="100" Height="200" Stretch="Uniform"
            Data="M 0,20M 20,0M 6.04,4.51 C6.04,4.51 7.54,3 7.54,3 7.54,3 14.5,10 14.5,10 14.5,10 7.54,17 7.54,17 7.54,17 6.04,15.48 6.04,15.48 6.04,15.48 11.5,10 11.5,10 11.5,10 6.04,4.51 6.04,4.51 z">
            <Path.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="70" Y="-100"/>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>
    </Canvas>
</Window>
4

1 回答 1

2

You are correct about the rotation point being related to the Stretch property on your second example. To test this, you can change your XAML so that both examples have Stretch="None", and you can see that they perfectly overlap.

Your second example is a good example on how not to do it. :) When you have a path object and are stretching it by some unknown amount, your default RenderTransformOrigin is also stretched/moved.

The first example works as expected, because you are doing the TranslateTransform and the RotateTransform on the Border object which hasn't been stretched or scaled. The Path object inside the border is then free to scale up to the needed dimensions without being adversely affected by the transforms that are occurring on the parent object (the Border).

In order to get your second example to behave identically to the first, you need to figure out the exact scale factor that occurs when the Path is stretched to fit your 100x200 size bounds. Then you would have to use that number to either calculate a new RenderTransformOrigin or to calculate new X and Y values for the TranslateTransform.

..or..

Change the Data in the second Path object to draw the chevron at the full 'stretched' size initially.

Given the complexity of either of those solutions, leaving the Path inside the Border object is by far the easiest route.

于 2014-09-19T18:12:24.643 回答