9 releases

0.2.4 Nov 8, 2022
0.2.3 Nov 2, 2022
0.2.2 Sep 28, 2022
0.1.3 Sep 5, 2022
0.1.2 Aug 25, 2022

#334 in Rendering

Download history 15/week @ 2024-02-26 2/week @ 2024-03-11 17/week @ 2024-04-01 303/week @ 2024-04-29 39/week @ 2024-06-03 110/week @ 2024-06-10

149 downloads per month

MIT/Apache

8KB
63 lines

✨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).

Dependencies

~12MB
~219K SLoC