From: Brendan Hansen Date: Sat, 20 Feb 2021 02:41:17 +0000 (-0600) Subject: added fixed aspect ratio slides X-Git-Url: https://git.brendanfh.com/?a=commitdiff_plain;h=8bb42fe56bc18b2c6fe3a014e4f83bbdb45eac7f;p=onyx-prez.git added fixed aspect ratio slides --- diff --git a/dist/index.js b/dist/index.js index 3c1f889..d966c3d 100644 --- a/dist/index.js +++ b/dist/index.js @@ -117,10 +117,10 @@ let canvas_import_obj = { canvasCtx.fillRect(0, 0, canvasElem.width, canvasElem.height); }, - get_width(canvas) { return canvasElem.width; }, - get_height(canvas) { return canvasElem.height; }, + getWidth(canvas) { return canvasElem.width; }, + getHeight(canvas) { return canvasElem.height; }, - set_size(canvas, width, height) { + setSize(canvas, width, height) { canvasElem.width = width; canvasElem.height = height; }, @@ -136,6 +136,31 @@ let canvas_import_obj = { canvasCtx.fillStyle = `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`; }, + setTransform(canvas, matrix_buf) { + let data_view = new DataView(wasm_instance.exports.memory.buffer, matrix_buf, 6 * 4); + + let a = data_view.getFloat32(0, true); + let b = data_view.getFloat32(4, true); + let c = data_view.getFloat32(8, true); + let d = data_view.getFloat32(12, true); + let e = data_view.getFloat32(16, true); + let f = data_view.getFloat32(20, true); + + canvasCtx.setTransform(a, b, c, d, e, f); + }, + + getTransform(canvas, matrix_buf) { + let transform = canvasCtx.getTransform(); + + let data_view = new DataView(wasm_instance.exports.memory.buffer, matrix_buf, 6 * 4); + data_view.setFloat32(0, transform.a, true); + data_view.setFloat32(4, transform.b, true); + data_view.setFloat32(8, transform.c, true); + data_view.setFloat32(12, transform.d, true); + data_view.setFloat32(16, transform.e, true); + data_view.setFloat32(20, transform.f, true); + }, + measureText(canvas, text_ptr, text_len, measure_ptr) { const data = new Uint8Array(wasm_instance.exports.memory.buffer, text_ptr, text_len); const text = new TextDecoder().decode(data); diff --git a/dist/prez.wasm b/dist/prez.wasm index 3112fb4..fc27b1b 100644 Binary files a/dist/prez.wasm and b/dist/prez.wasm differ diff --git a/onyx.prez b/onyx.prez index 82250f3..676a9ca 100644 --- a/onyx.prez +++ b/onyx.prez @@ -1,3 +1,4 @@ +[aspect_ratio 16 9] [var tbright 236] [var bbright 20] @@ -47,7 +48,7 @@ ▪ Easy to read [image onyx_example x 50 y 30 width 35 - border_color 30 30 30 border_width 1] + border_color 30 30 30 border_width 2] # --------------------------------------------- @@ -81,7 +82,7 @@ https://webassembly.org/ [image wasm_logo x 65 y 34 width 20 - border_width 2 border_color 20 20 20] + border_width 20 border_color 20 20 20] # --------------------------------------------- diff --git a/src/canvas.onyx b/src/canvas.onyx index 1bb1967..37d0dee 100644 --- a/src/canvas.onyx +++ b/src/canvas.onyx @@ -6,14 +6,19 @@ Canvas :: struct { init :: (id: str) -> Handle #foreign "canvas" "init" --- clear :: (handle: Handle, r: f32, g: f32, b: f32, a := 1.0f) -> Handle #foreign "canvas" "clear" --- - get_width :: (handle: Handle) -> u32 #foreign "canvas" "get_width" --- - get_height :: (handle: Handle) -> u32 #foreign "canvas" "get_height" --- + get_width :: (handle: Handle) -> u32 #foreign "canvas" "getWidth" --- + get_height :: (handle: Handle) -> u32 #foreign "canvas" "getHeight" --- - set_size :: (handle: Handle, width: u32, height: u32) -> void #foreign "canvas" "set_size" --- + set_size :: (handle: Handle, width: u32, height: u32) -> void #foreign "canvas" "setSize" --- set_font :: (handle: Handle, font_name: str) -> u32 #foreign "canvas" "setFont" --- set_color :: (handle: Handle, r: f32, g: f32, b: f32, a := 1.0f) -> void #foreign "canvas" "setColor" --- + TransformMatrix :: #type [6] f32; + + set_transform :: (handle: Handle, matrix: TransformMatrix) -> void #foreign "canvas" "setTransform" --- + get_transform :: (handle: Handle, out_matrix: TransformMatrix) -> void #foreign "canvas" "getTransform" --- + TextMetrics :: struct { width : f32; box : Box; @@ -49,16 +54,3 @@ setup_canvas :: () { set_font(canvas, "bold 72px Arial"); } -draw_centered_text :: (text: str, y_baseline: f32) { - use Canvas - - width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas); - - font_metrics: TextMetrics; - measure_text(canvas, text, ^font_metrics); - - x := (width - font_metrics.width) / 2; - - fill_text(canvas, text, x, y_baseline * height); -} - diff --git a/src/slides.onyx b/src/slides.onyx index 7a013c1..ac805c4 100644 --- a/src/slides.onyx +++ b/src/slides.onyx @@ -188,12 +188,36 @@ slide_render :: (use slide: ^Slide) { // // C :: Canvas // - Canvas.clear(canvas, background.r, background.g, background.b, background.a); + Canvas.clear(canvas, 0, 0, 0, 1); - for item: items do if item != null do slide_item_render(item, slide); + canvas_width, canvas_height := cast(f32) Canvas.get_width(canvas), cast(f32) Canvas.get_height(canvas); + width, height := 0.0f, 0.0f; + x, y := 0.0f, 0.0f; + + if canvas_width > canvas_height * aspect_ratio { + height = canvas_height; + width = canvas_height * aspect_ratio; + x = (canvas_width - width) / 2; + y = 0; + } else { + width = canvas_width; + height = canvas_width / aspect_ratio; + x = 0; + y = (canvas_height - height) / 2; + } + + transform := f32.[ 1, 0, 0, 1, x, y ]; + identity := f32.[ 1, 0, 0, 1, 0, 0 ]; + + Canvas.set_transform(canvas, transform); + defer Canvas.set_transform(canvas, identity); + + Canvas.fill_rect(canvas, 0, 0, width, height, background.r, background.g, background.b, background.a); + for item: items do if item != null do slide_item_render(item, slide, width, height); } -slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) { +slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide, + width: f32, height: f32) { use Canvas use Slide_Item.Kind @@ -204,12 +228,18 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) { use Slide_Item_Text.Justify switch text.justify { - case Center do draw_centered_text(text.text, text.y_pos); + case Center { + font_metrics: TextMetrics; + measure_text(canvas, text.text, ^font_metrics); + + x := (width - font_metrics.width) / 2; + + fill_text(canvas, text.text, x, text.y_pos * height); + } case Left { use Canvas - width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas); x, y := text.padding * width, text.y_pos * height; fill_text(canvas, text.text, x, y); } @@ -217,8 +247,6 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) { case Right { use Canvas - width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas); - font_metrics: TextMetrics; measure_text(canvas, text.text, ^font_metrics); @@ -232,8 +260,6 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) { use Canvas if html_image := map.get(^the_slideshow.image_map, image.name); html_image.handle != -1 { - width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas); - // @Speed: There is a much better way of doing this... // @Robustness: Currently, because HTML images are asynchronously loaded, // the image dimensions are not known when the load_image call is made. @@ -250,7 +276,7 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) { h := w * (cast(f32) html_image.height / cast(f32) html_image.width); if image.border_width > 0 { - bw := image.border_width * width; + bw := image.border_width * w; fill_rect(canvas, x - bw, y - bw, w + 2 * bw, h + 2 * bw, image.border_color.r, image.border_color.g, image.border_color.b, image.border_color.a); @@ -263,8 +289,6 @@ slide_item_render :: (use slide_item: ^Slide_Item, slide: ^Slide) { case Rect { use Canvas - width, height := cast(f32) get_width(canvas), cast(f32) get_height(canvas); - x := rect.x * width; y := rect.y * height; w := rect.w * width; diff --git a/todo b/todo index a8ed93f..0ebe506 100644 --- a/todo +++ b/todo @@ -1,5 +1,5 @@ [X] Image borders -[ ] Fixed aspect ratio slides +[X] Fixed aspect ratio slides [ ] Slide animation: Slide from Right [ ] Slide animatoin: Fade