沿路径绘制平行线 - PHP GD

Question

我需要使用 PHP 的图像库来绘制类似地铁地图的东西（沿同一路径的多条路线）。这是一个例子：

********* ******** * ******* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ******************** * ********************* ************************

沿着这条路径画一条线很容易。我不知道如何绘制多条沿着路径但它们之间的空间相等的线。

Answer 1

对于给定的点 A，以及穿过它的更多线，对于第一个点，您必须决定点是进入轨道“内部”（B）还是“外部”（C）：

  ********C
  D******A *
  Q*****B * *
         * * *
          * E *

现在，您可以计算点 B 到点 A 的偏移量，作为从长度 = 偏移量（例如 5px）沿角度的路径，即“内部”B 的 AE 和 AD 之间的顺时针角度的一半（或“外部”C 的从 AD 到 AE 的顺时针角度，或者稍后仅使用负偏移）。你会想要 B 点在距离 A 5px 的地方，沿着穿过 A 的线，角度为 angle AE + ((angle AD - angle AE) / 2)

我绝不是数学奇才，我唯一需要像在 javascript 中那样计算角度的时候，我会举个例子，你可以重写 PHP （任何人 懂数学，如有需要，请随意大笑和纠正）：

var dx = b.x - a.x;
var dy = b.y - a.y;
if(dx == 0 && dy == 0){
    answer = 0;
} else if(dx > 0 && dy >= 0 ){
    answer = Math.atan(dy/dx);
} else if(dx <= 0 && dy > 0){
    answer = Math.atan(dx/dy) + (Math.PI * 0.5);
} else if(dx <= 0 && dy <= 0){
    answer = Math.atan(dy/dx) + Math.PI;
} else if(dx >= 0 && dy <= 0){
    answer = Math.atan(dy/dx) + (Math.PI * 1.5);
}

所以，在 D=(0,10),A=(10,10), E=(20,20) 的网格中：

• 通过 AE 的角度 = 45° (PI/4 rad)，通过 AD = 180° (PI rad)
• 那么通过 AB 的角度为 (45 + ((180-45)/2))=> 112.5° (5/8 PI rad)
• 从 A=(10,10) 到角度 112.5° 的 5px 偏移量为您提供了 B 的位置：
  • Bx = Ax + (cos(angle) * 5) = +/- 8.1
  • By = Ay + (sin(angle) * 5) = +/- 14.6
• 在起点 D 旁边的“兄弟”点 Q 上，您没有以前的参考路径/计算角度，所以我会取垂直线：角度 DQ = 角度 DA + 90° (PI/ 2 rad)（在示例中你可以只做 Dy+5，但也许你并不总是平行于 2 轴之一开始）
• 冲洗并重复所有其他点，在计算的坐标之间画线。

Answer 2

为了补充 Wrikken 的回答，这里有一个使用 Objective-C 和从这个线程和其他线程重建的 cocos2d-iphone 引擎的实际代码示例。不需要 atan，而是使用叉积，请参阅代码示例末尾的 C 函数和 this link。

我还简单地将偏移向量的符号从 A 切换到 B，以便将向量从 A 获取到 C。这样可以避免调用 cosf/sinf 两次。

PS：此代码在从i = 0 到i < numVertices 的for 循环中运行。

CGPoint splinePoint = splinePoints[i];

CGPoint prevPoint = (i == 0) ? splinePoint : splinePoints[i - 1];
CGPoint railPoint = splinePoint;
CGPoint nextPoint = (i == (numVertices-1)) ? splinePoint : splinePoints[i + 1];

CGPoint toPrevPoint = ccpSub(railPoint, prevPoint);
CGPoint toNextPoint = ccpSub(railPoint, nextPoint);
float angleToPrevPoint = ccpAngleSigned(kAngleOriginVector, toPrevPoint);
float angleToNextPoint = ccpAngleSigned(kAngleOriginVector, toNextPoint);
float offsetAngle = 0.0f;

if (i > 0 && i < (numVertices - 1))
{
    offsetAngle = angleToNextPoint + ((angleToPrevPoint-angleToNextPoint) / 2);
}
else if (i == 0)
{
    offsetAngle = angleToNextPoint + M_PI_2;
}
else
{
    offsetAngle = angleToPrevPoint + M_PI_2;
}

CGPoint offsetLeftRail, offsetRightRail, offsetRail;
offsetRail.x = cosf(offsetAngle) * railOffsetFromCenter;
offsetRail.y = sinf(offsetAngle) * railOffsetFromCenter;
offsetLeftRail = ccpAdd(railPoint, offsetRail);
offsetRightRail = ccpAdd(railPoint, ccpMult(offsetRail, -1.0f));

if (isPointToTheLeftOfLine(prevPoint, railPoint, offsetLeftRail))
{
    leftRailSplinePoints[i] = offsetLeftRail;
    rightRailSplinePoints[i] = offsetRightRail;
}
else
{
    leftRailSplinePoints[i] = offsetRightRail;
    rightRailSplinePoints[i] = offsetLeftRail;
}

BOOL isPointToTheLeftOfLine(CGPoint start, CGPoint end, CGPoint test)
{
    return ((end.x - start.x) * (test.y - start.y) -
            (end.y - start.y) * (test.x - start.x)) > 0;
}

这有助于我在铁轨上画出铁轨：