填充墙壁之间的空间（单独的div）

Question

我正在使用jQuery中的一个roomplanner。用户可以拖动墙壁（每个墙壁都是一个单独的div）并将家具拖入房间。看一下屏幕截图：

您在墙壁之间看到的半透明白色div实际上是2个div，如果用户拖动墙壁，则会改变大小和位置。另一个截图：

这有效，但让我对其他形状（U形）感到头疼。是否有一种简单的方法可以填满所有墙壁之间的空间？

我试图用SVG和Canvas绘制，但是将墙壁位置转换为线条和形状并不容易。

var svg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">';
svg+= '<path style="fill:#f00;" d="M 105,0 L 220,0 L 220,120 L 195,120 L 195,40 L 130,40 L 130,120 L 10,120 L 10,0 z" />';
svg+= '</svg>';

$('#floor').prepend(svg);

我的所有职位都是这样的：

var wallX = parseFloat($('.wall').css('left').replace('px',''));
var wallY = parseFloat($('.wall').css('top').replace('px',''));
var wallX2 = parseFloat($('.wall').css('left').replace('px',''))+parseFloat($('.wall').css('width').replace('px',''));
var wallY2 = parseFloat($('.wall').css('top').replace('px',''))+parseFloat($('.wall').css('height').replace('px',''));