根據x和y坐標以及javascript中的寬度和高度值計算面積

Question

我一直在嘗試自己解決這個問題，但沒有成功。

我有一個對象代表一個矩形，它的位置（x，y）及其大小（寬度和高度）。

我有2個列表，兩個列表都包含前面提到的對象，一個列表表示正區域，另一個列表表示負區域。

根據此信息，如果我們將肯定列表和否定列表中的所有元素加在一起，則需要獲得結果的總面積。 如果總面積是矩形，我只對結果感興趣，否則對我來說無關緊要。

例如：如果肯定列表包含這2個對象

{x：20，y：20，寬度：100，高度：20} {x：20，y：40，寬度：80，高度：80}

否定列表包含此對象

{x：100，y：20，寬度：20，高度：20}

添加這三個對象的結果將是：

{x：20，y：20，寬度：80，高度：100}

此圖顯示了這2個列表中的3個對象的圖形表示形式和結果。

感謝您能提供的任何幫助。

編輯：我對3個對象之一進行了較小的校正，並且我使用的坐標系是具有反向y軸的直角坐標系（如下圖所示）

Answer 1

這不是一個簡單的問題，更多的是算法問題，而不是JavaScript問題。

這適用於您的示例。

 var pos = [{x:20, y:20, width:100, height:20}, {x:20, y:40, width:80, height:80}]; var neg = [{x:100, y:20, width:20, height:20}]; // Fixed it x: 80 -> x: 100 // Create one single array of rectangles and add an attribute indicating if // a rectangle is neg or pos var rects = pos.map(function(o){ return Object.assign({pos: true}, o); }).concat(neg.map(function(o){ return Object.assign({pos: false}, o); })); // Combine two rectangles. function combine2Rects(r1, r2, maintainOrder){ // width addition if(r1.pos && r2.pos && r1.x === r2.x && r1.width === r2.width && r2.y === r1.y + r1.height){ return Object.assign({}, r1, { height: r1.height + r2.height }); // Height addition } else if(r1.pos && r2.pos && r1.y === r2.y && r2.x === r1.x + r1.width && r1.height === r2.height) { return Object.assign({}, r1, { width: r1.width + r2.width }); // Height bottom subtraction } else if(r1.pos && !r2.pos && r1.x === r2.x && r1.width === r2.width && r2.y === r1.y + r1.height - r2.height && r1.height - r2.height > 0){ return Object.assign({}, r1, { height: r1.height - r2.height }); // Height top subtraction } else if(r1.pos && !r2.pos && r1.x === r2.x && r1.width === r2.width && r2.y === r1.y && r1.height > r2.height){ return Object.assign({}, r1, { height: r1.height - r2.height, y: r1.y + r2.height }); // Width right subtraction } else if(r1.pos && !r2.pos && r1.y === r2.y && r1.height === r2.height && r2.x === r1.x + r1.width - r2.width && r1.width - r2.width > 0){ return Object.assign({}, r1, { width: r1.width - r2.width }); // Width left subtraction } else if(r1.pos && !r2.pos && r1.y === r2.y && r1.height === r2.height && r2.x === r1.x && r2.width < r1.width){ return Object.assign({}, r1, { x: r1.x + r2.width, width: r1.width - r2.width }); // If two negative rectangle, treat them as pos then invert them again. } else if(!r1.pos && !r2.pos){ var invertedResult = combine2Rects( Object.assign({}, r1, { pos: true }), Object.assign({}, r2, { pos: true }), maintainOrder ); if(invertedResult){ invertedResult.pos = false; return invertedResult; } // try with r2 at the place of r1 and vice-versa } else if(!maintainOrder){ return combine2Rects(r2, r1, true); } } function combineRects(rects){ var lastN = 0; var result = rects.slice(); // While we still made at least one combination debugger while(result.length !== lastN){ lastN = result.length; // For each rectangle in the list for(var i=0; i<result.length; i++){ var r1 = result[i]; // Try to combine it with one of the following rectangles in the list for(var j=i+1; j<result.length; j++){ var r2 = result[j]; var c = combine2Rects(r1, r2); if(c){ // replace the combined rectangle by the combination result[i] = c; // and remove the rectangle it has been combined with result.splice(j, 1); break; } } } } return result; } document.write(JSON.stringify(combineRects(rects)));