stdweb :: web :: html_element :: canvaselement from document（）。query_selector（）

Question

我正在Rust构建紫杉WebApp，并试图从CSS选择器中获得CanvasRenderingContext2D。我存在的问题是如何将 stdweb :: Web :: element 转换为 stdweb :: Web :: HTML_Element :: Canvaselement 。

我当前的代码是：

use stdweb::web::{CanvasRenderingContext2d, document, Element, IParentNode};
use stdweb::web::html_element::CanvasElement;

fn get_canvas_context(selector: &str) -> CanvasRenderingContext2d {
    let element: Element = document().query_selector(selector)
        .expect(format!("query_selector({selector}) not found").as_str())
        .unwrap()
    ;
    // BUG: the trait `From<stdweb::web::Element>` is not implemented for `CanvasElement`
    let canvas_element: CanvasElement = element
        .try_into()
        .expect(format!("query_selector({selector}) not CanvasElement").as_str())
    ;
    let context: CanvasRenderingContext2d = canvas_element.get_context()
        .expect(format!("query_selector({selector}) failed to get_context()").as_str())
    ;
    context
}

货物检查报告以下错误，

error[E0277]: the trait bound `CanvasElement: From<stdweb::web::Element>` is not satisfied
  --> src/utils.rs:12:10
   |
12 |         .try_into()
   |          ^^^^^^^^ the trait `From<stdweb::web::Element>` is not implemented for `CanvasElement`
   |
   = note: required because of the requirements on the impl of `Into<CanvasElement>` for `stdweb::web::Element`
   = note: required because of the requirements on the impl of `std::convert::TryFrom<stdweb::web::Element>` for `CanvasElement`
   = note: required because of the requirements on the impl of `std::convert::TryInto<CanvasElement>` for `stdweb::web::Element`

我的最终目标是返回 canvasrenderingContext2d 我假设需要 canvas_element.get_context（）

正确的方法是什么？

Answer 1

尝试 dyn_into ：

  let canvas = document
    .get_element_by_id("my-canvas")
    .unwrap()
    .dyn_into::<web_sys::HtmlCanvasElement>()?;

jscast 文档。

Answer 2

谢谢@Ben在上面的答案中激发了我的启发。

该代码在实践中实现比您的代码Snippit建议更复杂。但是，您的提示使用 .dyn_into（）来自 jscast 允许我搜索GitHub以获取更多代码示例。

After a few days of effort, I was finally able to get the following code snippit to compile and render:

• Inspiration:

use anyhow::{anyhow, Result};
use wasm_bindgen::JsCast;
use web_sys::{CanvasRenderingContext2d, Document, HtmlCanvasElement, Window};

#[allow(dead_code)]
// DOCS: https://developer.mozilla.org/en-US/docs/Web/API/Window
pub fn window() -> Result<Window> {
    web_sys::window()
        .ok_or_else(|| anyhow!("No Window Found"))
}

#[allow(dead_code)]
// DOCS: https://developer.mozilla.org/en-US/docs/Web/API/Document
pub fn document() -> Result<Document> {
    window()?
        .document()
        .ok_or_else(|| anyhow!("No Document Found"))
}

#[allow(dead_code)]
// DOCS: https://developer.mozilla.org/en-US/docs/Web/API/HtmlCanvasElement
pub fn canvas(id_selector: &str) -> Result<HtmlCanvasElement> {
    document()?
        .get_element_by_id(id_selector)
        .ok_or_else(|| anyhow!("No Canvas Element found with ID 'canvas'"))?
        .dyn_into::<web_sys::HtmlCanvasElement>()
        .map_err(|element| anyhow!("Error converting {:#?} to HtmlCanvasElement", element))
}

#[allow(dead_code)]
// DOCS: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2d
pub fn canvas_context_2d(id_selector: &str) -> Result<CanvasRenderingContext2d> {
    canvas(id_selector)?
        .get_context("2d")
        .map_err(|js_value| anyhow!("Error getting 2d context {:#?}", js_value))?
        .ok_or_else(|| anyhow!("No 2d context found"))?
        .dyn_into::<web_sys::CanvasRenderingContext2d>()
        .map_err(|element| {
            anyhow!(
                "Error converting {:#?} to CanvasRenderingContext2d",
                element
            )
        })
}