如何在 WPF 中模拟悬挂电缆？

Question

我有一个非常“基于连接”的应用程序，即多个输入/输出。

“电缆”的 UI 概念正是我所寻找的，以便让用户清楚地了解该概念。 Propellerhead 在其音频组件 Reason 软件中采用了类似的方法，如这段 YouTube 视频（快进至2m:50s)。

我可以通过绘制从 A 点到 B 点的样条线来使这个概念在 GDI 中发挥作用，必须有一种更优雅的方法来使用路径或 WPF 中的某些东西来实现此目的，但是您从哪里开始呢？有没有好方法来模拟抓住电缆并摇动时电缆摆动的动画？

如果这个轮子已经为 WPF 发明了，我也愿意接受控制库（商业或开源）。

更新：感谢到目前为止答案中的链接，我快要完成了。

我以编程方式创建了一条 BezierCurve，其中点 1 为 (0 , 0)，点 2 是底部“悬挂”点，点 3 是鼠标光标所在的位置。我为 Point 2 创建了一个 PointAnimation ，并对其应用了 ElasticEase 缓动函数，以提供“摆动”效果（即，稍微弹动中间点）。

唯一的问题是，动画似乎运行得有点晚。每次鼠标移动时我都会启动故事板，有更好的方法来制作这个动画吗？到目前为止，我的解决方案位于此处：

Bezier Curve Playground

代码：

private Path _path = null;
private BezierSegment _bs = null;
private PathFigure _pFigure = null;
private Storyboard _sb = null;
private PointAnimation _paPoint2 = null;
ElasticEase _eEase = null;

private void cvCanvas_MouseMove(object sender, MouseEventArgs e)
{
    var position = e.GetPosition(cvCanvas);
    AdjustPath(position.X, position.Y);
}

// basic idea: when mouse moves, call AdjustPath and draw line from (0,0) to mouse position with a "hang" in the middle
private void AdjustPath(double x, double y)
{
    if (_path == null)
    {
        _path = new Path();
        _path.Stroke = new SolidColorBrush(Colors.Blue);
        _path.StrokeThickness = 2;
        cvCanvas.Children.Add(_path);

        _bs = new BezierSegment(new Point(0, 0), new Point(0, 0), new Point(0, 0), true);

        PathSegmentCollection psCollection = new PathSegmentCollection();
        psCollection.Add(_bs);

        _pFigure = new PathFigure();
        _pFigure.Segments = psCollection;
        _pFigure.StartPoint = new Point(0, 0);


        PathFigureCollection pfCollection = new PathFigureCollection();
        pfCollection.Add(_pFigure);

        PathGeometry pathGeometry = new PathGeometry();
        pathGeometry.Figures = pfCollection;

        _path.Data = pathGeometry;
    }

    double bottomOfCurveX = ((x / 2));
    double bottomOfCurveY = (y + (x * 1.25));

    _bs.Point3 = new Point(x, y);

    if (_sb == null)
    {
        _paPoint2 = new PointAnimation();

        _paPoint2.From = _bs.Point2;
        _paPoint2.To = new Point(bottomOfCurveX, bottomOfCurveY);
        _paPoint2.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
        _eEase = new ElasticEase();

        _paPoint2.EasingFunction = _eEase;
        _sb = new Storyboard();

        Storyboard.SetTarget(_paPoint2, _path);
        Storyboard.SetTargetProperty(_paPoint2, new PropertyPath("Data.Figures[0].Segments[0].Point2"));

        _sb.Children.Add(_paPoint2);
        _sb.Begin(this);                
    }

    _paPoint2.From = _bs.Point2;
    _paPoint2.To = new Point(bottomOfCurveX, bottomOfCurveY);

    _sb.Begin(this);
}

Answer 1

如果您想要真正的动态运动（即，当您“摇动”鼠标指针时，您可以创建沿着绳索传播的波），您将需要使用有限元技术。但是，如果您可以接受静态行为，则可以简单地使用贝塞尔曲线。

首先，我将简要描述有限元方法，然后详细介绍静态方法。

动态方法

将“绳索”划分为大量（1000 个左右）“元素”，每个元素都有一个位置和速度向量。使用 CompositionTarget.Rendering 事件计算每个元素的位置，如下所示：

• 计算每个元素沿“绳索”从相邻元素受到的拉力，该拉力与元素之间的距离成正比。假设绳索本身没有质量。

• 计算每个“元素”上的净力矢量，其中包括沿绳索的每个相邻元素的拉力，加上恒定的重力。

• 使用质量常数将力矢量转换为加速度，并使用运动方程更新位置和速度。

• 使用带有 BeginFigure 和 PolyLineTo 的 StreamGeometry 构建来绘制线条。有了如此多的点，就没有理由进行额外的计算来创建三次贝塞尔曲线近似。

静态方法

将绳索分成大约 30 段，每段都是悬链线 y = a cosh(x/a) 的三次贝塞尔近似。您的末端控制点应位于悬链线曲线上，平行线应与悬链线相切，并且控制线长度根据悬链线的二阶导数设置。

在这种情况下，您可能还想渲染 StreamGeometry，使用 BeginFigure 和 PolyBezierTo 来构建它。

我会将其实现为类似于矩形和椭圆形的自定义形状子类“悬链线”。在这种情况下，您只需重写 DefineingGeometry 属性即可。为了提高效率，我还将重写 CacheDefiningGeometry、GetDefiningGeometryBounds 和 GetNaturalSize。

您首先需要决定如何参数化悬链线，然后为所有参数添加 DependencyProperties。确保在 FrameworkPropertyMetadata 中设置 AffectsMeasure 和 AffectsRender 标志。

一种可能的参数化是 XOffset、YOffset、Length。另一个可能是 XOffset、YOffset、SagRelativeToWidth。这取决于最容易绑定的内容。

定义 DependencyProperties 后，实现 DefiningGeometry 属性来计算三次贝塞尔曲线控制点、构造 StreamGeometry 并返回它。

如果这样做，您可以将悬链线控件放置在任何地方并获得悬链线曲线。

Answer 2

路径中的用户贝塞尔曲线段。

http://www.c-sharpcorner.com/UploadFile/dbeniwal321/WPFBezier01302009015211AM /WPFBezier.aspx

Answer 3

恕我直言，“悬挂”（物理模拟）电缆是一种过度使用的情况 - 注重外观而不是可用性。

您确定您这样做不会扰乱用户体验吗？

在基于节点/连接的 UI 中，我发现清晰连接（例如在 Quartz Composer 中：http://ellington.tvu.ac.uk/ma/wp-content/uploads/2006/05/images/Quartz%20Composer_screenshot_011.png< /a> ）比像摆动电缆那样引人注目的东西更重要，这些电缆的方向与实际连接点的方向不同（由于重力而向下）。 （同时消耗 CPU 周期进行模拟，这在其他地方可能更有用）

只是我的 0.02 美元