Transforming Intermediate Points of a Wire During Mouse Drag: Methods and Solutions

Problem Description

In electrical experiments a wire is represented as a line composed of an ordered series of points. The goal is to achieve a natural‑looking effect when the mouse is pressed on the wire and dragged, changing the wire’s visual state.

Two Proposed Schemes

1. Insert a point at the mouse‑down position and move only that point while keeping all other points unchanged.

2. Insert a point at the mouse‑down position, keep the first and last points fixed, and move the intermediate points together with the inserted point.

The first scheme is straightforward and not discussed further. The second scheme is the focus, and its difficulty lies in determining how the intermediate points should move.

The segment between the start point and the dragged point is treated as a whole: using the start point as the origin, the segment is first scaled along the direction defined by the start and dragged points (vertical direction unchanged), then rotated to reach the target point.

Problem Analysis and Solving

Let the original start point be O, the dragged point before movement be p0, and an intermediate point be pi. The length |OP| is d and the angle between OP and the x‑axis is θ. After dragging, the new dragged point is p0', the new length is d' and the new angle is θ'. The coordinate system assumes +x to the right and +y upward.

Method 1

For each point perform the following operations:

Clockwise rotation by θ

Scale along the x‑direction by factor d'/d

Counter‑clockwise rotation by θ'

Method 2 (Not Recommended)

This method follows a more complicated geometric construction:

Find the foot of the perpendicular from the intermediate point to line (OP, curP), called itemPG.

Determine OP2 in the rectangle (OP, itemPG, itemP, OP2).

Rotate OP2 counter‑clockwise by θ to obtain rOP2_ (θ = ∠(toP, OP, curP)).

Rotate the intermediate point counter‑clockwise by θ to get ritemP.

Scale the segment (rOP2_, ritemP) by d'/d to obtain the final point P.

This approach is much more complex, harder to understand, and computationally intensive.

Method 3

Observe that moving every point from the start position to the target position can be expressed as a single linear transformation applied to all points; the same transformation matrix works for every point, so it only needs to be computed once.

The transformation matrix (containing only rotation and scaling, no translation) can be derived by solving a system of equations based on the known mapping of the start point p0 to p0'. Let the matrix be [[a, b], [c, d]]. The equations are:

a * x0 + b * y0 = x1   (①)
c * x0 + d * y0 = y1   (②)

Using the perpendicular vector (-y0, x0) and preserving its direction after transformation yields two additional equations:

-a * y0 + b * x0 = -y1'   (③)
-c * y0 + d * x0 =  x1'   (④)

Solving these equations gives:

b = (x1 * y0 - y1' * x0) / (x0² + y0²)   (⑤)
d = (y1 * y0 + x1' * x0) / (x0² + y0²)   (⑥)

Then:

a = (x1 - b * y0) / x0
c = (y1 - d * y0) / x0

If x0 equals 0, the equations can be rearranged to eliminate b and d, yielding:

a = (x1 * x0 + y1' * y0) / (x0² + y0²)
c = (y1 * x0 - x1' * y0) / (x0² + y0²)

Thus all matrix parameters a, b, c, d are obtained.

Effect

Summary

The first method is logically clear and easy to implement but involves more computation per point. The second method is overly complex and not advisable. The third method has a slightly more involved derivation but results in a simple, efficient solution. In practice, one can combine the clear logic of the first method to derive the transformation matrix and then apply that matrix to all points, achieving both readability and performance.