javascript - 沿固定 Angular 移动矢量 "straight out"

Question

我已经搜索了这个问题的答案并尝试了很多建议的解决方案，但似乎都没有用。我一直在为此苦苦挣扎，所以非常感谢任何见解。

我在 JS Canvas 上有 3 个形状(我想是矢量)，每个形状的方向表示为偏离 0 的度数和宽度。我需要从其方向“直接”拖动其中一个形状。这很难用语言解释，所以请查看我创建的图形:

中间(对 Angular 线)形状呈 45 度 Angular 。它的原点是红点 (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
    };

[edit] 我应该提一下，“return delta”这个显而易见的东西是行不通的。

Answer 1

听起来你想约束物体的移动。

1. 确定表示约束轴的向量:也就是说，我们只希望沿着这条线发生运动。从您的绘图中可以看出，这是从红点向左延伸的短线方向。该向量的方向为 -1/m，其中 m 是我们移动的直线的斜率。

2. 约束运动。移动由鼠标移动增量表示 - 但我们只想要该移动在约束轴方向上的部分。这是通过两个向量的点积 完成的。

伪代码

 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