如何使用动画笔画粗细动态调整矩形路径的大小？

Question

我有一个 Rectangle 和一个 Path 由 RectangleGeometry:

定义

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Row="0" Stroke="Red" Width="{Binding RctWidth}"/>
    <Path Grid.Row="1" Stroke="Red">
        <Path.Data>
            <RectangleGeometry Rect="0,0,50,10"/>
        </Path.Data>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetProperty="StrokeThickness">
                        <DoubleAnimation RepeatBehavior="Forever" From="1" To="3" Duration="0:0:0.5"/>
                    </Storyboard>
                </BeginStoryboard>          
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Grid>

矩形根据绑定动态改变宽度。矩形 Path 在其 StrokeThickness 上应用了动画。我希望矩形 Path 的大小与该矩形完全匹配，但笔划粗细动画不会影响它（较粗的笔划应该使 Path 实际上比Rectangle - 这是预期的行为）。

我该怎么做？

请注意，我无法在 Path 上使用 Stretch="Fill" 属性。在那种情况下，笔划粗细只会在 Paths 范围内增长，但我想保持笔划在内部和外部方向上增长的默认行为。

此外，我无法更改 Rectangle 的宽度绑定到的视图模型。这是我不允许修改的外部组件。

我实际上可以摆脱那个 Rectangle。对我来说重要的是 Path 及其动态变化的宽度。

Answer 1

如评论所述，笔画厚度仅向内增长的影响可以通过负边距来抵消。

对于厚度从1变为3的动画，边距需要从0变为-1（补偿厚度变化的一半）：

<BeginStoryboard>
    <Storyboard>
        <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" RepeatBehavior="Forever" From="1" To="3" Duration="0:0:0.5"/>
        <ThicknessAnimation Storyboard.TargetProperty="Margin" RepeatBehavior="Forever" From="0" To="-1" Duration="0:0:0.5"/>
    </Storyboard>
</BeginStoryboard>

有了这个，您可以将您的解决方案与 Stretch="Fill" 一起使用，无论它是什么样子。

如何使用动画笔画粗细动态调整矩形路径的大小？

How to dynamically size a rectangular path with animated stroke thickness?

wpf

xaml

rectangles

wpf-animation