javascript - 计算带有笔划的路径的路径(多边形) - Javascript或伪代码

Question

所以我有一个形成路径的点数组 (x, y)。我需要计算周围多边形的点。如果您熟悉 iOS，那么本质上就是 CGPathCreateCopyByStrokingPath。不幸的是，ObjC 不是一个选择。我需要用 Javascript、PHP 等实现它。

    -------
    |  |  |
    |  |  |
    \  \  \
     \  \  \
      \  \  \
       \  \  \
        \  \  \-----------
         \  \----------- |
          \---------------

对糟糕的 ASCII 艺术表示歉意。

我有一个 Javascript 的半工作版本，但我有 Angular 点问题。

        function pathToPoly(points) {
            var numOfPoints = points.length;

            var fullPath = [];
            var leftPaths = [];
            var rightPaths = [];

            var pad = 20;

            for(var i=0; i<numOfPoints-1; i++) {
                var pointA = points[i];
                var pointB = points[i+1];

                var slope = (pointB.Y - pointA.Y) / (pointB.X - pointA.X);
                var inverseSlope = -1 / slope;
                var inverseAngle = Math.atan(inverseSlope);

                if(inverseAngle < 0) {
                    leftPaths.push({
                        X1: pointA.X - pad * Math.cos(inverseAngle),
                        Y1: pointA.Y - pad * Math.sin(inverseAngle),
                        X2: pointB.X - pad * Math.cos(inverseAngle),
                        Y2: pointB.Y - pad * Math.sin(inverseAngle)
                    });

                    rightPaths.push({
                        X1: pointA.X + pad * Math.cos(inverseAngle),
                        Y1: pointA.Y + pad * Math.sin(inverseAngle),
                        X2: pointB.X + pad * Math.cos(inverseAngle),
                        Y2: pointB.Y + pad * Math.sin(inverseAngle)
                    });
                } else {
                    rightPaths.push({
                        X1: pointA.X - pad * Math.cos(inverseAngle),
                        Y1: pointA.Y - pad * Math.sin(inverseAngle),
                        X2: pointB.X - pad * Math.cos(inverseAngle),
                        Y2: pointB.Y - pad * Math.sin(inverseAngle)
                    });

                    leftPaths.push({
                        X1: pointA.X + pad * Math.cos(inverseAngle),
                        Y1: pointA.Y + pad * Math.sin(inverseAngle),
                        X2: pointB.X + pad * Math.cos(inverseAngle),
                        Y2: pointB.Y + pad * Math.sin(inverseAngle)
                    });
                }

                if(drawSides) {
                    var leftSide = leftPaths[i];
                    var rightSide = rightPaths[i];

                    context.beginPath();

                    context.moveTo(leftSide.X1, leftSide.Y1);
                    context.lineTo(leftSide.X2, leftSide.Y2);

                    context.lineWidth = 1;
                    context.strokeStyle = 'yellow';
                    context.stroke();

                    context.beginPath();

                    context.moveTo(rightSide.X1, rightSide.Y1);
                    context.lineTo(rightSide.X2, rightSide.Y2);

                    context.lineWidth = 1;
                    context.strokeStyle = 'cyan';
                    context.stroke();
                }
            }

            for(var i=0; i<numOfPoints-1; i++) {
                var line1 = leftPaths[i];
                var line2 = leftPaths[i+1];

                fullPath.push({
                    X: line1.X1,
                    Y: line1.Y1
                });
                fullPath.push({
                    X: line1.X2,
                    Y: line1.Y2,
                });

                if(line2) {
                    fullPath.push({
                        X: line2.X1,
                        Y: line2.Y1,
                    });
                }
            }

            fullPath.push({
                X: leftPaths[numOfPoints-2].X2,
                Y: leftPaths[numOfPoints-2].Y2
            });

            for(var i=numOfPoints-2; i>=0; i--) {
                var line1 = rightPaths[i];
                var line2 = rightPaths[i-1];

                fullPath.push({
                    X: line1.X2,
                    Y: line1.Y2
                });

                fullPath.push({
                    X: line1.X1,
                    Y: line1.Y1,
                });
                if(line2) {
                    fullPath.push({
                        X: line2.X2,
                        Y: line2.Y2,
                    });
                }
            }

            fullPath.push({
                X: rightPaths[0].X1,
                Y: rightPaths[0].Y1
            });

            return fullPath;
        }

此代码在每个线段的每一侧绘制平行线，并将它们连接起来。但对于转弯，我的方法创建了一个无效的多边形。两侧“交换”并生成“相反”区域。能够计算面积对于我的应用程序至关重要。

示例(我的声誉太低，无法发布图像):蓝色工作正常，但红色失败(注意右下角如何转动，两侧交换)。

![example](http://www.originalfunction.com/stackoverflow_16590082-1.png)

有什么建议吗？

Answer 1

看起来当且仅当线弯曲成锐 Angular 时(基于小样本)它才会失败，对吗？

我还没有彻底了解该算法，只是一个有根据的猜测:我想知道您是否考虑到对于 atan(slope) 有两个正确答案，并且 javascript atan() 函数可能不会返回您期望的答案(偏离 180 度)？

atan2(y, x)如果您可以使用它，就可以消除这种歧义。