我正在寻找有关如何一起使用以下技术的快速示例:
为了让我开始工作,我需要一个能做到以下几点的代码片段:
我已经有了基本的ReasonML React项目设置。
type dimensions = {
width: float,
height: float,
};
let drawOnCanvas =
(context: Webapi.Canvas.Canvas2d.t, dimensions: dimensions): unit => {
open Webapi.Canvas.Canvas2d;
clearRect(context, ~x=0., ~y=0., ~w=dimensions.width, ~h=dimensions.height);
setFillStyle(context, String, "rgba(0,128,169,0.1)");
fillRect(context, ~x=10.0, ~y=10.0, ~w=30.0, ~h=30.0);
};
let canvasDimensions = (canvasElement: Dom.element): dimensions =>
Webapi.Canvas.CanvasElement.{
width: float_of_int(width(canvasElement)),
height: float_of_int(height(canvasElement)),
};
let drawOnCanvasElement = (canvasElement: Dom.element): unit =>
Webapi.Canvas.CanvasElement.(
drawOnCanvas(
getContext2d(canvasElement),
canvasDimensions(canvasElement),
)
);
[@react.component]
let make = () => {
open React;
let canvasElementRef: Ref.t(option(Dom.element)) = useRef(None);
useLayoutEffect0(() => {
Ref.current(canvasElementRef)
|> Belt.Option.map(_, drawOnCanvasElement)
|> ignore;
None;
});
<canvas
width="200"
height="100"
ref={ReactDOMRe.Ref.callbackDomRef(elem =>
React.Ref.setCurrent(canvasElementRef, Js.Nullable.toOption(elem))
)}
/>;
};
这里是一些我在学习如何做时使用的随机链接。 (在这里添加它们,以防它们也对其他人有用。):
open
语句可以添加,但我喜欢我的回答有点冗长方面更具指导性。缩短代码应该相对容易。
中间功能canvasDimensions
和drawOnCanvasElement
加我认为代码有些结构化,但是我不确定它们是否使样本或多或少对于读者来说很清晰,或者是否会有更优雅的方式来处理画布大小。