UWP Scale 椭圆平滑？答案

【问题标题】：UWP Scale ellipse smoothly?UWP Scale 椭圆平滑？
【发布时间】：2020-05-07 01:48:50
【问题描述】：

您好，我有一个用例，用户应该能够通过选择椭圆的笔触（边框）来缩放椭圆。我尝试使用 Pointer Pressed 和 Pointermove 形状事件来实现这一点。但是缩放不是连续的（平滑的）。任何人都知道如何更好地实现这一目标，这将非常有帮助，谢谢

private void PostureDifficultyPath_PointerPressed(object sender, PointerRoutedEventArgs e)
    {
        Path selectedPath = sender as Path;
        if (selectedPath != null)
        {
            selectedPath.Stroke = new SolidColorBrush(Colors.DarkBlue);
            PointerPoint ptrPt = e.GetCurrentPoint(selectedPath);
            mousePressedPoint = new Point(ptrPt.Position.X, ptrPt.Position.Y);
        }
        e.Handled = true;
    }
private void PostureDifficultyPath_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        Pointer ptr = e.Pointer;
        double mouseCurrentPosition;
        if (ptr.PointerDeviceType == Windows.Devices.Input.PointerDeviceType.Mouse)
        {
            PointerPoint ptrPt = e.GetCurrentPoint(DifficultyUpperPath);
            if (ptrPt.Properties.IsLeftButtonPressed)
            {//this is a variable which i update using mvvm
               //this scale factor should be like a value which makes smooth scaling
                ScaleFactor -= 0.1111411;//
            }
            else { mouseCurrentPosition= ptrPt.Position.X; }
        }
        e.Handled = true;
    }


 <Path>
            <Path.Data>
                <PathGeometry>
                    <PathFigure  x:Name="UpperCircle" StartPoint="{x:Bind UpperStartPoint,Mode=TwoWay }">
                        <ArcSegment IsLargeArc="True" x:Name="UpperArc"
                            Size="{x:Bind UpperArcRadius,Mode=TwoWay}"
                            Point="{x:Bind UpperArcEndPoint,Mode=TwoWay}"
                            SweepDirection="Clockwise" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.RenderTransform>
                <ScaleTransform 
                                 CenterX="125" CenterY="100"   
                                 ScaleX="{x:Bind ScaleFactor,Mode=TwoWay}"
                                 ScaleY="{x:Bind ScaleFactor,Mode=TwoWay}"/>
            </Path.RenderTransform>
        </Path>

【问题讨论】：

显示你的代码？
嗨 Muzib 我也添加了代码
我不明白ScaleFactor 是如何改变椭圆的比例的，你说的平滑缩放是什么意思。让我猜猜，为了使点不那么离散，您是否尝试获取鼠标移动事件之间的中间点？ docs.microsoft.com/en-us/uwp/api/…
我在路径数据中有椭圆几何，应该按比例增加或减少我正在按比例因子管理。请查看更新的问题
这是EllipseGeometry 内的Path？

标签： uwp

【解决方案1】：

您可以尝试使用Storyboard 来平滑您的 Scale 变换。

xaml

<Page.Resources>
    <Storyboard x:Name="ScaleStoryboard">
        <DoubleAnimation x:Name="ScaleXAnimation" Duration="0:0:0.5" Storyboard.TargetName="CompositeTransform"
                         Storyboard.TargetProperty="ScaleX"/>
        <DoubleAnimation x:Name="ScaleYAnimation" Duration="0:0:0.5" Storyboard.TargetName="CompositeTransform"
                         Storyboard.TargetProperty="ScaleY"/>
    </Storyboard>
</Page.Resources>

...

<Path>
    ...
   <Path.RenderTransform>
       <ScaleTransform 
                    CenterX="125" CenterY="100"   
                    x:Name="EllipseScaleTransform"/>
   </Path.RenderTransform>
    ...
</Path>

...

xaml.cs

private void PostureDifficultyPath_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    // other code
    ScaleXAnimation.To = ScaleYAnimation.To = MyScale;
    ScaleStoryboard.Begin();
    e.Handled = true;
}

最好的问候。

【讨论】：