Question

我之前提出过这个问题，但没有明确表达，所以请原谅我复制。这应该会更好。

我需要计算一个坐标的位置，给出三个其他坐标和两个斜率。基本上，两条线的交点。但是，我没有通常可用的所有信息来解决这个问题。

我有一堆由顶点定义的任意形状。用户可以在这些顶点之间拖动一条线，形状应该如下图所示做出反应。

因此，在第一个示例中，用户将线EF从左侧位置拖动到右侧位置（线E2F2）。需要发生的是，线EF增长/收缩使得它的斜率保持不变，并且它的开始和结束坐标分别保留在线DE和AF上。这显示为E2F2行。

这需要足够通用，它可以处理我抛出的任何奇怪或规则的角度。第二组形状显示了一种更简单的方法。用户将行CD拖动到C2D2的位置。注意斜率是如何保持不变的，D2基本上沿着对角线向下滑动，而B2C2和C2D2都延伸了长度。结果是所有3个斜率保持不变，但是线B2C2和C2D2长度增加以保持连接，而线D2E2收缩。

enter image description here

您需要了解拖动线EF时，实际上是在移动坐标“E”。因此，计算第一个坐标很容易。前一个和下一个永远不会改变。所以我基本上有3个相关线的斜率和4个必要坐标中的3个。我需要第4个，所以在我的例子中，F2或D2。

每次坐标移动时，都会在事件上调用此代码。让我们说我们拖动EF线 - 坐标是E.然后。

            var next = this.model.get("next"),  // coordinate F
            nextNext = next.get("next"),   // coordinate A
            nextDx = nextNext.get("x") - next.get("x"),    // delta X of AF
            nextDy = nextNext.get("y") - next.get("y"),   // delta Y of AF

            prev = this.model.get("prev"),    // coordinate D
            prevDx = prev.get("x") - this.model.get("x"),   // delta X of DF
            prevDy = prev.get("y") - this.model.get("y"), // delta Y of DF

            selfDx = next.get("x") - this.model.get("x"),   // delta X of EF
            selfDy = next.get("y") - this.model.get("y"),   // delta Y of EF

            selfX = this.initialCoords.x + this.shape.getX(),   // the new position of E
            selfY = this.initialCoords.y + this.shape.getY(),

            selfM, selfB, prevM, prevB, nextM, nextB, m, x, y, b;


        // check for would-be infinities
        if (selfDx == 0) {



            // **** THIS WHOLE BLOCK IS CORRECT ****





            // i'm vertical
            // we can safely assume prev/next aren't also vertical.  i think?  right?

            prevM = prev.get("slope");
            prevB = prev.get("y") - prevM * prev.get("x");



            var myX = selfX,
                myY = prevM * myX + prevB;

            this.model.set({
                x: myX,
                y: myY
            });



            nextM = next.get("slope");
            nextB = next.get("y") - nextM * next.get("x");



            var nextX = selfX,
                nextY = nextM * nextX + nextB;

            next.set({
                x: nextX,
                y: nextY
            });

        } else if (selfDy == 0) {



            //***** THIS WHOLE BLOCK IS CORRECT **** //



            // i'm horizontal

            if (prevDx == 0) {
                // prev is a vertical line
                this.model.set({
                    y: selfY
                });
            } else {

                prevM = prev.get("slope");
                prevB = prev.get("y") - prevM * prev.get("x");

                var myY = selfY,
                    myX = (selfY - prevB) / prevM;

                this.model.set({
                    x: myX,
                    y: myY
                });
            }



            if (nextDx == 0) {
                // next is a vertical line
                next.set({
                    y: selfY
                });
            } else {
                nextM = next.get("slope");
                nextB = next.get("y") - nextM * next.get("x");

                var nextY = selfY,
                    nextX = (selfY - nextB) / nextM;

                next.set({
                    x: nextX,
                    y: nextY
                });
            }
        } else {

            // HELP HERE - you've chosen to drag an arbitrarily angled line.  Figure out the "next" coordinate given the "current" one.

            selfM = this.model.get("slope");
            selfB = this.model.get("y") - this.model.get("slope") * this.model.get("x");

            if (selfM < 0) {

                prevM = prev.get("slope");
                prevB = prev.get("y") - prevM * prev.get("x");

                var myY = selfY,
                    myX = (selfY - prevB) / prevM;


                // CORRECT, but need "next" position based on this
                this.model.set({
                    x: myX,
                    y: myY
                });



            } else {

                // CORRECT but need "next" position based on this.
                var myX = selfX;
                this.model.set({
                    x: myX
                });
            }
        }

Answer 1

我有类似的情况，并使用此页面作为参考取得了一些成功： http://en.wikipedia.org/wiki/Line-line_intersection

您应该能够枚举所有线路，以测试它们穿过移动线路的任何点。这些将是新的坐标。

wiki文章中的等式假设您应该注意无限长度的行，但实际上应该是您想要的（我认为 - 可能存在边缘情况）。

在给定恒定斜率和改变坐标的情况下找到两条线的交点

1 个答案: