jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wasm: draw/fill a canvas with solid color.

This commit is contained in:
Joel Martin 2018-07-25 16:48:48 +09:00
parent 62ad00fedf
commit 9efc362c82
4 changed files with 72 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
core/wasm/README.md
View File

@ -1,3 +1,14 @@
# noVNC + wasm
The following example is based on this tutorial:
https://hacks.mozilla.org/2018/04/javascript-to-rust-and-back-again-a-wasm-bindgen-tale/
and this example:
https://github.com/rustwasm/wasm-bindgen/blob/master/examples/julia\_set/
## Prep: ## Prep:
``` ```

1
core/wasm/index.html
View File

@ -3,6 +3,7 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head> </head>
<body> <body>
<canvas id="target" width="1024" height="768"></canvas>
<script src='./index.js'></script> <script src='./index.js'></script>
</body> </body>
</html> </html>

22
core/wasm/index.js
View File

@ -1,6 +1,18 @@
// Note that a dynamic `import` statement here is required due to const WIDTH = 1024
// webpack/webpack#6615, but in theory `import { greet } from './hello_world';` const HEIGHT = 768
// will work here one day as well!
const rust = import('./novnc');
rust.then(m => m.greet('World!')); import('./novnc')
.then(wasm => {
const canvas = document.getElementById('target')
const ctx = canvas.getContext('2d')
canvas.addEventListener('click', () => {
const startMs = (new Date()).getTime()
wasm.draw(ctx, WIDTH, HEIGHT,
parseInt(Math.random()*256),
parseInt(Math.random()*256),
parseInt(Math.random()*256))
console.log("elapsed:", (new Date()).getTime() - startMs)
});
wasm.draw(ctx, WIDTH, HEIGHT, 50, 150, 150)
})

47
core/wasm/src/lib.rs
View File

@ -5,11 +5,50 @@ extern crate wasm_bindgen;
use wasm_bindgen::prelude::*; use wasm_bindgen::prelude::*;
#[wasm_bindgen] #[wasm_bindgen]
extern { extern "C" {
fn alert(s: &str); pub type ImageData;
#[wasm_bindgen(constructor)]
pub fn new(arr: &Uint8ClampedArray, width: u32, height: u32) -> ImageData;
} }
#[wasm_bindgen] #[wasm_bindgen]
pub fn greet(name: &str) { extern "C" {
alert(&format!("Hi, {}!", name)); pub type Uint8ClampedArray;
#[wasm_bindgen(constructor)]
pub fn new(arr: &[u8]) -> Uint8ClampedArray;
}
#[wasm_bindgen]
extern "C" {
pub type CanvasRenderingContext2D;
#[wasm_bindgen(method, js_name = putImageData)]
pub fn put_image_data(this: &CanvasRenderingContext2D, image_data: &ImageData, p_1: i32, p_2: i32);
}
#[wasm_bindgen]
pub fn draw(ctx: &CanvasRenderingContext2D, width: u32, height: u32, red: u8, green: u8, blue: u8) {
let data = fill(width, height, red, green, blue);
let uint8_array = Uint8ClampedArray::new(&data);
ctx.put_image_data(&ImageData::new(&uint8_array, width, height), 0, 0);
}
///////////////////////////////////////////////////
pub fn fill(width: u32, height: u32, red: u8, green: u8, blue: u8) -> Vec<u8> {
let mut data: Vec<u8> = vec![];
for _x in 0..width {
for _y in 0..height {
data.push(red as u8);
data.push(green as u8);
data.push(blue as u8);
data.push(255);
}
}
data
} }