CODEWITHSUNDEEP
typescripttextvuetify.jstwo.js
Will
Will

Reputation: 11

TypeScript Vuetify project - use Two.js Text to render multiline text

I have a Vue/Vuetify project and I would like to use Two.js Text to create multiline text. I would like something like this

const t1 = new Two.Text("Text must 
 be upright 2\u{1D7B9}", 50, 80, {});
t1.size = 12;
t1.noStroke();
t1.fill = "#000";
(t1 as any).leading = 50;
(t1 as any).id = "mytext";
(t1 as any).className = "myClass";
<twoInstance>.layers[LAYER.foregroundText].add(t1);

Where &#13;&#10; would indicate a line break. I'm rendering with SVG and the HTML entry that comes up is

<g id="two-124" transform="matrix(1 0 0 1 487 487)" opacity="1">
<text transform="matrix(1 0 0 1 50 80)" font-family="sans-serif" font-size="12" 
line-height="50" text-anchor="middle" dominant-baseline="middle" 
alignment-baseline="middle" font-style="normal" 
font-weight="500" text-decoration="none" 
fill="#000" stroke="undefined" stroke-width="undefined" 
opacity="1" class="" visibility="visible" id="mytext">
Text must &amp;#13;&amp;#10; be upright 2𝞹</text></g>

So it is not multiline text.

I'm accessing some of the internal variables of Two.js Text in typescript (and perhaps I shouldn't) and so I'm setting thinks like id, className (appears not to work) and leading. I was hoping that I would be able to give this an id and then use CSS to process the <text...> </text> tag/string and add the line break, but no luck.

<style lang="scss" scoped>
#mytext {
  font: italic 40px serif;
  fill: red;
  rotate: 90;
  <something here to process the text?>
}
</style>

I was hoping to use the CSS to inject/process a content area in the text tag and then use auto wrapped text (Links might be old - but that is what I was thinking). Again no luck.

I think the SVG gets in the way. I would ultimately like the text before and after centered. Any thoughts on this challenge? Thanks!

Upvotes: 1

Views: 149

Answers (0)

Related Questions