A JavaScript method to turn thick lines into polygons

Thick Line to Polygon JS

/**
 * @author Jan Marsch (@kekscom)
 * @example see http://jsfiddle.net/osmbuildings/2e5KX/5/
 * @example thickLineToPolygon([{x:50,y:155}, {x:75,y:150}, {x:100,y:100}, {x:50,y:100}], 20)
 * @param polyline {array} a list of point objects in format {x:75,y:150}
 * @param thickness {int} line thickness
 */

var thickLineToPolygon = (function () {
    function getOffsets(a, b, thickness) {
        var
            dx = b.x - a.x,
            dy = b.y - a.y,
            len = Math.sqrt(dx * dx + dy * dy),
            scale = thickness / (2 * len)
        ;
        return {
            x: -scale * dy,
            y:  scale * dx
        };
    }
    
    function getIntersection(a1, b1, a2, b2) {
        // directional constants
        var
            k1 = (b1.y - a1.y) / (b1.x - a1.x),
            k2 = (b2.y - a2.y) / (b2.x - a2.x),
            x, y,
            m1, m2
        ;
    
        // if the directional constants are equal, the lines are parallel
        if (k1 === k2) {
            return;
        }
    
        // y offset constants for both lines
        m1 = a1.y - k1 * a1.x;
        m2 = a2.y - k2 * a2.x;
        
        // compute x 
        x = (m1 - m2) / (k2 - k1);
    
        // use y = k * x + m to get y coordinate
        y = k1 * x + m1;
    
        return { x:x, y:y };
    }
    
    function me(points, thickness) {
        var
            off,
            poly = [],
            isFirst, isLast,
            prevA, prevB,
            interA, interB,
            p0a, p1a, p0b, p1b
        ;
    
        for (var i = 0, il = points.length - 1; i < il; i++) {
            isFirst = !i;
            isLast = (i === points.length - 2);
    
            off = getOffsets(points[i], points[i+1], thickness);
    
            p0a = { x:points[i  ].x + off.x, y:points[i  ].y + off.y };
            p1a = { x:points[i+1].x + off.x, y:points[i+1].y + off.y };
            p0b = { x:points[i  ].x - off.x, y:points[i  ].y - off.y };
            p1b = { x:points[i+1].x - off.x, y:points[i+1].y - off.y };
    
            if (!isFirst) {
                if (interA = getIntersection(prevA[0], prevA[1], p0a, p1a)) {
                    poly.unshift(interA);
                }
                if (interB = getIntersection(prevB[0], prevB[1], p0b, p1b)) {
                    poly.push(interB);
                }
            }
    
            if (isFirst) {
                poly.unshift(p0a);
                poly.push(p0b);
            }
    
            if (isLast) {
                poly.unshift(p1a);
                poly.push(p1b);
            }
    
            if (!isLast) {
                prevA = [p0a, p1a];
                prevB = [p0b, p1b];
            }
        }
    
        return poly;
    }

    return me;
}());

Nice! In my case, I had some unexpected lines shooting out of the polygon. I replaced if (k1 === k2) with if (Math.abs(k1 - k2)<0.0000001) to account for nearly parallel lines. Adjust the tolerance as needed.

Makes sense 👍

Hello,

What is the term of use for the codes?

Thank you!

Just do what you like. :-)

…

Am 24.09.2021 um 06:27 schrieb TextTL ***@***.***>: @TextTL commented on this gist. Hello, What is the term of use for this codes? Thank you! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/4194148#gistcomment-3903401>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOM336QFDZG2EF3JA24P5DUDP42VANCNFSM4O2TWXJQ>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

I truly appreciate it.

Thank you!