根据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)));