Path Component List Simplified Format

Explicit format

Defined as a JSON object:
{
    "pathComponents": pathComponents,
    "unit": unit
}

pathComponents : JSON array of path components, each one being a JSON object:
{
    "shapeOperation": shapeOperation,
    "subpathListKey": subpathListKey,
    "windingFill": windingFill
}

shapeOperation : string (among "add", "intersect", "subtract", "xor")
subpathListKey : JSON array of subpaths, each one being a JSON object:
{
    "points": points,
    "closedSubpath": closedSubpath
}

points : JSON array of path points, each one being a JSON object:

Kind Value
corner point {
    "anchor": anchor
}
smooth point {
    "anchor": anchor,
    "forward": forward,
    "backward": backward,
    "smooth": smooth
}

anchor : JSON object:
{
    "horizontal": horizontal,
    "vertical": vertical
}

forward : JSON object:
{
    "horizontal": horizontal,
    "vertical": vertical
}

backward : JSON object:
{
    "horizontal": horizontal,
    "vertical": vertical
}

smooth : boolean (optional, false by default)

closedSubpath : boolean (optional, false by default)

windingFill : boolean (optional, false by default)

unit : string (among "distanceUnit", "percentUnit", "pixelsUnit")

Minimal format

Defined as a two-element JSON array: [ pathComponents, unit ]

pathComponents : JSON array of path components, each one being a three-element JSON array:
[ shapeOperation, subpathListKey, windingFill ]

shapeOperation : string (among "add", "intersect", "subtract", "xor")
subpathListKey : JSON array of subpaths, each one being a two-element JSON array:
[ points, closedSubpath ]

points : JSON array of path points, each one being a JSON array of one or four elements:

Kind Value
corner point [ anchor ]
smooth point [ anchor, forward, backward, smooth ]

anchor : JSON array of two coordinates: [ horizontal, vertical ]
forward : JSON array of two coordinates: [ horizontal, vertical ]
backward : JSON array of two coordinates: [ horizontal, vertical ]
smooth : boolean (optional, false by default)

closedSubpath : boolean (optional, false by default)

windingFill : boolean (optional, false by default)

unit : string (among "distanceUnit", "percentUnit", "pixelsUnit")

Examples

{
    "pathComponents":
    [
        {
            "shapeOperation": "add",
            "windingFill": true,
            "subpathListKey":
            [
                {
                    "closedSubpath": true,
                    "points":
                    [
                        { "anchor": { "horizontal": 12.5, "vertical": 41 } },
                        { "anchor": { "horizontal": 87.5, "vertical": 41 } },
                        { "anchor": { "horizontal": 23, "vertical": 85.5 } },
                        { "anchor": { "horizontal": 50, "vertical": 14.5 } },
                        { "anchor": { "horizontal": 77, "vertical": 85.5 } }
                    ]
                }
            ]
        }
    ],
    "unit": "percentUnit"
}
[
    [
        [
            "add",
            [
                [
                    [
                        [ [ 12.5, 41 ] ],
                        [ [ 87.5, 41 ] ],
                        [ [ 23, 85.5 ] ],
                        [ [ 50, 14.5 ] ],
                        [ [ 77, 85.5 ] ]
                    ],
                    true
                ]
            ],
            true
        ]
    ],
    "percentUnit"
]

Self-intersecting five-pointed star

{
    "pathComponents":
    [
        {
            "shapeOperation": "add",
            "subpathListKey":
            [
                {
                    "closedSubpath": true,
                    "points":
                    [
                        {
                            "anchor": { "horizontal": 5, "vertical": 5 }
                        },
                        {
                            "anchor": { "horizontal": 95, "vertical": 5 }
                        },
                        {
                            "anchor": { "horizontal": 95, "vertical": 95 }
                        },
                        {
                            "anchor": { "horizontal": 5, "vertical": 95 }
                        }
                    ]
                }
            ]
        },
        {
            "shapeOperation": "subtract",
            "subpathListKey":
            [
                {
                    "closedSubpath": true,
                    "points":
                    [
                        {
                            "anchor": { "horizontal": 50, "vertical": 80 }
                        },
                        {
                            "anchor": { "horizontal": 25, "vertical": 25 },
                            "forward": { "horizontal": 40, "vertical": 15 },
                            "backward": { "horizontal": 0, "vertical": 42 },
                            "smooth": true
                        },
                        {
                            "anchor": { "horizontal": 50, "vertical": 30 }
                        },
                        {
                            "anchor": { "horizontal": 75, "vertical": 25 },
                            "forward": { "horizontal": 100, "vertical": 42 },
                            "backward": { "horizontal": 60, "vertical": 15 },
                            "smooth": true
                        }
                    ]
                }
            ]
        }
    ],
    "unit": "percentUnit"
}
[
    [
        [
            "add",
            [
                [
                    [
                    	[ [ 5, 5 ] ],
                    	[ [ 95, 5 ] ],
                    	[ [ 95, 95 ] ],
                    	[ [ 5, 95 ] ]
                    ],
                    true
                ]
            ]
        ],
        [
            "subtract",
            [
                [
                    [
                        [ [ 50, 80 ] ],
                        [ [ 25, 25 ], [ 40, 15 ], [ 0, 42 ], true ],
                        [ [ 50, 30 ] ],
                        [ [ 75, 25 ], [ 100, 42 ], [ 60, 15 ], true ]
                    ],
                    true
                ]
            ]
        ]
    ],
    "percentUnit"
]

Heart in square

Tags: , , , ,

Comments are closed.