Использование HTML Canvas из ReasonML с использованием React Hooks

Question

Я ищу быстрый пример того, как начать использовать вместе следующие технологии:

• HTML5 Canvas
• ReasonML
• ReasonReact: "ReasonReact - более безопасный и простой способ создания компонентов React в Reason".
• bs-webapi: привязки веб-API для Reason
• Реагировать на хуки

Для начала мне подойдет отрывок, который делает следующее:

• Элегантно и правильно управляет ссылкой на элемент HTML5 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))
    )}
  />;
};

Вот несколько случайных ссылок, которые я использовал, когда учился это делать. (Добавьте их сюда, если они будут полезны и другим.):

• Тестовый файл бс-WebAPI быстро изучить основы
• Конкретный ответ о том, как использовать setFillStyle (и где я узнал ссылку на тестовый файл выше)
• Ответ в проекте React-React, показывающий, как работать с React Refs.

В коде объявлений типов немного больше, чем необходимо, а некоторые openутверждения могут быть добавлены, но мне нравятся мои подробные ответы для большей наглядности.

Сократить код должно быть относительно легко.

Промежуточные функции canvasDimensions а также drawOnCanvasElement на мой взгляд, добавить немного структуры в код, но я не уверен, сделают ли они образец более или менее понятным для читателей, или есть более элегантный способ работы с размером холста.