javascript - 固定角度に沿ってベクトルを「まっすぐに」移動する

Question

私はこれに対する答えを探し、提案された多くの解決策を試しましたが、どれもうまくいかないようです。私はこれに永遠に苦労してきたので、どんな洞察も大歓迎です。

JS キャンバスに 3 つの形状 (私が推測するベクトル) があり、それぞれの方向は 0 からの角度と幅で表されます。これらの形状の 1 つを、その方向から「まっすぐ」ドラッグする必要があります。これは言葉で説明するのが難しいので、私が作成した図を見てください:

中央 (対角) の形状は 45 度です。その原点は赤い点 (x1,y1) です。ユーザーが図形をドラッグすると、マウスが緑色の点 (x2,y2) に置かれます。形状の原点は左下にあるため、ユーザーが形状の原点から外側にまっすぐドラッグしたかのように、薄い青色の形状の位置に形状を配置する必要があります。

関係ないと思いますが、これを行うために使用しているライブラリは KineticJS です。問題の解決に役立つ可能性のあるコードといくつかの情報を以下に示します。このコードは、マウスの上に形状を配置しますが、これは私が望むものではありません:

var rotationDeg = this.model.get("DisplayOri"), // rotation in degrees
    rotationRadians = rotationDeg * Math.PI / 180, // rotation in rads
    unchanged = this.content.getAbsolutePosition(),  // {x,y} of the shape before any dragging

    dragBoundFunc = function (changed) {
        // called on a mouseMove event, so changed is always different and is the x,y of mouse on stage
        var delta = {
            x: changed.x - unchanged.x,
            y: changed.y - unchanged.y
        };

        return changed; // go to the mouse position
    };

[編集] 「リターン デルタ」の明白な機能が機能しないことを言及しておく必要があります。