WPF纯触摸应用实现台球式弹弓交互的技术求助

Hey Simon, great job getting the basics of your touch-based WPF bouncing control up and running! Let’s work through that dual-touch slingshot issue you’re hitting—here are a couple of practical approaches that won’t break your existing bounce/inertia logic.

Approach 1: Manual Physics Calculation (No Manipulation Event Hacking) #

Since constructing ManipulationEventArgs is tricky, let’s skip that entirely and calculate the slingshot velocity manually using touch point data. This plays nicely with your existing bounce logic because we’ll just feed the calculated velocity directly into your control’s existing movement system.

How to Implement: #

1. Track Touch Points: Keep a collection of active touch points in your MainWindow as users interact.
2. Calculate Slingshot Force on Release:
   • When two touches are active, compute the midpoint of the two touch positions.
   • Find the vector from this midpoint to your BouncingUserControl’s center.
   • Use the distance between the two touch points to determine "elastic strength" (longer distance = faster launch).
3. Feed Velocity to Your Existing Logic: Add a public method to BouncingUserControl to set its initial velocity, then pass the calculated value when the user releases a touch.

Code Snippet Example:

// In MainWindow
private List<TouchPoint> _activeTouches = new List<TouchPoint>();
private BouncingUserControl _targetControl;

private void Canvas_TouchDown(object sender, TouchEventArgs e)
{
    _activeTouches.Add(e.GetTouchPoint(canvas));
    // Update elastic line display here (you already have this logic)
}

private void Canvas_TouchUp(object sender, TouchEventArgs e)
{
    if (_activeTouches.Count == 2)
    {
        var tp1 = _activeTouches[0];
        var tp2 = _activeTouches[1];
        
        // Calculate midpoint of the two touch points
        var touchMidpoint = new Point(
            (tp1.Position.X + tp2.Position.X) / 2,
            (tp1.Position.Y + tp2.Position.Y) / 2
        );
        
        // Calculate control center position
        var controlCenter = new Point(
            Canvas.GetLeft(_targetControl) + _targetControl.Width / 2,
            Canvas.GetTop(_targetControl) + _targetControl.Height / 2
        );
        
        // Compute direction vector (away from touch midpoint)
        var direction = new Vector(
            controlCenter.X - touchMidpoint.X,
            controlCenter.Y - touchMidpoint.Y
        );
        
        // Calculate elastic strength based on touch distance
        var touchDistance = tp1.Position.DistanceTo(tp2.Position);
        const float ElasticityFactor = 0.4f; // Tweak this for feel
        
        // Normalize direction and apply force
        var launchVelocity = direction.Normalize() * touchDistance * ElasticityFactor;
        
        // Pass velocity to your existing control logic
        _targetControl.SetInitialVelocity(launchVelocity.X, launchVelocity.Y);
    }
    else if (_activeTouches.Count == 1)
    {
        // Trigger your existing single-touch inertia logic
        _targetControl.ApplySingleTouchInertia();
    }
    
    _activeTouches.Clear();
    // Hide elastic line here
}

Add this method to your BouncingUserControl to accept the calculated velocity:

public void SetInitialVelocity(double x, double y)
{
    // Assume you have private fields for current velocity
    _currentVelocityX = x;
    _currentVelocityY = y;
    // Resume your bounce/update loop if paused during manipulation
    ResumeMovementLoop();
}

Approach 2: Use Built-in Manipulation Events (No EventArgs Construction) #

If you want to leverage WPF’s built-in touch manipulation system, you don’t need to manually construct ManipulationEventArgs. Instead, enable manipulation directly on your BouncingUserControl and hook into the system-provided events.

How to Implement: #

1. Enable Manipulation on the Control:
   Add ManipulationMode="All" to your BouncingUserControl XAML:

   <UserControl x:Class="YourNamespace.BouncingUserControl"
                ManipulationMode="All">
       <Ellipse Fill="DarkOrange" Width="60" Height="60" />
   </UserControl>
   

2. Handle Manipulation Events:
   Hook into the manipulation events in your control’s code-behind to track movement and calculate velocity on release. For dual-touch scenarios, use the Manipulators collection to access both touch points.

Code Snippet Example:

// In BouncingUserControl
private bool _isManipulating = false;
private Vector _currentVelocity;

public BouncingUserControl()
{
    InitializeComponent();
    ManipulationStarted += OnManipulationStarted;
    ManipulationDelta += OnManipulationDelta;
    ManipulationCompleted += OnManipulationCompleted;
}

private void OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
    // Pause your existing bounce logic during manipulation
    _isManipulating = true;
    _currentVelocity = new Vector(0, 0);
}

private void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
    // Update control position during drag
    var newLeft = Canvas.GetLeft(this) + e.DeltaManipulation.Translation.X;
    var newTop = Canvas.GetTop(this) + e.DeltaManipulation.Translation.Y;
    Canvas.SetLeft(this, newLeft);
    Canvas.SetTop(this, newTop);
    
    // Notify MainWindow to update elastic line if dual-touch is active
    if (e.Manipulators.Count == 2)
    {
        var touch1 = e.Manipulators.ElementAt(0);
        var touch2 = e.Manipulators.ElementAt(1);
        OnDualTouchDetected(touch1.Position, touch2.Position); // Custom event
    }
}

private void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
    _isManipulating = false;
    
    if (e.Manipulators.Count == 2)
    {
        // Calculate slingshot velocity using the same logic as Approach 1
        var touch1 = e.Manipulators.ElementAt(0);
        var touch2 = e.Manipulators.ElementAt(1);
        var midpoint = new Point(
            (touch1.Position.X + touch2.Position.X)/2,
            (touch1.Position.Y + touch2.Position.Y)/2
        );
        var controlCenter = new Point(Canvas.GetLeft(this)+Width/2, Canvas.GetTop(this)+Height/2);
        var direction = new Vector(controlCenter.X - midpoint.X, controlCenter.Y - midpoint.Y);
        var distance = touch1.Position.DistanceTo(touch2.Position);
        
        _currentVelocity = direction.Normalize() * distance * 0.4f;
    }
    else
    {
        // Use WPF's built-in inertia velocity for single-touch
        _currentVelocity = e.Velocities.LinearVelocity;
    }
    
    // Resume your bounce/update logic
    ResumeMovementLoop();
}

// Custom event to notify MainWindow about dual-touch points
public event Action<Point, Point> DualTouchDetected;
private void OnDualTouchDetected(Point p1, Point p2)
{
    DualTouchDetected?.Invoke(p1, p2);
}

Key Tips to Avoid Breaking Existing Logic #

• Pause Movement During Manipulation: Make sure your control’s bounce/update loop stops while the user is dragging, so the control doesn’t move unexpectedly during interaction.
• Tweak Elasticity Factor: Adjust the ElasticityFactor value until the slingshot feel matches your expectations (start with 0.3-0.5 and iterate).
• Reuse Existing Bounce/Deceleration: Both approaches feed velocity into your existing movement system, so you don’t need to rewrite the boundary bounce or friction logic.

内容的提问来源于stack exchange，提问作者Simon Ferreira