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

Question

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

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

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

这就是我要的：


目前就是这样


这是我目前在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%;
}

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

Answer 1

您可以使用引导网格，请检查以下链接

grid