使用 Reaction Hooks 来自 ReasonML 的 HTML Canvas

Question

我正在寻找有关如何开始同时使用以下技术的快速示例：

HTML5 Canvas
ReasonML
ReasonReact: "ReasonReact is a safer, simpler way to build React components, in Reason."
bs-webapi：Reason
React Hooks

为了让我开始，执行以下操作的代码片段会很棒：

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

我已经有了基本的 ReasonML React 项目设置。

Answer 1

这是一个示例，展示了一种将所有内容组合在一起的方法：


// 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))
    )}
  />;
};

这是我在学习如何执行此操作时使用的一些随机 links。（在这里添加它们以防它们对其他人也有用。）：

快速学习基础知识bs-webapi test file
（我在上面的测试文件中学到了 link）
An answer in reason-react project showing how to work with React Refs.

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

缩短代码应该比较容易。

中间函数canvasDimensions和drawOnCanvasElement相加在我看来，代码有点结构，但我不确定它们是否使读者或多或少地清楚了示例，或者是否有更优雅的方式来处理 canvas 大小。

使用 Reaction Hooks 来自 ReasonML 的 HTML Canvas

Using HTML Canvas from ReasonML using React Hooks

html5-canvas

reason

reason-react

bs-webapi

react-hooks