rust下的圖形繪制庫valora有什么特性

valora特性

• valora包含了rng(Random Number Generator)
• 在不改變composition scale的情況下復(fù)現(xiàn)任意分辨率的圖形
• 使用了type-safe color可以保證色彩的印刷一致性
• 充分利用硬件資源
• 充分利用Rust特性，大幅減少了調(diào)試工作量

下面我們參考valora網(wǎng)站上的教程來體驗繪制功能

開發(fā)環(huán)境

• Windows 10
• cargo version: cargo 1.45.0-nightly (9fcb8c1d2 2020-05-25)
• rustc --version: rustc 1.45.0-nightly (56daaf669 2020-06-03)

初始化新的rust工程之后使用命令安裝

cargo install cargo-edit && cargo add valora

注意：由于valora的依賴項中有些包使用了測試版本，所以需要使用rustc nightly版本才能順利安裝。如果使用rustc stable版本會報錯。

切換stable到nightly版本

rustup default nightly

體驗valora繪制功能

接下來我們通過valora主頁中Introduction部分的例子來體驗繪制功能

原始代碼如下:

use valora::prelude::*;
fn main() -> Result<()> {    run_fn(Options::from_args(), |_gpu, world, _rng| {        Ok(move |ctx: Context, canvas: &mut Canvas| {            canvas.set_color(LinSrgb::new(1., 1., 1.));            canvas.paint(Filled(ctx.world));
            let max_radius = world.width / 3.;            let radius = ctx.time.as_secs_f32().cos().abs() * max_radius;
            canvas.set_color(LinSrgb::new(1., 0., 0.));            canvas.paint(Filled(Ellipse::circle(world.center(), radius)));        })    })}

接下來我們通過修改原始代碼中的一些參數(shù)來體驗valora繪制的可玩性。

首先我們準(zhǔn)備對例子中的背景色和圓形色彩下手。至于例子代碼中相對細(xì)節(jié)的ctx, _gpu等關(guān)鍵部分現(xiàn)階段可以不用深入了解。

valora使用的色彩定義LinSrgb是均一化的rgb，通常來說rgb取值范圍為0 ~ 255，均一化就是0 ~ 1。值得注意的是賦值使用了浮點數(shù)(1., 0., 0.)，一般來說圖形范疇內(nèi)使用浮點數(shù)很普遍。

有了這些概念我們可以去找個在線color picker去選擇一下我們想要的背景色和圓的顏色。

經(jīng)過一番picker之后

• 背景色選擇了     rgb(153, 204, 255)，類似天空藍(lán)色。
• 圓形的顏色用個橙色類似的     rgb(255, 153, 51)

那么我們把選定的色彩粘貼到代碼中，同時做個均一化的除法

// color of background canvas.set_color(LinSrgb::new(153./255., 204./255., 255./255.));
// color of circle canvas.set_color(LinSrgb::new(255./255., 153./255., 51./255.));

原始代碼中圓形只是在中間位置scale縮放，有點呆。

結(jié)合一點寫代碼的背景知識，一般來說帶有繪制功能的視覺庫都是用一個二維或者三位維向量來做位置參數(shù)，旋轉(zhuǎn)用個3X3矩陣之類的套路。

再結(jié)合一點線性代數(shù)知識，向量外層乘以固定系數(shù)應(yīng)該還是個向量。

那么我們直接把上面負(fù)責(zé)變形的代碼復(fù)制粘貼到位置矩陣旁邊，同時做個乘法，讓圓心的x和y等尺度變化。

這樣就可以實現(xiàn)了類似高空攝像機(jī)向下拍攝一個彈跳皮球運(yùn)動的視覺誤差，復(fù)制粘貼走起（主要是懶）

canvas.paint(Filled(Ellipse::circle(world.center() * ctx.time.as_secs_f32().cos().abs(), radius)));

修改之后運(yùn)行一下看看效果，還湊合