skia2/resources/skottie/skottie-textpath-paragraph-02.json
Florin Malita 132d47c90d [skottie] Path support for paragraph text
In addition to single line (point) text, AE also supports path layout
for paragraph text.

At a high level, the paragraph box top is mapped to the path (following
alignment rules), and each glyph is displaced along its path positioning
vector, post orientation.

The main difference compared to point text, is that the distance on path
is based on the fragment position relative to the paragraph left edge.

The paragraph box also plays a role in alignment: left/center/right
aligns with path start/mid/end.

This includes a tangential optimization: instead of validating cached
contour data in each PathInfo::getMatrix() call, we only check once at
a higher level (onSync) -- to avoid performing a shape vector comparison
for each fragment.

Change-Id: I2c31ce3b0a525a3cd2d4525abcf88d5fc943bb6e
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/457656
Commit-Queue: Florin Malita <fmalita@google.com>
Reviewed-by: Ben Wagner <bungeman@google.com>
Reviewed-by: Jorge Betancourt <jmbetancourt@google.com>
2021-10-11 15:26:00 +00:00

1 line
7.3 KiB
JSON

{"v":"5.7.11","fr":60,"ip":0,"op":300,"w":500,"h":500,"nm":"tpath paragraph 2","ddd":0,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Arial","fWeight":"","fStyle":"Bold","fName":"Arial-BoldMT","ascent":71.5988159179688}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"The quick brown fox jumps over the lazy dog. 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250.55,100,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"n","pt":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-150.703,-8.95],[-50.187,-69.088],[51.187,-8.95],[149.985,-69.947]],"c":false},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"t":{"d":{"k":[{"s":{"sz":[227.663223266602,173.539520263672],"ps":[-113.831611633301,-86.7697601318359],"s":22,"f":"Arial-BoldMT","t":"The quick brown fox \rjumps over the \rlazy dog.","ca":0,"j":2,"tr":16,"lh":26.4000015258789,"ls":0,"fc":[0,0.553,0]},"t":0}]},"p":{"m":0,"f":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.995],"y":[0.746]},"o":{"x":[0.333],"y":[0]},"t":195,"s":[0]},{"t":299,"s":[-300]}],"ix":5},"l":{"a":0,"k":0,"ix":6},"a":0,"p":0,"r":0},"m":{"g":1,"a":{"a":0,"k":[0,0],"ix":2}},"a":[{"nm":"Animator 1","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":1,"rn":0,"sh":2,"e":{"a":0,"k":10,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.96],"y":[0.738]},"o":{"x":[0.564],"y":[0.052]},"t":0,"s":[-10]},{"t":225,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[470,0,0],"ix":2}}}]},"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250.55,100,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-151.203,-9.45],[-50.687,-69.588],[50.687,-9.45],[149.485,-70.447]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":5,"nm":"The quick brown fox jumps over the lazy dog. 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250.55,250,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"n","pt":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-150.703,-8.95],[-50.187,-69.088],[51.187,-8.95],[149.985,-69.947]],"c":false},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"t":{"d":{"k":[{"s":{"sz":[227.663223266602,173.539520263672],"ps":[-113.831611633301,-86.7697601318359],"s":22,"f":"Arial-BoldMT","t":"The quick brown fox \rjumps over the \rlazy dog.","ca":0,"j":2,"tr":16,"lh":26.4000015258789,"ls":0,"fc":[0,0.553,0]},"t":0}]},"p":{"m":0,"f":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.995],"y":[0.746]},"o":{"x":[0.333],"y":[0]},"t":195,"s":[0]},{"t":299,"s":[-300]}],"ix":5},"l":{"a":0,"k":0,"ix":6},"a":0,"p":0,"r":0},"m":{"g":2,"a":{"a":0,"k":[0,0],"ix":2}},"a":[{"nm":"Animator 1","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":1,"rn":0,"sh":2,"e":{"a":0,"k":10,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.96],"y":[0.738]},"o":{"x":[0.564],"y":[0.052]},"t":0,"s":[-10]},{"t":225,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[470,0,0],"ix":2}}}]},"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250.55,250,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-151.203,-9.45],[-50.687,-69.588],[50.687,-9.45],[149.485,-70.447]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":5,"nm":"The quick brown fox jumps over the lazy dog. 6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250.55,400,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"n","pt":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-150.703,-8.95],[-50.187,-69.088],[51.187,-8.95],[149.985,-69.947]],"c":false},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"t":{"d":{"k":[{"s":{"sz":[227.663223266602,173.539520263672],"ps":[-113.831611633301,-86.7697601318359],"s":22,"f":"Arial-BoldMT","t":"The quick brown fox \rjumps over the \rlazy dog.","ca":0,"j":2,"tr":16,"lh":26.4000015258789,"ls":0,"fc":[0,0.553,0]},"t":0}]},"p":{"m":0,"f":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.995],"y":[0.746]},"o":{"x":[0.333],"y":[0]},"t":195,"s":[0]},{"t":299,"s":[-300]}],"ix":5},"l":{"a":0,"k":0,"ix":6},"a":0,"p":0,"r":0},"m":{"g":3,"a":{"a":0,"k":[0,0],"ix":2}},"a":[{"nm":"Animator 1","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":1,"rn":0,"sh":2,"e":{"a":0,"k":10,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.96],"y":[0.738]},"o":{"x":[0.564],"y":[0.052]},"t":0,"s":[-10]},{"t":225,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[470,0,0],"ix":2}}}]},"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250.55,400,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-151.203,-9.45],[-50.687,-69.588],[50.687,-9.45],[149.485,-70.447]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":1,"nm":"Medium Yellow Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[600,600,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"sw":1200,"sh":1200,"sc":"#ffffbd","ip":0,"op":300,"st":0,"bm":0}],"markers":[]}