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

bezier curve playground

private path_path=null;
private bezierSegment _bs=空;
private pathFigure_pfigure=空;
private storyboard _sb=null;
private pointanimation _papoint2=空;
弹性蛋白酶=空;

private void cvccanvas_mousemove(对象发送器,mouseEventargs e)
{
var位置=e.getposition(cvcanvas);
调整路径(位置x,位置y);
}

//基本思想:鼠标移动时,调用adjustpath,从(0,0)到鼠标位置画线,中间挂起
专用空隙调整路径(双x,双y)
{
if(_path==null)
{
_路径=新路径();
_ path.stroke=新SolidColorBrush(colors.blue);
_ path.strokethicness=2;
cvcanvas.children.add(_path);

_ bs=新贝塞尔段(新点(0,0),新点(0,0),新点(0,0),真);

pathSegmentCollection psCollection=new pathSegmentCollection();
pscollection.add(_bs);

_ pfigure=new pathFigure();
_ pfigure.segments=pscollection;
_ pfigure.startpoint=新点(0,0);


pathFigureCollection pfCollection=new pathFigureCollection();
pfcollection.add(_pfigure);

pathgeometry pathgeometry=new pathgeometry();
pathgeometry.figures=pfcollection;

_ path.data=路径几何;
}

双底曲线=(x/2));
双底曲线y=(y+(x*1.25));

_ bs.point3=新点(x,y);

如果(_sb==null)
{
_ papoint2=新的pointAnimation();

_ papoint2.from=_bs.point2;
_ papont2.to=新点(bottoofcurvex,bottoofcurvey);
_ papoint2.duration=新的持续时间(TimeSpan.From毫秒(1000));
_ eease=新弹性蛋白酶();

_ papoint2.easingfunction=eease;
_ sb=新故事板();

storyboard.settarget(_papoint2,_path);
storyboard.settargetproperty(_papoint2,new propertypath(“data.figures[0].segments[0].point2”));

_添加(papoint2);
_开始(这个);
}

_ papoint2.from=_bs.point2;
_ papont2.to=新点(bottoofcurvex,bottoofcurvey);

_开始(这个);
}
< /代码> <. 多个输入/输出。


“电缆”的用户界面概念正是我想要让用户明白这个概念的地方。在音频部件的推理软件中,螺旋桨头部采用了类似的方法,如this YouTube video (fast forward to 2m:50s).


我可以在GDI中通过绘制从点A到点B的样条曲线来实现这个概念,这里必须有一种更优雅的方法来使用路径或WPF中的某些内容,但是从哪里开始呢?有没有一个很好的方法来模拟电缆摆动的动画,当你抓住它并摇晃它?


如果这个轮子是为WPF而发明的,那么我也对控制库(商业的或开源的)开放。


更新:由于到目前为止答案中的链接,我就快到了。




我创造了一个BezierCurve以编程的方式,第一点是(0, 0)点2是底部的“挂起”点,点3是鼠标光标所在的位置。我创造了一个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);
}