search

mikolalysenko / vectorize-text

Turns a text string into a 2D poly line
MIT License
311 stars 21 forks source link

Grouping options.styletags.breaklines #13

Closed swampthang closed 5 years ago

swampthang commented 5 years ago

Thanks for the awesome library!

I'm using the following code to create an SVG with breaklines set to true....

let polygons = vectorizeText(text, {
    polygons: true,
    font: fontData[0].fontFamily,
    size: 120,
    orientation: 'ccw',
    styletags: {breaklines: true},
    width: dims.wd,
    height: dims.ht,
    textBaseline: "hanging"
  });

  svg = [`<svg xmlns="http://www.w3.org/2000/svg" width="${dims.wd}" height="${dims.ht}" viewBox="0 0 ${dims.wd} ${dims.ht}">`]
  for( let i = polygons.length-1; i >=0 ; i-- ) {
    let loops = polygons[i];
    svg.push('<path d="');
    for( let l = 0; l < loops.length; l++ ) {
      let loop = loops[l];
      var start = loop[0]
      svg.push('M ' + start[0] + ' ' + start[1])
      for(let x=1; x<loop.length; x++) {
        var p = loop[x];
        svg.push('L ' + p[0] + ' ' + p[1])
      }
      svg.push('L ' + start[0] + ' ' + start[1])
    }
    // get the colors from settings - drawsvg-font-color-1
    let fillColor = $('#drawtext-color-1').spectrum("get").toHex();
    let strokeColor = $('#drawtext-color-2').spectrum("get").toHex();
    svg.push(`" stroke="#${strokeColor}" stroke-width="4" fill="#${fillColor}"></path>`);
  }
  svg.push('</svg>');

I'm wondering if there's a way to detect in the loops where the grouping is for paths as I would like to either enclose each group in a <g> or possibly add a className to each path contained in each group.

iow, give the following string:

"If you obey all the rules,<br>you miss all the fun.<br>AUTHOR: Katherine Hepburn";

I'd like to know where each line of text ends and the next one begins (at each <br>)

Thanks again!

swampthang commented 5 years ago

I'm revealing the resulting SVG's letter paths in as if they were being drawn in one at a time. The issue I'm having is that vectorizeText seems to return the path data for each letter in no specific order - obviously you're trying to optimize speed by doing this asynchronously. Is there a synchronous option or any other way of ordering the paths being returned?

Here's an SVG that was created using the function in the previous post from the string "test one two". I added comments above each path so you can see the order in which each path is being returned. I can easily reorder the paths by each path's initial move-to x coordinate but that would only work for single line SVG's - not for when breaklines is utilized.

<svg xmlns="http://www.w3.org/2000/svg" width="365" height="180" viewBox="0 0 365 180">
  <!-- S from the word TEST -->
  <path d="M 71.17847558864266 0.867043748742633L 73.80886426592797 2.0221606648199444L 75.82312586565097 4.065385503231773L 75.92440496144819 7.179372499230545L 75.02734569216562 8.28308118474322L 72.29224376731301 8.81003143577452L 69.2590027700831 8.547303160949456L 67.55181215645894 9.902809655718235L 66.54367878459033 11.789578215648353L 65.4689834634433 15.67174515235457L 65.121062891146 18.704986149584485L 65.3831948291782 23.760387811634345L 67.31095270554452 29.82686980609418L 77.03352338434229 48.083763535633345L 78.93841181902121 54.437151230478946L 79.44132153232889 59.14819944598337L 79.1049993404564 69.2590027700831L 77.17203674004956 75.32548476454294L 73.69582422876412 80.7666933955387L 70.95817943982762 83.07884689908572L 69.01220363382554 84.0899272314957L 64.20360110803324 85.19804502181042L 62.342932440751 85.07069971986165L 60.431296314523955 84.12973222530007L 58.49072097845993 82.11644164285559L 58.30655840004871 79.36980609418282L 59.497978588006276 77.69742457138578L 61.170360110803315 77.56713765838744L 63.192520775623265 78.2006628157501L 66.22576177285318 78.22597118231849L 68.98536176268772 76.08129233976028L 71.16143023764396 71.28116343490304L 72.36344660762357 65.2146814404432L 72.42738816817969 59.14819944598337L 71.21077176619097 53.08171745152354L 69.17833146696528 48.02631578947368L 62.37587896867673 35.893351800554015L 59.50180131086991 28.67134942619707L 58.348577742650825 23.760387811634345L 58.346597082995366 13.649584487534625L 59.48175172059285 9.763244459833794L 61.49070239433915 5.851482153660001L 63.74638463418609 3.080864346220253L 65.46113227146814 1.82475926658752L 68.24792243767313 0.7459267005676007L 71.17847558864266 0.867043748742633" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- O from the word ONE -->
  <path d="M 139.02354570637118 0.8627885503231675L 143.06786703601105 1.5849973281903509L 148.69113573407202 3.981994459833782L 151.4555989035692 6.272932952386486L 153.85272391505077 8.918971200420927L 155.7805170821791 12.051782356390387L 157.85343001466512 16.960057188812442L 159.93216847787482 26.793628808864263L 160.3298550412823 35.893351800554015L 160.32774812512665 58.1371191135734L 159.87559067948507 64.10638184530151L 157.99368548779805 73.30332409972299L 156.90733734207146 76.1755080528522L 154.80626309033173 79.98631849199379L 150.77809366444734 84.04679172538917L 148.12326869806094 85.30586617844236L 143.06786703601105 85.85122965875355L 140.03462603878114 85.31510533693734L 137.43860896907987 83.98798382870406L 135.35326565577313 82.02900581237091L 133.36403944319588 78.97160664819943L 131.2719298245614 74.15676287492926L 129.27578129357303 67.23684210526315L 128.0581079836487 57.12603878116343L 127.65193738944697 48.02631578947368L 127.92224965843997 23.760387811634345L 129.30022227014115 12.764889196675899L 131.17101492987481 6.572022160664819L 132.38320730703 3.9760050909635276L 134.32763927362265 1.8761157279162806L 136.44584639736993 0.9778696645570821L 139.02354570637118 0.8627885503231675M 141.04570637119113 8.537034806696377L 138.33879288865438 9.928700145950607L 137.30574085589913 11.787068085726785L 136.1998474446987 15.67174515235457L 135.7345608603552 35.893351800554015L 135.41551246537395 37.24689482619963L 135.32869173994683 47.01523545706371L 135.7345608603552 54.09279778393351L 137.3092460402017 67.23684210526315L 138.1906356904174 71.28116343490304L 140.393674452279 76.01921871524759L 142.51504613483726 78.91154666294663L 144.07894736842104 79.55083506616604L 145.81347311108985 79.0538434903047L 147.84962769066559 77.10817903484472L 150.07100974450555 72.29224376731301L 152.08962114634582 63.192520775623265L 152.97588306180256 54.09279778393351L 152.90717656714884 44.99307479224376L 151.61871784724968 30.425740464521617L 151.07642412440686 16.682825484764543L 148.73250941117973 12.02582964906166L 146.101108033241 9.713702287201535L 144.07894736842104 8.646644540845648L 141.04570637119113 8.537034806696377" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- O from the word TWO -->
  <path d="M 344.2728531855955 0.8834012460646987L 349.1495285262598 1.8536472760849585L 355.0523604332468 4.892237904703268L 358.0800792303338 7.931001102076072L 360.1265927977839 10.879224376731292L 363.12388427208367 17.848938134810712L 364.2985458940462 22.749307479224374L 365.24529167827694 29.82686980609418L 365.41053145747503 58.1371191135734L 364.18089694589565 68.24792243767313L 362.2894442152413 75.32548476454294L 359.06929165017806 81.02220023743568L 357.093351800554 83.09058171745153L 353.3725761772853 85.23846802360593L 348.3171745152354 85.88191238329743L 344.5058756059556 85.10781529029626L 342.5985911297769 84.0773091472314L 339.5958675543892 81.01355072815926L 337.514055101456 77.20320538187573L 334.4432469752208 68.24792243767313L 333.63750442588463 62.730561658229064L 332.4942711736501 48.02631578947368L 332.88660448804285 41.95983379501384L 332.5600784257294 40.711459098875L 332.9597988779999 23.760387811634345L 334.3270707447648 12.638504155124652L 335.44487700997394 8.594182825484763L 337.5204624229179 3.8415340313316677L 339.50249012789527 1.82475926658752L 341.60653650254665 0.9518101060273052L 344.2728531855955 0.8834012460646987M 345.2839335180055 8.692698345052918L 343.48098938543376 9.834268532329475L 342.33051465228164 11.62742382271468L 341.3806312873597 14.660664819944596L 340.97019257883125 18.704986149584485L 340.9927204792888 30.83795013850415L 340.3000472941017 37.91551246537396L 340.5866942109958 54.09279778393351L 342.44402941153385 68.24792243767313L 343.55419314540217 72.16475972540046L 345.529932973882 76.20610311857742L 347.6051833911038 79.06648199445982L 349.3282548476454 79.54721201002785L 350.33933518005534 79.27977839335178L 352.05060215977596 78.04375571057706L 354.32046398891964 74.31440443213296L 356.20762245026435 68.24792243767313L 357.4351151705722 60.15927977839335L 357.7858051957774 54.09279778393351L 357.39491749969886 36.90443213296398L 356.8287527383991 33.71672052939366L 356.0516534422586 16.776155976986992L 354.1695989618427 12.737068590045107L 351.22776967332686 9.821923229125453L 349.3282548476454 8.711840511225562L 345.2839335180055 8.692698345052918" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- last T from the word TEST -->
  <path d="M 107.68005540166205 3.4737831420656877L 109.08834586466163 4.155837542773355L 109.72957471077073 5.5609418282548475L 109.40538514320566 8.359467748318158L 107.19715136230204 10.133439450944712L 105.6578947368421 10.438937574459677L 101.61357340720221 9.67420045328632L 100.17109879963064 10.316764132553597L 99.97675454739165 11.62742382271468L 100.35560136571537 13.649584487534625L 100.66843309647115 27.804709141274234L 103.30089578012014 58.1371191135734L 103.98520143523768 79.36980609418282L 103.03540512465374 81.79714233338764L 101.24089956673058 83.03123309675622L 99.59141274238226 83.30044135773834L 97.14259051885033 81.81260704996721L 96.57055691626205 80.3808864265928L 96.57171299960427 67.23684210526315L 95.97002697662629 62.9167715940569L 95.32158807329816 50.04847645429362L 94.97323500786102 48.694933428648014L 94.2840046530701 31.849030470914123L 93.94786631180634 30.562200956937787L 93.20012773958346 9.861644242184413L 84.93074792243766 8.088642659279778L 82.84324533137352 6.1381630628023425L 82.92025356914553 4.098486347447554L 83.87633557578155 2.9899089829837733L 86.9069503903299 2.01058340910532L 107.68005540166205 3.4737831420656877" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- W from the word TWO -->
  <path d="M 322.6610110803324 1.0150298649584486L 324.18912112817924 1.0410382681850776L 326.7229839520884 1.8781240811526052L 327.37700134148673 3.5387811634349027L 327.44264988966614 8.594182825484763L 326.2727344677483 13.649584487534625L 325.80398759268166 17.693905817174514L 325.76754747783497 29.82686980609418L 324.7738898424621 44.99307479224376L 322.11208500434117 67.23684210526315L 321.69424758067413 80.3808864265928L 320.7156263753333 84.40816707647296L 319.7100942844799 86.18129464936578L 317.98476454293626 87.40615149488966L 314.9515235457063 87.3592305900018L 313.3363386121709 86.0403926897681L 312.73055495035635 83.4141274238227L 312.72657558257816 77.34764542936287L 311.8974116241836 66.22576177285318L 307.5237546232532 34.972815975524036L 307.2058204143785 34.972815975524036L 306.5911340703584 47.01523545706371L 303.59139682236446 71.28116343490304L 301.47045244690673 80.31257018791644L 299.3510290208035 85.00199854988936L 298.29491125474505 85.96804144865085L 296.0870515103548 86.08985935323916L 293.89577562326866 83.4141274238227L 291.85652536157056 77.34764542936287L 289.8610514465166 64.20360110803324L 288.07529013452097 44.9389097744361L 287.453546640107 33.871191135734065L 285.533716774862 14.660664819944596L 284.07024139295606 6.02314998021369L 284.9378778161374 4.868625738575119L 286.8148178773721 3.9149971010758233L 289.27507609178895 3.9382203071030415L 291.302107965678 5.955509762853847L 292.3836920235812 9.605263157894736L 292.779271670833 22.749307479224374L 296.3714355548313 49.200473594852994L 297.12027444638363 59.01391533933517L 297.4273347843292 59.01391533933517L 298.67466213380334 53.08171745152354L 301.6046919260685 24.77146814404432L 302.11858086511825 12.815237709163805L 302.99674174651466 11.940028369933223L 305.85180055401656 10.827802119382133L 307.39105717947655 11.099247529664703L 309.5819998386359 12.891274238227146L 312.74467220683283 27.804709141274234L 314.5708815382108 41.11183093557322L 316.2472769814162 58.1156067660753L 316.69227515249105 58.1156067660753L 317.9638936186434 44.99307479224376L 318.1183270066003 24.77146814404432L 319.9860542834634 9.605263157894736L 319.8465656926696 3.5387811634349027L 320.4658552877153 1.9755505785740881L 322.6610110803324 1.0150298649584486" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- first T from the word TEST -->
  <path d="M 4.398199445983373 2.048569479472443L 23.760387811634345 3.1526046475838587L 26.443849666841356 3.8885603054578084L 27.32890663190484 5.025664005214272L 27.432817524755635 7.4299085033157L 26.41741287122334 9.229047220253815L 23.760387811634345 10.408835267812847L 18.704986149584485 9.653084524968174L 17.941058787319168 9.85912748378121L 17.639781926943005 10.616343490304708L 17.797573547459592 20.72714681440443L 20.47140296561838 52.07063711911357L 20.793086836083337 60.15927977839335L 21.482483298028352 66.22576177285318L 21.650105466466734 79.36980609418282L 21.291957206992084 80.94569681918044L 20.395305064280134 82.07120534128843L 18.587913690042285 83.09219139758271L 16.682825484764543 83.20464945440074L 14.984210526315781 82.07950138504155L 14.111792639493467 80.92975860704392L 14.018492176386918 67.23684210526315L 13.100712307083494 56.71104312233844L 12.43571685681643 40.948753462603875L 12.064647750243305 39.57063711911356L 11.397632838076058 21.738227146814403L 11.039279054188617 20.416045173662887L 10.759516519831449 10.616343490304708L 10.439276122446117 9.738911707581122L 3.5387811634349027 8.483445455744626L 1.0522724941007529 7.031221144967695L 0.517925337314683 5.5609418282548475L 0.7970227845574075 3.8067174515235314L 1.807855594363488 2.8418228760455184L 4.398199445983373 2.048569479472443" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- E from the word TEST -->
  <path d="M 42.97091412742382 2.862539122926942L 50.04847645429362 4.755410794191954L 52.839832204535504 6.782889181862631L 53.40611944742706 8.594182825484763L 52.448997369292144 10.983379501385045L 50.04847645429362 12.546269344200425L 48.02631578947368 12.46646169018579L 41.95983379501384 10.64105878731917L 41.14468051266417 10.84884930514159L 40.848119003289064 11.62742382271468L 40.37396121883656 32.53840342483002L 41.05730503203439 33.636400514609576L 48.64981532779317 34.268179732508536L 50.704012054427565 36.16355430318082L 50.939887858471494 37.91551246537396L 50.47598021900387 39.29848441430253L 49.03739612188365 40.76036181889746L 47.01523545706371 41.248274125339755L 41.95983379501384 40.93454149005995L 41.073651621313346 41.19231329976335L 40.70404271548437 41.95983379501384L 40.69300961381782 66.22576177285318L 40.32614083685669 68.24792243767313L 40.340825414635866 77.04688102668396L 41.212757771622044 77.98105751996088L 50.72834081574172 77.78486935689149L 52.86265004616804 78.64006985426954L 54.06976357971795 80.3808864265928L 53.76925207756233 83.10323373872338L 52.78357837914624 84.11410611549114L 50.04847645429362 85.22877986615079L 37.91551246537396 85.30897601744678L 36.330575728082636 84.99906416111402L 34.13545076806848 83.20848396638338L 33.280300032377596 81.16026084949215L 32.63460746387988 55.10387811634349L 33.23496711704072 19.716066481994456L 32.87249597443381 9.605263157894736L 33.234152082365924 6.774238227146802L 34.162673754086505 4.81044921038353L 36.90443213296398 2.6117655967036635L 42.97091412742382 2.862539122926942" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- N from the word ONE -->
  <path d="M 172.38919667590025 2.2657944798584877L 175.08006126427176 2.8700772398833228L 177.0966997289488 4.897760104846156L 179.3210948870839 8.594182825484763L 183.32822537867625 17.693905817174514L 188.21858338545852 31.941594163317863L 198.00055694792536 66.09643754428912L 199.23010621973333 66.99418282548474L 200.71298723783138 43.98199445983379L 201.24188689164325 5.1998417095369955L 202.0292905585197 3.857545406165147L 203.37744253949236 3.073537677144819L 205.38668252438873 2.9506363949088388L 207.24465919583648 4.07263157894736L 208.34181870283695 5.983043326251256L 208.49965161531532 27.804709141274234L 208.10141030615281 29.82686980609418L 207.46084509519412 55.10387811634349L 206.49418116177117 70.27008310249306L 205.32345337026774 79.05938669388152L 204.4356285450468 82.19573925347255L 203.51923668821175 83.10000537880212L 200.22005444646098 83.93124484574231L 198.11557402277623 83.97583871960602L 196.00757882287027 82.05953902976063L 194.86695686584883 78.35872576177285L 193.4840090657265 70.27008310249306L 187.38878701572312 52.07063711911357L 174.92865425497646 19.193093896265157L 174.61970116679254 19.716066481994456L 174.47729736239913 75.32548476454294L 175.31324099722988 77.34764542936287L 175.62176493866244 80.3808864265928L 174.96992619568798 81.9505356139705L 173.86970716264344 82.87862932184261L 172.38919667590025 83.37929897813427L 169.65875317405354 83.09847307614349L 167.574181548213 80.3808864265928L 167.10829167440622 76.3365650969529L 167.08633841597828 43.98199445983379L 166.74565024532433 42.687102104291185L 166.78492283339926 32.264026129739115L 167.13498708332034 30.83795013850415L 167.54525364292783 9.605263157894736L 168.69847721114692 5.887096774193538L 171.3781163434903 2.573982677226799L 172.38919667590025 2.2657944798584877" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- E from the word ONE -->
  <path d="M 225.9764542936288 2.7352090535167917L 231.03185595567865 3.8175942247964456L 235.77469246120393 5.886113392446993L 237.068305861057 7.583102493074792L 237.05283933518 9.605263157894736L 235.83193430146338 11.341100188757867L 234.06509695290856 12.49206304904513L 232.0429362880886 12.512735625971215L 225.9764542936288 10.673039583710887L 225.05875399191908 10.851134111429202L 224.67936499868696 11.62742382271468L 224.70963011243276 19.716066481994456L 224.0503462603878 29.82686980609418L 224.33120523201492 33.50589759628271L 224.9653739612188 33.80335916406605L 231.03185595567865 33.940843336411206L 232.59180846853974 34.33339928769291L 233.77441135734068 35.18607025346909L 234.70641076375148 36.993123390192935L 234.74405866480197 37.91551246537396L 233.8463536117622 39.793670779820346L 232.8945509304876 40.66740937010717L 230.02077562326866 41.27702629780192L 225.9764542936288 40.93454149005995L 224.3574459132508 41.35254969598773L 224.70963011243276 43.98199445983379L 224.69595435168443 56.114958448753455L 224.30376099202434 58.1371191135734L 224.02023365048777 76.3365650969529L 224.45193472991687 77.86102342760205L 234.63228835889464 77.81655225019068L 236.79395512755434 78.67592743468578L 237.71485034794947 79.75482012804754L 237.97899637234812 81.39196675900276L 237.66314834272615 82.96785748400039L 236.72429667109665 84.05116647719085L 234.06509695290856 85.18939637956579L 220.92105263157893 85.25159741458909L 218.40137624763662 83.9115789473684L 217.05233999125232 81.39196675900276L 216.67792337140898 61.170360110803315L 216.2200329465033 55.10387811634349L 216.67792337140898 52.07063711911357L 216.65122796249486 9.605263157894736L 217.26421118980872 5.918240893091456L 218.47244992179694 4.125067328408744L 220.07724661886914 2.823176361957536L 225.9764542936288 2.7352090535167917" stroke="#000000" stroke-width="4" fill="#ffffff" />
  <!-- T from the word TWO -->
  <path d="M 258.1793628808864 2.048569479472443L 277.5415512465374 3.1526046475838587L 280.22501310174437 3.8885603054578084L 281.11007006680785 5.025664005214272L 281.21398095965867 7.4299085033157L 280.19857630612637 9.229047220253815L 277.5415512465374 10.408835267812847L 272.4861495844875 9.653084524968174L 271.72222222222223 9.85912748378121L 271.420945361846 10.616343490304708L 271.5787369823626 20.72714681440443L 274.2525664005214 52.07063711911357L 274.5742502709864 60.15927977839335L 275.26364673293136 66.22576177285318L 275.4312689013698 79.36980609418282L 275.0731206418951 80.94569681918044L 274.17646849918316 82.07120534128843L 272.3690771249453 83.09219139758271L 270.46398891966754 83.20464945440074L 268.7653739612188 82.07950138504155L 267.89295607439647 80.92975860704392L 267.7996556112899 67.23684210526315L 266.8818757419865 56.71104312233844L 266.21688029171946 40.948753462603875L 265.8458111851464 39.57063711911356L 265.17879627297907 21.738227146814403L 264.82044248909165 20.416045173662887L 264.54067995473446 10.616343490304708L 264.22043955734915 9.738911707581122L 257.31994459833794 8.483445455744626L 254.83343592900374 7.031221144967695L 254.2990887722177 5.5609418282548475L 254.57818621946043 3.8067174515235314L 255.5890190292665 2.8418228760455184L 258.1793628808864 2.048569479472443" stroke="#000000" stroke-width="4" fill="#ffffff" />
</svg>
swampthang commented 5 years ago

Figured out a way to reassemble the text back in the proper order by doing a double-sort. The array returned to polygons is nothing but a nested array so the only way to sort is by x/y values. For anyone who is interested in this, here's a codepen. I'm using GSAP's (greensock.com) MorphSVGPlugin to get bezier x/y point values and DrawSVGPlugin to do the animation.

https://codepen.io/swampthang/pen/RdXRJO?editors=1010

Better solution here. It looks at the vertical position of each item... https://codepen.io/swampthang/pen/bZXoox

Here's an MP4 that was output using the above referenced sorting code: https://vimeo.com/327167615