私は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',''));