Skip to content

Instantly share code, notes, and snippets.

@kevinrodbe
Last active June 2, 2016 15:39
Show Gist options
  • Save kevinrodbe/1647f8c3f2b347826d45 to your computer and use it in GitHub Desktop.
Save kevinrodbe/1647f8c3f2b347826d45 to your computer and use it in GitHub Desktop.
var tools = {
    /**
     * @param el is the rect element ex $('.rect')
     */
    getRectLength: function(el) {
        var w = el.attr('width');
        var h = el.attr('height');
        return (w * 2) + (h * 2);
    },
    /**
     * @param el is the Polygon element ex $('.polygon')
     */
    getPolygonLength: function(el) {
        var points = el.attr('points');
        points = points.split(" ");
        var x1 = null,
            x2, y1 = null,
            y2, lineLength = 0,
            x3, y3;
        for (var i = 0; i < points.length; i++) {
            var coords = points[i].split(",");
            if (x1 == null && y1 == null) {

                if (/(\r\n|\n|\r)/gm.test(coords[0])) {
                    coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm, "");
                    coords[0] = coords[0].replace(/\s+/g, "");
                }
                if (/(\r\n|\n|\r)/gm.test(coords[1])) {
                    coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm, "");
                    coords[0] = coords[1].replace(/\s+/g, "");
                }
                x1 = coords[0];
                y1 = coords[1];
                x3 = coords[0];
                y3 = coords[1];
            } else {
                if (coords[0] != "" && coords[1] != "") {
                    if (/(\r\n|\n|\r)/gm.test(coords[0])) {
                        coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm, "");
                        coords[0] = coords[0].replace(/\s+/g, "");
                    }
                    if (/(\r\n|\n|\r)/gm.test(coords[1])) {
                        coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm, "");
                        coords[0] = coords[1].replace(/\s+/g, "");
                    }
                    x2 = coords[0];
                    y2 = coords[1];
                    lineLength += Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));

                    x1 = x2;
                    y1 = y2;
                    if (i == points.length - 2) {
                        lineLength += Math.sqrt(Math.pow((x3 - x1), 2) + Math.pow((y3 - y1), 2));
                    }
                }
            }
        }
        return lineLength;
    },
    /**
     * @param el is the line element ex $('.line')
     */
    getLineLength: function(el) {
        var x1 = el.attr('x1');
        var x2 = el.attr('x2');
        var y1 = el.attr('y1');
        var y2 = el.attr('y2');
        var lineLength = Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2));
        return lineLength;
    },
    /**
     * @param el is the circle element
     */
    getCircleLength: function(el) {
        var r = el.attr('r');
        var circleLength = 2 * Math.PI * r;
        return circleLength;
    },
    /**
     * @param el is the path element
     */
    getPathLength: function(el) {
        var pathCoords = el.get(0);
        var pathLength = pathCoords.getTotalLength();
        return pathLength;
    },
    /**
     * @param el is the polyline element
     */
    getPolylineLength: function(el) {
        var totalLength = 0;
		var prevPos;
		var polyline = el[0];
		for (var i = 0; i < polyline.points.numberOfItems; i++) {
			var pos = polyline.points.getItem(i);
			if (i > 0) {
				totalLength += Math.sqrt(Math.pow((pos.x - prevPos.x), 2) + Math.pow((pos.y - prevPos.y), 2));
			}
			prevPos = pos;
		}
		return totalLength;
    }
}

This Function was not made by me, I also found this method on the internet. I dont wanan take the credits for it.

https://stackoverflow.com/questions/30355241/get-the-length-of-a-svg-line-rect-polygon-and-circle-tags

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment