Eine Leinwand mit einer horizontalen Bildlaufleiste in js_of_ocaml

Question

Ich erstelle eine Leinwand in js_of_ocaml wie folgt.

(* 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 

Ich kann nur einen weißen Bildschirm sehen.
Jetzt möchte ich eine horizontale Bildlaufleiste auf der Leinwand hinzufügen.
Ich denke, ich muss eine Box mit einer horizontalen Bildlaufleiste, die kleiner als die weiße Leinwand ist, und die weiße Leinwand ist in der Box.
Wie kann ich das tun?

Answer 1

Sie können die Leinwand in ein div setzen, dessen Breite kleiner als die Breite der Leinwand ist. Überprüfen Sie den folgenden Code ein:

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 

Dieser Code ist die Übersetzung der folgenden jsfiddle js_of_ocaml: https://jsfiddle.net/pre1wacc/