Add stroke specs

lottie · Apr 18, 2024 · 76b5617 · 76b5617
1 parent 9852a2e
commit 76b5617
Show file tree

Hide file tree

Showing 11 changed files with 461 additions and 6 deletions.
diff --git a/docs/specs/constants.md b/docs/specs/constants.md
@@ -83,3 +83,53 @@
         lottie.layers[0].shapes[0].it[0] = star;
     </script>
 </lottie-playground>
+
+
+<h2 id="line-cap">Line Cap</h2>
+
+{schema_string:constants/line-cap/description}
+
+{schema_enum:line-cap}
+
+<lottie-playground example="stroke.json">
+    <title>Example</title>
+    <form>
+        <enum title="Line Cap" value="2">line-cap</enum>
+    </form>
+    <json>lottie.layers[0].shapes[2]</json>
+    <script>
+        var shape = lottie.layers[0].shapes[2];
+        shape.lc = Number(data["Line Cap"]);
+        shape.d = undefined;
+    </script>
+</lottie-playground>
+
+
+<h2 id="line-join">Line Join</h2>
+
+{schema_string:constants/line-join/description}
+
+{schema_enum:line-join}
+
+<lottie-playground example="stroke.json">
+    <title>Example</title>
+    <form>
+        <enum title="Line Join" value="2">line-join</enum>
+        <input type="range" min="0" max="10" value="3" title="Miter Limit"/>
+    </form>
+    <json>lottie.layers[0].shapes[2]</json>
+    <script>
+        var shape = lottie.layers[0].shapes[2];
+        shape.lj = Number(data["Line Join"]);
+        shape.ml = data["Miter Limit"];
+        shape.d = undefined;
+        var trim = lottie.layers[0].shapes[1];
+        trim.e.k = 100;
+    </script>
+</lottie-playground>
+
+<h2 id="stroke-dash-type">Stroke Dash Type</h2>
+
+{schema_string:constants/stroke-dash-type/description}
+
+{schema_enum:stroke-dash-type}
diff --git a/docs/specs/shapes.md b/docs/specs/shapes.md
@@ -410,6 +410,78 @@ $$
 </lottie-playground>
 
 
+<h3 id="stroke"><span id="base-stroke">Stroke</span></h3>
+
+{schema_string:shapes/stroke/description}
+
+{schema_object:shapes/stroke}
+
+<lottie-playground example="stroke.json">
+    <title>Example</title>
+    <form>
+        <input title="Red" type="range" min="0" max="1" step="0.01" value="1"/>
+        <input title="Green" type="range" min="0" max="1" step="0.01" value="0.98"/>
+        <input title="Blue" type="range" min="0" max="1" step="0.01" value="0.28"/>
+        <input type="range" min="0" max="100" value="32" title="Width"/>
+        <input title="Opacity" type="range" min="0" max="100" value="100"/>
+        <enum title="Line Cap" value="2">line-cap</enum>
+        <enum title="Line Join" value="2">line-join</enum>
+        <input type="range" min="0" max="10" value="3" title="Miter Limit"/>
+    </form>
+    <json>lottie.layers[0].shapes[2]</json>
+    <script>
+        var shape = lottie.layers[0].shapes[2];
+        shape.c.k = [data["Red"], data["Green"], data["Blue"]];
+        shape.o.k = data["Opacity"];
+        shape.w.k = data["Width"];
+        shape.lc = Number(data["Line Cap"]);
+        shape.lj = Number(data["Line Join"]);
+        shape.ml = data["Miter Limit"];
+        shape.d = undefined;
+    </script>
+</lottie-playground>
+
+
+<h4 id="stroke-dash">Stroke Dashes</h4>
+
+{schema_string:shapes/stroke-dash/description}
+
+{schema_object:shapes/stroke-dash}
+
+<lottie-playground example="stroke.json">
+    <title>Example</title>
+    <form>
+        <input title="Red" type="range" min="0" max="1" step="0.01" value="1"/>
+        <input title="Green" type="range" min="0" max="1" step="0.01" value="0.98"/>
+        <input title="Blue" type="range" min="0" max="1" step="0.01" value="0.28"/>
+        <input type="range" min="0" max="100" value="32" title="Width"/>
+        <input title="Opacity" type="range" min="0" max="100" value="100"/>
+        <enum title="Line Cap" value="2">line-cap</enum>
+        <enum title="Line Join" value="2">line-join</enum>
+        <input type="range" min="0" max="10" value="3" title="Miter Limit"/>
+        <input type="range" min="0" max="512" value="0" title="Dash Offset"/>
+        <input type="range" min="0" max="512" value="30" title="Dash Length"/>
+        <input type="range" min="0" max="512" value="50" title="Dash Gap"/>
+    </form>
+    <json>lottie.layers[0].shapes[2]</json>
+    <script>
+        var shape = lottie.layers[0].shapes[2];
+        shape.c.k = [data["Red"], data["Green"], data["Blue"]];
+        shape.o.k = data["Opacity"];
+        shape.w.k = data["Width"];
+        shape.lc = Number(data["Line Cap"]);
+        shape.lj = Number(data["Line Join"]);
+        shape.ml = data["Miter Limit"];
+        shape.d[0].v.k = data["Dash Offset"];
+        shape.d[1].v.k = data["Dash Length"];
+        shape.d[2].v.k = data["Dash Gap"];
+        var trim = lottie.layers[0].shapes[1];
+        trim.e.k = 100;
+        trim.o.k = 0;
+    </script>
+</lottie-playground>
+
+
 <h2 id="modifier">Modifiers</h2>
 
 {schema_string:shapes/modifier/description}

diff --git a/docs/static/examples/stroke.json b/docs/static/examples/stroke.json
@@ -0,0 +1,156 @@
+
+{
+"v": "5.7.1",
+"ip": 0,
+"op": 180,
+"nm": "Animation",
+"mn": "{8f1618e3-6f83-4531-8f65-07dd4b68ee2e}",
+"fr": 60,
+"w": 512,
+"h": 512,
+"assets": [
+],
+"layers": [
+    {
+        "ddd": 0,
+        "ty": 4,
+        "ind": 0,
+        "st": 0,
+        "ip": 0,
+        "op": 180,
+        "nm": "Layer",
+        "mn": "{85f37d8b-1792-4a4f-82d2-1b3b6d829c07}",
+        "ks": {
+            "a": {
+                "a": 0,
+                "k": [
+                    256,
+                    256
+                ]
+            },
+            "p": {
+                "a": 0,
+                "k": [
+                    256,
+                    256
+                ]
+            },
+            "s": {
+                "a": 0,
+                "k": [
+                    100,
+                    100
+                ]
+            },
+            "r": {
+                "a": 0,
+                "k": 0
+            },
+            "o": {
+                "a": 0,
+                "k": 100
+            }
+        },
+        "shapes": [
+            {
+                "ty": "sr",
+                "nm": "PolyStar",
+                "mn": "{57cff206-c227-4a14-a679-195157be886b}",
+                "p": {
+                    "a": 0,
+                    "k": [
+                        249.3134328358209,
+                        254.47164179104476
+                    ]
+                },
+                "or": {
+                    "a": 0,
+                    "k": 200
+                },
+                "ir": {
+                    "a": 0,
+                    "k": 100
+                },
+                "r": {
+                    "a": 0,
+                    "k": 0
+                },
+                "pt": {
+                    "a": 0,
+                    "k": 5
+                },
+                "sy": 1,
+                "os": {
+                    "a": 0,
+                    "k": 0
+                },
+                "is": {
+                    "a": 0,
+                    "k": 0
+                }
+            },
+            {
+                "ty": "tm",
+                "nm": "Trim Path",
+                "mn": "{dcd7570f-5105-485b-bd43-42ad990b01e8}",
+                "s": {
+                    "a": 0,
+                    "k": 0
+                },
+                "e": {
+                    "a": 0,
+                    "k": 70
+                },
+                "o": {
+                    "a": 0,
+                    "k": -125
+                },
+                "m": 1
+            },
+            {
+                "ty": "st",
+                "nm": "Stroke",
+                "o": {
+                    "a": 0,
+                    "k": 100
+                },
+                "c": {
+                    "a": 0,
+                    "k": [
+                        1,
+                        0.98,
+                        0.28
+                    ]
+                },
+                "lc": 2,
+                "lj": 2,
+                "ml": 3,
+                "w": {
+                    "a": 0,
+                    "k": 30
+                },
+                "d": [
+                    {
+                        "n": "o",
+                        "nm": "offset",
+                        "v": {"a": 0, "k": 0}
+                    },
+                    {
+                        "n": "d",
+                        "nm": "dash",
+                        "v": {"a": 0, "k": 100}
+                    },
+                    {
+                        "n": "g",
+                        "nm": "gap",
+                        "v": {"a": 0, "k": 0}
+                    }
+                ]
+            }
+        ]
+    }
+],
+"meta": {
+    "g": "Glaxnimate 0.4.6-32-gb62899be"
+}
+}
diff --git a/schema/constants/line-cap.json b/schema/constants/line-cap.json
@@ -0,0 +1,20 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "type": "integer",
+    "title": "Line Cap",
+    "description": "Style at the end of a stoked line",
+    "oneOf": [
+        {
+            "title": "Butt",
+            "const": 1
+        },
+        {
+            "title": "Round",
+            "const": 2
+        },
+        {
+            "title": "Square",
+            "const": 3
+        }
+    ]
+}
diff --git a/schema/constants/line-join.json b/schema/constants/line-join.json
@@ -0,0 +1,20 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "type": "integer",
+    "title": "Line Join",
+    "description": "Style at a sharp corner of a stoked line",
+    "oneOf": [
+        {
+            "title": "Miter",
+            "const": 1
+        },
+        {
+            "title": "Round",
+            "const": 2
+        },
+        {
+            "title": "Bevel",
+            "const": 3
+        }
+    ]
+}
diff --git a/schema/constants/stroke-dash-type.json b/schema/constants/stroke-dash-type.json
@@ -0,0 +1,20 @@
+{
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "type": "string",
+    "title": "Stroke Dash Type",
+    "description": "Type of a dash item in a stroked line",
+    "oneOf": [
+        {
+            "title": "Dash",
+            "const": "d"
+        },
+        {
+            "title": "Gap",
+            "const": "g"
+        },
+        {
+            "title": "Offset",
+            "const": "o"
+        }
+    ]
+}
diff --git a/schema/shapes/all-graphic-elements.json b/schema/shapes/all-graphic-elements.json
@@ -8,6 +8,7 @@
         {"$ref": "#/$defs/shapes/path"},
         {"$ref": "#/$defs/shapes/polystar"},
         {"$ref": "#/$defs/shapes/rectangle"},
+        {"$ref": "#/$defs/shapes/stroke"},
         {"$ref": "#/$defs/shapes/transform"},
         {"$ref": "#/$defs/shapes/trim-path"}
     ]