在 js_of_ocaml 中带有水平滚动条的 canvas
A canvas with a horizontal scroll bar in js_of_ocaml
我在 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在盒子里。
我该怎么做?
您可以将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,如下所示。
(* 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在盒子里。
我该怎么做?
您可以将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/