Using .before/.after on Canvas

[mg5171]

Hello,
I’m trying to print a full sentence, centered and with equal spacing between the words. Each word is retrieved from a different column in the corresponding CSV file, which I’ve defined before this snippet. I can specify exact locations for each word, like this, but the spacing isn’t the same when the words are different lengths. Same issue if I define location with percentages.

getCanvas('canvas')
    .add(20, 'center at 50%', getText('subject'))
    .add(140, 'center at 50%', getText('verb'))
    .add(200, 'center at 50%', getText('word'))
    .add(300, 'center at 50%', getText('ending'))
    .settings.css('font-size', '1.5em')
    .print()

Is there a way to use .before and .after on a Canvas? If this has been answered somewhere else, please feel free to just forward me to it!

[Jeremy]

Hello,

You can use .before and .after on any element, including Canvas elements themselves or Text elements that you print on a Canvas element. For example, you can do that:

newText("subject", "I "),
newText("verb", "print "),
newText("word", "words "),
newText("ending", "on a line")
,
getText("subject").after(getText("verb").after(getText("word").after(getText("ending")))).print()

Or alternative you could print the next Text elements inside the first one, making sure they all appear as a horizontal sequence (css command):

newText("subject", "I ").css("display", "flex").print(),
newText("verb", "print ").print(getText("subject")),
newText("word", "words ").print(getText("subject")),
newText("ending", "on a line").print(getText("subject"))

Jeremy

[mg5171]

Thank you!

[mg5171]

One more thing: you have the text defined with a space after each word, so that the spaces appear when the words are printed. My spreadsheet does not have those space, and, while I could add them, that will complicated things on the other end. Is there a way to define a newText in PCIbex that consists just of a space, and add that with the .after command? When I try to do this, it either bumps the next word to the following line or doesn’t do anything.

[Jeremy]

If you are willing to add as many pieces as words, adding whole new Text elements would seem too much. Could you just add a space character in the code, like this?

newText("subject", row.subject+" "),
newText("verb", row.verb+" "),
newText("word", row.word+" "),
newText("ending", row.ending)

Jeremy

[mg5171]

Great, thanks!

[Author]

Posts