1

我之前问过这个问题,但没有表达清楚,所以请原谅我的重复。这应该更好。

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

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

所以在第一个例子中,用户将线 EF 从左边的位置拖到右边的位置(线 E2F2)。需要发生的是线 EF 增长/缩小,使其斜率保持不变,并且它的开始和结束坐标分别保持在线 DE 和 AF 上。这显示为 E2F2 行。

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

在此处输入图像描述

您需要了解,当拖动线 EF 时,您实际上是在移动坐标“E”。因此,计算第一个坐标很容易。前一个和下一个永远不会改变。所以我基本上有 3 条相关线的斜率和 4 个必要坐标中的 3 个。我需要第四个,所以在我的例子中,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
                });
            }
        }
4

1 回答 1

0

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

您应该能够枚举所有与移动线相交的点的所有线测试。这些将是新的坐标。

wiki 文章中的方程式假定您应该注意的无限长度的行,但实际上应该是您想要的(我认为 - 可能存在边缘情况)。

于 2013-04-29T15:20:46.350 回答