मेरे पास एक ऐसा एप्लिकेशन है जो बहुत "कनेक्शन-आधारित" है, यानी एकाधिक इनपुट/आउटपुट।मैं डब्ल्यूपीएफ में एक लटकते केबल का अनुकरण कैसे कर सकता हूं?
"केबल" की यूआई अवधारणा बिल्कुल वही है जो मैं उपयोगकर्ता को अवधारणा को स्पष्ट करने के लिए देख रहा हूं। प्रोपेलरहेड ने this YouTube video (fast forward to 2m:50s) में चित्रित ऑडियो घटकों के लिए अपने कारण सॉफ्टवेयर में एक समान दृष्टिकोण लिया।
मैं इस अवधारणा को बिंदु ए से बिंदु बी तक एक स्पलीन चित्रित करके जीडीआई में काम कर सकता हूं, इसके लिए पथ या कुछ का उपयोग करने के लिए एक और शानदार तरीका होना चाहिए, लेकिन आप कहां से शुरू करते हैं? जब आप इसे पकड़ते हैं और इसे हिलाते हैं तो केबल स्विंग की एनीमेशन अनुकरण करने का कोई अच्छा तरीका है?
यदि पुस्तकालयों (वाणिज्यिक या ओपन सोर्स) को नियंत्रित करने के लिए मैं भी खुला हूं तो इस व्हील का पहले से ही WPF के लिए आविष्कार किया गया है।
अद्यतन: अब तक उत्तर में दिए गए लिंक के लिए धन्यवाद, मैं लगभग वहां हूं।
मैं प्वाइंट 1 जा रहा है (0, 0), प्वाइंट 2 जा रहा है नीचे "लटका" बिंदु के साथ एक BezierCurve प्रोग्राम के रूप में बना लिया है, और प्वाइंट 3 किया जा रहा है जहाँ भी माउस कर्सर है। मैंने को ElasticEase के साथ PointAnimation बनाया है, जो "स्विंगिंग" प्रभाव देने के लिए लागू किया गया है (यानी, थोड़ा सा बीच बिंदु को उछालते हुए)।
केवल समस्या यह है कि एनीमेशन थोड़ा देर से चल रहा है। जब भी माउस चलता है, मैं स्टोरीबोर्ड शुरू कर रहा हूं, क्या इस एनीमेशन को करने का एक बेहतर तरीका है? मेरे समाधान अब तक यहाँ स्थित है:
कोड:
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);
}
क्या आप एक कैटेनरी वक्र खींचने की कोशिश कर रहे हैं? http://en.wikipedia.org/wiki/Catenary – Gabe
@Gabe, हाँ, ऐसा लगता है कि वक्र का प्रकार मैं – Brandon
देख रहा हूं क्या आपने http://www.tinaja.com/glib/bezcat देखा है। पीडीएफ? – Gabe