added Matter.Svg.pathToPoints

src/geometry/Svg.js

@@ -0,0 +1,233 @@
+/**
+* The `Matter.Svg` module contains methods for converting SVG images into sets of `Matter.Vertices`.
+*
+* See [Demo.js](https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js) 
+* and [DemoMobile.js](https://github.com/liabru/matter-js/blob/master/demo/js/DemoMobile.js) for usage examples.
+*
+* @class Svg
+*/
+
+var Svg = {};
+
+(function() {
+
+    /**
+     * Converts an SVG path into a `Matter.Vertices` object for the given `Matter.Body`.
+     * @method pathToPoints
+     * @param {string} path
+     * @return {Vector} points
+     */
+    Svg.pathToPoints = function(path) {
+        var i, il, total, point, distance, segment, segments, 
+            segmentsQueue, lastSegment, 
+            lastPoint, segmentIndex, points = [],
+            length = 0, x = 0, y = 0;
+
+        // prepare helpers functions
+        var addPoint = function(px, py, pathSegType) {
+            // all odd-numbered path types are relative, except PATHSEG_CLOSEPATH (1)
+            var isRelative = pathSegType % 2 === 1 && pathSegType > 1;
+
+            // when the last point doesn't equal the current point add the current point
+            if (!lastPoint || px != lastPoint.x || py != lastPoint.y) {
+                if (lastPoint && isRelative) {
+                    lx = lastPoint.x;
+                    ly = lastPoint.y;
+                } else {
+                    lx = 0;
+                    ly = 0;
+                }
+
+                var point = {
+                    x: lx + px,
+                    y: ly + py
+                };
+
+                // set last point
+                if (isRelative || !lastPoint) {
+                    lastPoint = point;
+                }
+
+                points.push(point);
+
+                x = lx + px;
+                y = ly + py;
+            }
+        };
+
+        var addSegmentPoint = function(segment) {
+            var segType = segment.pathSegTypeAsLetter.toUpperCase();
+
+            // don't bother processing path ends
+            if (segType === 'Z') 
+                return;
+
+            // map segment to x and y
+            switch (segType) {
+
+            case 'M':
+            case 'L':
+            case 'T':
+                x = segment.x;
+                y = segment.y;
+                break;
+            case 'H':
+                x = segment.x;
+                break;
+            case 'V':
+                y = segment.y;
+                break;
+            case 'C':
+                x = segment.x;
+                y = segment.y;
+                break;
+            case 'S':
+            case 'Q':
+                x = segment.x;
+                y = segment.y;
+                break;
+
+            }
+
+            // add point
+            addPoint(x, y, segment.pathSegType);
+        };
+
+        // ensure path is absolute
+        _svgPathToAbsolute(path);
+
+        // parse sample value
+        sample = '1%';
+
+        // get total length
+        total = path.getTotalLength();
+
+        // calculate sample distance
+        if (typeof sample === 'string') {
+            if (sample.indexOf('%') > -1) {
+                // sample distance in %
+                distance = total * (parseFloat(sample) / 100);
+            } else if (sample.indexOf('px') > -1) {
+                // fixed sample distance in px
+                distance = parseFloat(sample);
+            }
+        } else {
+            // specific number of samples
+            distance = total / sample;
+        }
+
+        // Put all path segments in a queue
+        segments = [];
+        for (i = 0; i < path.pathSegList.numberOfItems; i += 1)
+            segments.push(path.pathSegList.getItem(i));
+
+        segmentsQueue = segments.concat();
+
+        // sample through path
+        while (length < total) {
+            // get segment index
+            segmentIndex = path.getPathSegAtLength(length);
+
+            // get segment
+            segment = segments[segmentIndex];
+
+            // new segment? 
+            if (segment != lastSegment) {
+                while (segmentsQueue.length && segmentsQueue[0] != segment)
+                    addSegmentPoint(segmentsQueue.shift());
+
+                lastSegment = segment;
+            }
+
+            // add points in between when curving
+            switch (segment.pathSegTypeAsLetter.toUpperCase()) {
+
+            case 'C':
+            case 'T':
+            case 'S':
+            case 'Q':
+            case 'A':
+                point = path.getPointAtLength(length);
+                addPoint(point.x, point.y, 0);
+                break;
+
+            }
+
+            // increment by sample value
+            length += distance;
+        }
+
+        // add remaining segments we didn't pass while sampling
+        for (i = 0, il = segmentsQueue.length; i < il; ++i)
+            addSegmentPoint(segmentsQueue[i]);
+
+        return points;
+    };
+
+    var _svgPathToAbsolute = function(path) {
+        // http://phrogz.net/convert-svg-path-to-all-absolute-commands
+
+        var x0, y0, x1, y1, x2, y2, segs = path.pathSegList,
+            x = 0, y = 0, len = segs.numberOfItems;
+
+        for (var i = 0; i < len; ++i) {
+            var seg = segs.getItem(i),
+                c = seg.pathSegTypeAsLetter;
+
+            if (/[MLHVCSQTA]/.test(c)) {
+                if ('x' in seg) x = seg.x;
+                if ('y' in seg) y = seg.y;
+            } else {
+                if ('x1' in seg) x1 = x + seg.x1;
+                if ('x2' in seg) x2 = x + seg.x2;
+                if ('y1' in seg) y1 = y + seg.y1;
+                if ('y2' in seg) y2 = y + seg.y2;
+                if ('x' in seg) x += seg.x;
+                if ('y' in seg) y += seg.y;
+
+                switch (c) {
+
+                case 'm':
+                    segs.replaceItem(path.createSVGPathSegMovetoAbs(x, y), i);
+                    break;
+                case 'l':
+                    segs.replaceItem(path.createSVGPathSegLinetoAbs(x, y), i);
+                    break;
+                case 'h':
+                    segs.replaceItem(path.createSVGPathSegLinetoHorizontalAbs(x), i);
+                    break;
+                case 'v':
+                    segs.replaceItem(path.createSVGPathSegLinetoVerticalAbs(y), i);
+                    break;
+                case 'c':
+                    segs.replaceItem(path.createSVGPathSegCurvetoCubicAbs(x, y, x1, y1, x2, y2), i);
+                    break;
+                case 's':
+                    segs.replaceItem(path.createSVGPathSegCurvetoCubicSmoothAbs(x, y, x2, y2), i);
+                    break;
+                case 'q':
+                    segs.replaceItem(path.createSVGPathSegCurvetoQuadraticAbs(x, y, x1, y1), i);
+                    break;
+                case 't':
+                    segs.replaceItem(path.createSVGPathSegCurvetoQuadraticSmoothAbs(x, y), i);
+                    break;
+                case 'a':
+                    segs.replaceItem(path.createSVGPathSegArcAbs(x, y, seg.r1, seg.r2, seg.angle, seg.largeArcFlag, seg.sweepFlag), i);
+                    break;
+                case 'z':
+                case 'Z':
+                    x = x0;
+                    y = y0;
+                    break;
+
+                }
+            }
+
+            if (c == 'M' || c == 'm') {
+                x0 = x;
+                y0 = y;
+            }
+        }
+    };
+
+})();

src/geometry/Vertices.js

@@ -9,8 +9,6 @@
 * @class Vertices
 */
 
-// TODO: convex decomposition - http://mnbayazit.com/406/bayazit
-
 var Vertices = {};
 
 (function() {

src/module/Outro.js

@@ -38,6 +38,7 @@ Matter.RenderPixi = RenderPixi;
 Matter.Events = Events;
 Matter.Query = Query;
 Matter.Runner = Runner;
+Matter.Svg = Svg;
 
 // @if DEBUG
 Matter.Metrics = Metrics;