javascript - 具有多个画布元素的 ReactJS 组件

Question

我正在尝试使用 ReactJS 和 Typescript 从 WinForm 应用程序重新创建 Web 应用程序。应用程序应将来自相机的图像与一些参考图像进行比较，并输出绝对差异和显着差异图像。

我的想法是让相机内容组件具有 4 个画布元素。我希望这些元素自动调整大小并且不会相互重叠，但我不确定如何实现？

在 WinForm 应用程序中，我使用的是 tablelayoutpanel，一切都很好，但是我不知道在 html 和 css 中什么控件是等效的（没有网络经验 :( ）。

这就是我要的：

这就是目前的情况

这是我目前在 CameraContent 组件下的代码

   render() {

    return (
        <div>

            <div className='label-image-viewer'>                
                <div className="cam1"><caption className="caption"> Cam1 <canvas id="upperLeftCam" /></caption></div>
                <div className="cam2"><caption className="caption"> Cam2 <canvas id="upperRightCam"/></caption></div>
                <div className="cam3"><caption className="caption"> Cam3 <canvas id="bottomLeftCam" /></caption></div>                    
                <div className="cam4"><caption className="caption"> Cam4 <canvas id="bottomRightCam"/></caption></div>
            </div>
        </div>
    )
}

为此的CSS

.label-image-viewer {
    height:100%;   
    width: 100%;
}
.cam1{
    top:30%;
    left:20%;
    position: relative;
    display: inline-block;
    border: 2px solid blue;
}
.cam2{
    top:30%;
    left:50%;
    position: relative;
    display:inline-block;
    border: 2px solid red;
}
.cam3{  
    top: 30%;  
    left: 20%;
    position: relative;
    border: 2px solid green;
    width:18%;
}
.cam4{

    left:68%;
    position: relative;
    border: 2px solid gray;
    width:18%;
}

任何帮助，将不胜感激。谢谢！

标签： javascripthtmlcssreactjs