我正在寻找一个关于如何开始一起使用以下技术的快速示例:
- HTML5 画布
- 原因机器学习
- ReasonReact:“ReasonReact 是一种在 Reason 中构建 React 组件的更安全、更简单的方法。”
- bs-webapi : Reason 的 Web API 绑定
- 反应钩子
让我开始一个执行以下操作的片段会很棒:
- 优雅而正确地管理对 HTML5 Canvas 元素的引用
- 是一个简单的反应组件
- 清除画布并绘制一些东西
我已经有了基本的 ReasonML React 项目设置。
我正在寻找一个关于如何开始一起使用以下技术的快速示例:
让我开始一个执行以下操作的片段会很棒:
我已经有了基本的 ReasonML React 项目设置。
这是一个示例,显示了将所有内容放在一起的一种方法:
// Helper type to pass canvas size
type dimensions = {
width: float,
height: float,
};
// Actual drawing happens here, canvas context and size as parameters.
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);
};
// Extract canvas dimensions from canvas element
let canvasDimensions = (canvasElement: Dom.element): dimensions =>
Webapi.Canvas.CanvasElement.{
width: float_of_int(width(canvasElement)),
height: float_of_int(height(canvasElement)),
};
// An adapter to give nicer parameters to drawOnCanvas above
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
为代码添加了一些结构,但我不确定它们是否会使示例对读者更加清晰,或者是否会有更优雅的方式来处理画布大小。