使用React Hooks从ReasonML使用HTML Canvas

2024-04-19 • 问答

我正在寻找一个有关如何一起使用以下技术的快速示例：

HTML5 Canvas
ReasonML
ReasonReact：“ ReasonReact是在Rational中构建React组件的一种更安全，更简单的方法。”
bs-webapi：Web API绑定原因
React Hooks

要让我开始工作，我需要一个代码片段，该代码可以完成以下工作：

优雅，正确地管理对HTML5 Canvas元素的引用
是一个简单的反应组件
清除画布并绘制一些东西

我已经有基本的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))
    )}
  />;
};

这里有一些我在学习如何做时使用的随机链接。（在这里添加它们，以防它们也对其他人有用。）：

通过bs-webapi test file快速学习基础知识
A specific answer on how to use the setFillStyle（以及我在上面学到的测试文件的链接）
An answer in reason-react project showing how to work with React Refs.

该代码的类型声明比必要的多，有些open 语句可以添加，但我喜欢我的回答有点冗长方面更具指导性。

缩短代码应该相对容易。

中间函数canvasDimensions和drawOnCanvasElement添加我认为代码有点结构化，但是我不确定它们是否使样本或多或少对读者来说很清晰，或者是否有一种更优雅的方式来处理画布大小。

使用React Hooks从ReasonML使用HTML Canvas

city0113 回答：使用React Hooks从ReasonML使用HTML Canvas

大家都在问