如何为使用 react-konva 渲染的画布元素设置 HTML-id答案

【问题标题】：How to set HTML-id for a canvas element rendered with react-konva如何为使用 react-konva 渲染的画布元素设置 HTML-id
【发布时间】：2019-10-03 20:02:28
【问题描述】：

我在一个项目中使用 react-konva 来渲染 HTML5-canvas 元素：

import desktop_tea_1 from "./previews_desktop/tea_1.png";

const DesktopTea1 = () => {
    const [desktop_tea_1_const] = useImage(desktop_tea_1);
    return <Image image={desktop_tea_1_const} width={600} height={600}  />;
};

(...)

<Stage width={600} height={600}>
    <Layer ref="DesktopTea1">
        <DesktopTea1/>
    </Layer>
</Stage>

现在我希望 HTML 输出有一个 id (myId) 像：

<canvas width="600" height="600" id="myId"></canvas>

我只能找到konva-id，但没有设置HTML-id。

【问题讨论】：

使用当前的 API，您不能直接将 id 设置为 canvas 元素。为什么需要它？
我想隐藏一些基于视口宽度的图层，并且为了清晰起见，我想将所有响应式的东西放在一个地方。我想我可以使用 css :nth-of-type() 选择器，但是添加越来越多的图像会变得非常混乱。

标签： reactjs html5-canvas konvajs react-konva konvajs-reactjs

【解决方案1】：

最好使用尽可能少的层数。所以我不建议在你的应用中使用很多。

没有 Konva API 为图层的画布元素设置 id。但您可以手动执行此操作：

const App = () => {
  const layerRef = React.useRef(null);
  React.useEffect(() => {
    layerRef.current.getCanvas()._canvas.id = 'some-id';
  }, []);

  return (
    <Stage width={600} height={600}>
      <Layer ref={layerRef}>
        <DesktopTea1/>
      </Layer>
    </Stage>
  );
}

如果你不打算使用太多层 css :nth-of-type() 可能工作得很好。

【讨论】：

太棒了！ layerRef.current.getCanvas()._canvas.id = 'some-id'; 解决了我的问题！非常感谢！