在 Seed Rust 应用程序中为 SVG 文本元素调用 getBBox答案

【问题标题】：Calling getBBox for a SVG text element in a Seed Rust application在 Seed Rust 应用程序中为 SVG 文本元素调用 getBBox
【发布时间】：2021-03-11 20:26:54
【问题描述】：

我刚刚使用 WASM 和 Seed 迈出了第一步，到目前为止，这是一次非常顺利的体验。我能够使用svg!、circle!、text!、...和类似的宏来创建 SVG。为了以正确的方式生成我的 SVG，我必须测量文本。我的想法是生成SVG文本节点并在节点上调用getBBox。我发现 Seed 正在使用 web_sys 和 getBBox is implemented there。

我的问题是如何从text! 创建的Node 到SvgTextElement。我试图访问node_ws 字段，但它似乎是“空的”。它可能尚未创建，但我现在对 Seed 的内部结构还不够了解。

那么如何创建一个 SVG 文本节点，以便在生成“主”SVG 节点之前对其调用 getBBox？

【问题讨论】：

标签： svg rust rust-wasm rust-seed

【解决方案1】：

您可以使用el_ref 来获取对DOM 元素的引用。像这样的东西应该可以工作：

struct Model {
    element: ElRef<web_sys::SvgTextElement>,
}

fn view(model: &Model) -> Node<Msg> {
    svg!![
        text![
            el_ref(&model.element),
            // ...
        ],
        // ...
    ]
}

fn init(orders: &mut impl Orders<Msg>) -> Model {
    orders.after_next_render(|_| Msg::Rendered);
    // ...
}

fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
    match msg {
        Msg::Rendered => {
            let element = model.element.get().expect("no svg text element");
            let b_box = element.get_b_box();
            // ...
        }
        // ...
    }
}

【讨论】：