Question

我在项目中使用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的任何内容。

Answer 1

最好使用尽可能少的层数。因此，我不建议在您的应用程序中使用很多。

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

private Type _type = new Type();
public string Name
{
    get { return _type.Name; }
    set { _type.Name = value; OnPropertyChanged(); }
}

如果您不打算使用太多的层，css 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> ); }可能就可以了。

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

1 个答案: