1

我正在使用 jQuery 开发房间规划器。用户可以拖动墙壁（每面墙壁都是一个单独的 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',''));
4

0 回答 0