介于现在wasm这么火热的情况下本小白开始了rust的踩坑之路。
前端使用vite2+vue3+ts。
rust生成wasm与vue交互使用的vite-plugin-rsw插件：github.com/lencx/vite-…
直接上效果图：
前方大量代码来袭：
mod get_dom;
mod link;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
#[wasm_bindgen]
extern "C"{
#[wasm_bindgen(js_namespace = console)]
fn log(s: &str);
}
#[wasm_bindgen]
pub fn set_map(id: &str) -> Result<(), JsValue> {
// 获取页面window
let window = web_sys::window().expect("should have a window in this context");
// 获取页面dom
let document: web_sys::Document = window.document().expect("window should have a document");
// 根据id获取容器
let map: web_sys::Element = document.get_element_by_id(id).expect("document should have a id");
/*
* 创建canvas元素
* create_element rust方法一般用下划线分隔
* dyn_into 将类型进行转换
*/
let canvas = document
.create_element("canvas")?
.dyn_into::<web_sys::HtmlCanvasElement>()?;
// 获取容器宽度
let width = map.client_width() as f64;
// 获取容器高度
let height = map.client_height() as f64;
// 在容器内部添加canvas元素
map.append_child(&canvas)?;
// 设置canvas的宽度
canvas.set_width(width as u32);
// 设置canvas的高度
canvas.set_height(height as u32);
let ctx: web_sys::CanvasRenderingContext2d = canvas
.get_context("2d")
.unwrap()
.unwrap().dyn_into::<web_sys::CanvasRenderingContext2d>().unwrap();
ctx.set_fill_style(&JsValue::from("rgb(255,255,255)"));
ctx.fill_rect(0.0, 0.0, width as f64, height as f64);
ctx.stroke();
// 地图数据json
let link: serde_json::Value = serde_json::from_str(link::set_json()).unwrap();
// 矩阵坐标x轴最大值
let mut max_x = 0.00;
// 矩阵坐标y轴最大值
let mut min_x = 0.00;
// 矩阵坐标x轴最小值
let mut max_y = 0.00;
// 矩阵坐标y轴最小值
let mut min_y = 0.00;
// 当前X轴原点处于Y轴位置
let x = { height as f64 / 2 as f64 } as f64;
// 当前Y轴原点处于X轴位置
let y = { width as f64 / 2 as f64 } as f64;
let dip = 10.00;
// features边界线数据list
for element in link["features"].as_array().unwrap() {
// 坐标数据
let coordinates = element["geometry"]["coordinates"].as_array().unwrap();
for coordinate_element in coordinates {
// log(&format!("{:?}", coordinate_element));
let coordinate_list = coordinate_element.as_array().unwrap();
// log(&format!("{:?}", coordinate_list));
for coordinate in coordinate_list {
let data_list = coordinate.as_array().unwrap();
if data_list.len() > 2 {
for data in data_list {
if data[0].as_f64().unwrap() > max_x {
max_x = data[0].as_f64().unwrap();
}
if min_x < data[0].as_f64().unwrap() {
min_x = data[0].as_f64().unwrap();
}
if data[1].as_f64().unwrap() > max_y {
max_y = data[1].as_f64().unwrap();
}
if min_y < data[1].as_f64().unwrap() {
min_y = data[1].as_f64().unwrap();
}
}
} else {
if data_list[0].as_f64().unwrap() > max_x {
max_x = data_list[0].as_f64().unwrap();
}
if min_x < data_list[0].as_f64().unwrap() {
min_x = data_list[0].as_f64().unwrap();
}
if data_list[1].as_f64().unwrap() > max_y {
max_y = data_list[1].as_f64().unwrap();
}
if min_y < data_list[1].as_f64().unwrap() {
min_y = data_list[1].as_f64().unwrap();
}
}
}
}
}
let move_x = (y as f64 - ((max_x + min_x) / 2.00)) as f64;
let move_y = (x as f64 - ((max_y + min_y) / 2.00)) as f64;
log(&format!("{:?}", move_x));
log(&format!("{:?}", move_y));
// features边界线数据list
for element in link["features"].as_array().unwrap() {
// 坐标数据
let coordinates = element["geometry"]["coordinates"].as_array().unwrap();
for coordinate_element in coordinates {
// log(&format!("{:?}", coordinate_element));
let coordinate_list = coordinate_element.as_array().unwrap();
// log(&format!("{:?}", coordinate_list));
ctx.begin_path();
for (j ,coordinate) in coordinate_list.iter().enumerate() {
let data_list = coordinate.as_array().unwrap();
if data_list.len() > 2 {
for (index, data) in data_list.iter().enumerate() {
let mut map_x = data[0].as_f64().unwrap() + move_x;
let mut map_y = data[1].as_f64().unwrap() + move_y;
let val_x = map_x - y;
let val_y = map_y - x;
map_x += (val_x as f64 * dip as f64);
map_y += (val_y as f64 * dip as f64);
if (map_y < x) {
map_y = x + (x - map_y)
} else {
map_y = x - (map_y - x)
}
if index == 0 {
ctx.move_to(map_x, map_y - height / 4.00);
}
ctx.line_to(map_x, map_y - height / 4.00);
}
} else {
let mut map_x = data_list[0].as_f64().unwrap() + move_x;
let mut map_y = data_list[1].as_f64().unwrap() + move_y;
let val_x = map_x - y;
let val_y = map_y - x;
map_x += (val_x as f64 * dip as f64);
map_y += (val_y as f64 * dip as f64);
if (map_y < x) {
map_y = x + (x - map_y)
} else {
map_y = x - (map_y - x)
}
if j == 0 {
ctx.move_to(map_x, map_y - height / 4.00);
}
ctx.line_to(map_x, map_y - height / 4.00);
}
}
ctx.stroke();
}
}
Ok(())
}
pub fn set_json() -> &'static str {
return r#" {此处为地图json数据} "
}
带我有空把多余的代码抽离出来！
