【译】使用 Rust 和 WebAssembly 构建离线画图页面
- 原文地址:https://dev.to/sendilkumarn/create-dev-s-offline-page-with-rust-and-webassembly-21gn
- 原文仓库:https://github.com/sendilkumarn/draw-page
- 原文作者:Sendil Kumar N
- 译文出自:https://github.com/suhanyujie
- 本文永久链接:(缺省)
- 译者:suhanyujie
- 翻译不当之处,还请指出,谢谢!
- 文中的页面效果可以参考这里:离线画图页
Dev 网站的离线画图页很有趣。我们能用 Rust 和 WebAssembly 来实现吗?
答案是肯定的。让我们现在就来实现它。
首先,我们通过 Webpack 创建了一个基于 Rust 和 WebAssembly 的简单应用。
npm init rust-webpack dev-offline-canvas
Rust 和 WebAssembly 生态提供了 web_sys
,它在 Web API 上提供了很多需要的绑定。可以从这里检出。
示例应用已经引入了 web_sys
依赖。web_sys
crate 中包含了所有可用的 WebAPI 绑定。
如果引入所有的 WebAPI 绑定将会增加绑定文件的大小。按需引入必要的 API 是比较重要的。
我们移除已经存在的 feature 列表(位于 toml 文件中)
features = [
'console'
]
并使用下面的替代:
features = [
'CanvasRenderingContext2d',
'CssStyleDeclaration',
'Document',
'Element',
'EventTarget',
'HtmlCanvasElement',
'HtmlElement',
'MouseEvent',
'Node',
'Window',
]
上面的 features 列表是我们将在本例中需要使用的一些 features。
开始写 Rust 代码
打开文件 src/lib.rs
。
使用下面的代码替换掉文件中的 start()
函数:
#[wasm_bindgen(start)]
pub fn start() -> Result<(), JsValue> {
Ok()
}
一旦实例化了 WebAssembly 模块,#[wasm_bindgen(start)]
就会调用这个函数。可以查看规范中关于 start 函数的详细信息。
我们在 Rust 中将得到 window
对象。
let window = web_sys::window().expect("should have a window in this context");
接着从 window
对象中获取 document。
let document = window.document().expect("window should have a document");
创建一个 Canvas 元素,将其插入到 document 中。
let canvas = document
.create_element("canvas")?
.dyn_into::<web_sys::HtmlCanvasElement>()?;
document.body().unwrap().append_child(&canvas)?;
设置 canvas 元素的宽、高和边框。
canvas.set_width(640);
canvas.set_height(480);
canvas.style().set_property("border", "solid")?;
在 Rust 中,一旦离开当前上下文或者函数已经 return,对应的内存就会被释放。但在 JavaScript 中,window
, document
在页面的启动和运行时都是活动的(位于生命周期中)。
因此,为内存创建一个引用并使其静态化,直到程序运行结束,这一点很重要。
获取 Canvas 渲染的上下文,并在其外层包装一个 wrapper,以保证它的生命周期。
RC
表示 Reference Counted
。
Rc 类型提供在堆中分配类型为 T 的值,并共享其所有权。在 Rc 上调用 clone 会生成指向堆中相同值的新的指针。当指向给定值的最后一个 Rc 指针即将被释放时,它指向的值也将被释放。 —— RC 文档
这个引用被 clone 并用于回调方法。
let context = canvas
.get_context("2d")?
.unwrap()
.dyn_into::<web_sys::CanvasRenderingContext2d>()?;
let context = Rc::new(context);
Since we are going to capture the mouse events. We will create a boolean variable called pressed
. The pressed
will hold the current value of mouse click
.
因为我们要响应 mouse 事件。因此我们将创建一个名为 pressed
的布尔类型的变量。pressed
用于保存 mouse click
(鼠标点击)的当前值。
let pressed = Rc::new(Cell::new(false));
现在,我们需要为 mouseDown
、mouseUp
、mouseMove
创建一个闭包(回调函数)。
{ mouse_down(&context, &pressed, &canvas); }
{ mouse_move(&context, &pressed, &canvas); }
{ mouse_up(&context, &pressed, &canvas); }
我们将把这些事件触发时需要执行的操作定义为独立的函数。这些函数接收 canvas 元素的上下文和鼠标按下状态作为参数。
fn mouse_up(context: &std::rc::Rc<web_sys::CanvasRenderingContext2d>, pressed: &std::rc::Rc<std::cell::Cell<bool>>, canvas: &web_sys::HtmlCanvasElement) {
let context = context.clone();
let pressed = pressed.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
pressed.set(false);
context.line_to(event.offset_x() as f64, event.offset_y() as f64);
context.stroke();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback("mouseup", closure.as_ref().unchecked_ref()).unwrap();
closure.forget();
}
fn mouse_move(context: &std::rc::Rc<web_sys::CanvasRenderingContext2d>, pressed: &std::rc::Rc<std::cell::Cell<bool>>, canvas: &web_sys::HtmlCanvasElement){
let context = context.clone();
let pressed = pressed.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
if pressed.get() {
context.line_to(event.offset_x() as f64, event.offset_y() as f64);
context.stroke();
context.begin_path();
context.move_to(event.offset_x() as f64, event.offset_y() as f64);
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback("mousemove", closure.as_ref().unchecked_ref()).unwrap();
closure.forget();
}
fn mouse_down(context: &std::rc::Rc<web_sys::CanvasRenderingContext2d>, pressed: &std::rc::Rc<std::cell::Cell<bool>>, canvas: &web_sys::HtmlCanvasElement){
let context = context.clone();
let pressed = pressed.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
context.begin_path();
context.set_line_width(5.0);
context.move_to(event.offset_x() as f64, event.offset_y() as f64);
pressed.set(true);
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback("mousedown", closure.as_ref().unchecked_ref()).unwrap();
closure.forget();
}
他们非常类似于你平时写的 JavaScript
的 API,但它们是用 Rust 编写的。
现在我们都设置好了。我们可以运行应用程序并在画布中画画。 🎉 🎉 🎉
但我们还没有设定颜色。
添加多个颜色
增加颜色样本,创建一个 div 列表,并使用它们作为颜色选择器。
在 start
函数中定义我们需要的颜色列表。
#[wasm_bindgen(start)]
pub fn start() -> Result<(), JsValue> {
// ....... Some content
let colors = vec!["#F4908E", "#F2F097", "#88B0DC", "#F7B5D1", "#53C4AF", "#FDE38C"];
Ok()
}
然后遍历颜色列表,为所有颜色创建一个 div,并将其加入到 document 中。对于每个 div,还需要添加一个 onClick
处理程序来更改画板颜色。
for c in colors {
let div = document
.create_element("div")?
.dyn_into::<web_sys::HtmlElement>()?;
div.set_class_name("color");
{
click(&context, &div, c.clone()); // On Click Closure.
}
div.style().set_property("background-color", c);
let div = div.dyn_into::<web_sys::Node>()?;
document.body().unwrap().append_child(&div)?;
}
其中 click 函数实现如下所示:
fn click(context: &std::rc::Rc<web_sys::CanvasRenderingContext2d>, div: &web_sys::HtmlElement, c: &str) {
let context = context.clone();
let c = JsValue::from(String::from(c));
let closure = Closure::wrap(Box::new(move || {
context.set_stroke_style(&c);
}) as Box<dyn FnMut()>);
div.set_onclick(Some(closure.as_ref().unchecked_ref()));
closure.forget();
}
现在稍微美化一下。打开 static/index.html
文件。在其中添加 div 样式。
<style>
.color {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
margin: 10px;
}
</style>
这就是我们的画板了,我们已经创建好了这个应用。🎉
可以从这里检出示例应用。
希望这个例子能给你开启美妙的 WebAssembly 旅程带来灵感。如果你有任何的问题、建议、感受,欢迎给我留言评论。
你可以在 Twitter 关注我。
如果你喜欢这个文章,请给这个文章点赞或留言。❤️
还可以阅读我的其他 WebAssembly 文章,点击这儿。
Top comments (0)