README-zh.md

✨Yew-Canvas.rs✨

English

Yew-Canvas.rs 是一个简单封装 Canvas 得到的 Yew 组件.

你可以简单的创建基于任何你需要的上下文的 canvas.

📑如何使用?📑

使用 Yew-Canvas.rs 只需要简单的三步, 下面以 CanvasRenderingContext2d 作为上下文举例:

1. 把 Yew-Canvas.rs 和你需要的上下文类型以及 HtmlCanvasElement 添加依赖!

   #Cargo.toml
   [dependencies]
   yew="0.19"
   yew-canvas="..."
   
   [dependencies.web-sys]
   version = "0.3.59"
   features = ["HtmlCanvasElement", "CanvasRenderingContext2d"]

2. 创建一个渲染器(Rander)结构体!

   #[derive(Clone, PartialEq)]
   struct Rander();
   
   impl WithRander for Rander {
       fn rand(self, canvas: &HtmlCanvasElement) {
           
           //...
       }
   }

3. 创建 Canvas 组件!

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

👌运行实例👌

0. *这一步需要你配置完成 Yew.rs 的开发环境, 下面以 Trunk 打包器举例:
1. cd ./examples/base-use
2. trunk serve

⚖️开源协议⚖️

Yew-Canvas.rs 是基于 MIT license 和 the Apache License (Version 2.0) 双协议开源, 使用其中你喜欢的协议来进行开发吧!