chris/lumina-iced
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

some better svg text pieces

Browse source
This commit is contained in:
Chris Cochrun 2025-04-02 09:36:39 -05:00
parent b65ac72a01
commit ed5e434adb
2 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/ui/song_editor.rs
View file

@ -311,11 +311,11 @@ impl SongEditor {
<feDropShadow dx="10" dy="10" stdDeviation="5" flood-color='#000' /> <feDropShadow dx="10" dy="10" stdDeviation="5" flood-color='#000' />
</filter> </filter>
</defs> </defs>
<text x="0" y="300" font-weight="bold" font-family="Quicksand" font-size="80" fill="white" stroke="black" stroke-width="2" style="filter:url(#shadow);"> <text dominant-baseline="middle" text-anchor="middle" font-weight="bold" font-family="Quicksand" font-size="80" fill="white" stroke="black" stroke-width="2" style="filter:url(#shadow);">
Hello World <tspan x="50%" y="50" >Hello World this is</tspan>
</text> <tspan x="50%" y="140">longer chunks of text</tspan>
<text x="0" y="350" font-weight="bold" font-family="Quicksand" font-size="40" fill="white" stroke="black" stroke-width="2" style="filter:url(#shadow);"> <tspan x="50%" y="230">where we need to test whether the text</tspan>
Hello World <tspan x="50%" y="320">will look ok!</tspan>
</text> </text>
</svg>"#.as_bytes()); </svg>"#.as_bytes());
stack!( stack!(

12
src/ui/text_svg.rs
View file

@ -165,11 +165,15 @@ impl TextSvg {
} else { } else {
"".into() "".into()
}; };
// text y coords are based on bottom left corner so we need to take height into consideration
responsive(move |s| { responsive(move |s| {
let total_lines = self.text.lines().count();
let half_lines = (total_lines / 2) as f32;
let middle_position = s.height / 2.0;
let line_spacing = 10.0;
let starting_y_position = middle_position - (half_lines * (self.font.size as f32 + line_spacing));
let text_pieces: Vec<String> = self.text.lines().map(|t| format!("<tspan>{}</tspan>", t)).collect(); let text_pieces: Vec<String> = self.text.lines().map(|t| format!("<tspan>{}</tspan>", t)).collect();
let base = format!("<svg viewBox=\"0 0 {} {}\" xmlns=\"http://www.w3.org/2000/svg\"><defs>{}</defs> let base = format!("<svg viewBox=\"0 0 {} {}\" xmlns=\"http://www.w3.org/2000/svg\"><defs>{}</defs>
<text x=\"0\" y=\"50\" font-weight=\"bold\" font-family=\"{}\" font-size=\"{}\" fill=\"{}\" {} style=\"filter:url(#shadow);\"> <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-weight=\"bold\" font-family=\"{}\" font-size=\"{}\" fill=\"{}\" {} style=\"filter:url(#shadow);\">
{} {}
</text></svg>", s.width, s.height, shadow, self.font.name, self.font.size, self.fill, stroke, self.text); </text></svg>", s.width, s.height, shadow, self.font.name, self.font.size, self.fill, stroke, self.text);
Svg::new(Handle::from_memory( Svg::new(Handle::from_memory(
@ -180,9 +184,11 @@ impl TextSvg {
} }
fn text_spans(&self) -> Vec<String> { fn text_spans(&self) -> Vec<String> {
let total_lines = self.text.lines().count();
self.text self.text
.lines() .lines()
.map(|t| format!("<tspan>{}</tspan>", t)) .enumerate()
.map(|(i, t)| format!("<tspan x=\"50%\">{}</tspan>", t))
.collect() .collect()
} }
} }