Javascript 移动向量"；“直截了当”；沿固定角度

我一直在寻找这个问题的答案，并尝试了许多建议的解决方案，但似乎都没有奏效。我一直在努力解决这一问题，因此非常感谢您的任何见解

我在JS画布上有3个形状（我想是向量），每个形状的方向表示为0度和宽度。我需要将这些形状中的一个从其方向“笔直地”拖出。这很难用文字解释，因此请查看我创建的图形：

中间（对角线）形状为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
    };

---

[编辑]我应该提到，明显的“返回增量”不起作用。

听起来你想限制对象的移动

确定表示约束轴的向量：也就是说，我们只希望沿这条线发生运动。从您的图形中可以看出，这是从红点到左侧的短线方向。该向量的方向为

-1/m

，其中

m

是我们正在移动的直线的斜率

限制运动。移动由鼠标移动增量表示，但我们只希望移动的部分沿约束轴的方向移动。这是通过两个向量的点积来完成的

所以在伪代码中

 m = (line.y2 - line.y1)/(line.x2 - line.x1)
 constraintSlope = -1/m

 contraintVector = {1, constraintSlope}  //unit vector in that direction
 userMove = {x2-x1, y2-y1}               //vector of mouse move direction

 projection = userMove.x * constraintVector.x + userMove.y * constraintVector.y

 translation = projection * constraintVector   //scaled vector

---

+1@Mikeb：很好的解决方案！它非常适合OP的需要，因为KineticJS允许自定义dragBoundFunc将您的约束解决方案放入其中。我可以看到这正是我需要的，但我不确定如何获得您所谈论的行的x2，y2。该线的x2，y2是蓝色形状需要捕捉到的最终端点。。。换句话说，line.x2，line.y2是我在原始问题中试图找到的同一点，不是吗？你正在移动的线有两个端点-红点在其中一个端点附近/上方，另一个是深蓝色（未移动）线的另一端。哦-我误解了。我认为“直线”是连接红色原点和目标x，y的线段。谢谢很抱歉，我花了这么长时间才将此标记为答案-我已经转移到其他问题上了！