yew-canvas

Crates.ioyew-canvas
lib.rsyew-canvas
version0.2.4
sourcesrc
created_at2022-08-25 08:58:30.111165
updated_at2022-11-08 15:20:44.023443
descriptionA Canvas component is encapsulated.
homepage
repositoryhttps://github.com/1216892614/Yew-Canvas.rs
max_upload_size
id652021
size21,321
Nerd (1216892614)

documentation

https://docs.rs/yew-canvas/latest/yew_canvas/

README

✨Yew-Canvas.rs✨

中文

Yew-Canvas.rs is a simple Canvas component for Yew.

U can easily create a canvas with the context u need.

📑How to use it?📑

Just 3 Simple steps, if the context u need is CanvasRenderingContext2d, do like this:

  1. Get Yew-Canvas.rs, HtmlCanvasElement and context type!

    #Cargo.toml
    [dependencies]
    yew="0.19"
    yew-canvas="..."
    
    [dependencies.web-sys]
    version = "0.3.59"
    features = ["HtmlCanvasElement", "CanvasRenderingContext2d"]
    
  2. Create a Rander struct!

    #[derive(Clone, PartialEq)]
    struct Rander();
    
    impl WithRander for Rander {
        fn rand(self, canvas: &HtmlCanvasElement) {
            
            //...
        }
    }
    
  3. Return the component as VNode!

    html!(
        <Canvas<CanvasRenderingContext2d, Rander>
            //Just use style, canvas can suit automaticly.
            style="
                width: 100%;
                height: 100%;
            "
            rander={Box::new(Rander())}
        />
            {"The browser is not supported."}
        </Canvas<CanvasRenderingContext2d, Rander>>
    )
    

👌Run Exmple👌

  1. *This requires you to set up the Yew.rs development environment in advance, the following is a Trunk packaging example:
  2. cd ./examples/base-use
  3. trunk serve

⚖️License⚖️

Yew-Canvas.rs is dual licensed under the MIT license and the Apache License (Version 2.0).

Commit count: 23

cargo fmt