1

我有一个 Vue/Vuetify 项目，我想使用Two.js Text创建多行文本。我想要这样的东西

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);

哪里&#13;&#10;会指示换行符。我正在使用 SVG 进行渲染，出现的 HTML 条目是

<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>

所以它不是多行文本。

我正在 typescript 中访问 Two.js Text的一些内部变量（也许我不应该），所以我设置的想法是id, className（似乎不起作用）和leading. 我希望我能够给出这个id然后使用 CSS 来处理<text...> </text>标签/字符串并添加换行符，但没有运气。

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

我希望使用 CSS 来注入/处理文本标签中的内容区域，然后使用自动换行的文本（链接可能很旧——但这就是我的想法）。再次没有运气。

我认为 SVG 会妨碍您。我最终希望文本居中前后。对这个挑战有什么想法吗？谢谢！

4

0 回答 0