Canvas với thanh cuộn ngang trong js_of_ocaml

Question

Tôi tạo canvas trong js_of_ocaml như dưới đây.

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

Tôi chỉ có thể xem màn hình trắng.
Bây giờ, tôi muốn thêm thanh cuộn ngang vào canvas.
Tôi nghĩ tôi phải tạo một hộp có thanh cuộn ngang nhỏ hơn khung trắng và canvas trắng nằm trong hộp.
Tôi có thể làm như thế nào?

Answer 1

Bạn có thể đặt canvas thành một div có chiều rộng nhỏ hơn chiều rộng của canvas. Kiểm tra các đoạn mã sau:

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 

Mã này là bản dịch để js_of_ocaml của jsfiddle sau: https://jsfiddle.net/pre1wacc/