在 js_of_ocaml 中带有水平滚动条的 canvas

Question

我在 js_of_ocaml 中创建了一个 canvas，如下所示。

(* create document *) 
let document = Dom_html.window##document

(* function to create canvas *)
let create_canvas () =
let canvas = Dom_html.createCanvas document in
canvas##width  <- 500;
canvas##height <- 500;
canvas

(* create canvas *)
let canvas = create_canvas ()

let start _ =
  let main = get_main () in 
  Dom.appendChild main canvas;
  Js._false in

Dom_html.window##onload <- Dom_html.handler start

我只能看到白屏。
现在，我想向 canvas 添加一个水平滚动条。
我想我必须做一个水平滚动条比白色canvas小的盒子，白色canvas在盒子里。
我该怎么做？

Answer 1

您可以将canvas放入宽度小于canvas的div。检查以下代码：

module Html = Dom_html 

let doc = Html.window##document

let create_div () = 
   let div = Html.createDiv doc in 
   div##style##width <- Js.string "500px";
   div##style##overflowX <- Js.string "scroll";
   div 


let create_canvas () =
   let canvas = Dom_html.createCanvas document in
   canvas##width  <- 900;
   canvas##height <- 900;
   canvas

let start _ =
  let main = get_main () in 
  let wrapper = create_div () in 
  let canvas = create_canvas () in 
  Dom.appendChild wrapper canvas; 
  Dom.appendChild main wrapper;
  Js._false in

Dom_html.window##onload <- Dom_html.handler start

此代码是对以下 jsfiddle 的 js_of_ocaml 的翻译：https://jsfiddle.net/pre1wacc/

在 js_of_ocaml 中带有水平滚动条的 canvas

A canvas with a horizontal scroll bar in js_of_ocaml

ocaml

canvas

js-of-ocaml