如何从3个坐标中获取矩形的4个坐标？

Question

我想创建一个允许用户从3个点（蓝色点）绘制矩形的函数：

• 前两个点将形成一个边（宽度）。
• 第三点将确定高度。

我需要在传单中使用此自定义绘制功能，但是，传单的默认矩形是使用2个对角点创建的：https://leafletjs.com/reference-1.5.0.html#rectangle。

我需要计算其中一个绿点，但是我的小脑袋似乎无法弄清楚：P

PS /编辑：矩形可能成一定角度，这就是使其具有挑战性的原因

Answer 1

  

传单的默认矩形是用2个对角线点创建的

     

[...]

     

矩形可能是倾斜的，这就是使其具有挑战性的原因

请注意，Leaflet的L.Rectangle是由L.LatLngBounds（边界框，其中边与坐标网格隐式对齐）创建的。不要使用边界框，而要依靠L.Polygon来提供所有四个点。

---

让A和B是矩形底部的点，而C是顶部的点。假设所有点都是{x: Number, y: Number}形式的Javascript结构，并假设您正在欧几里德平面内工作（即不在大地水准面上），

首先，calculate the distance from a point to a line defined by the other two points，即从C到AB定义的线的距离。使其为distance（请注意，它等于图表中的“高度”）：

var distance = Math.abs( 
    (A.y - B.y) * C.x  -  (A.x - B-x) * C.y  +  B.x * A.y  -  B.y * A.x ) 
  ) / Math.sqrt(
    Math.pow(B.y - A.y, 2) + Math.pow(B.x - A.x, 2)
  );

然后，让AB为从A到B的向量

var AB = {  x: B.x - A.x,   y: B.y - A.y };

（请注意，图中AB的长度等于“宽度”）

计算垂直于AB的unit vector：

var perpendicular = {x: -AB.y, y: AB.x}
var perpendicularSize = Math.sqrt(AB.x * AB.x + AB.y * AB.y);
var unit = {x: perpendicular.x / perpendicularSize, y: perpendicular.y / perpendicularSize};

将该单位矢量乘以C到AB的距离，即可得出矩形“边”的矢量：

var sideVector = { x: unit.x * distance, y: unit.y * distance };

...并通过将矩形的边的向量偏移A和B来创建新点D和E：

var D = { x: A.x + sideVector.x, y: A.y + sideVector.y };
var E = { x: B.x + sideVector.x, y: B.y + sideVector.y };

...并且您的矩形现在由ABDE点定义。请注意，C在由点DE定义的线中。

Answer 2

假设提供了这三个点的坐标， -2、5（第一点） -5、5（第二点） -x，8（第三点）

第一个绿色将从前两个点之一取x，比方说从第一个点取== 2，从第三个点取y = = 8 所以第一个绿点是2,8

第二个从第二个点开始取x => 5，从第三个点取y = = 8 所以第二个绿点是5,8

我不确定我是否正确理解答案。

Answer 3

假设edge1 = [x1，y1]    ，edge2 = [x2，y2]

def calculate_edges (edge1,edge2,height)
    edge3 [0] = edge1[0]          //x3
    edge3 [1] = edge1[1] + height //y3
    edge4 [0] = edge2[0]          //x4
    edge4 [1] = edge2[1] + height //y4
return edge3,edge4

Answer 4

对于Python：

getEquipmentByTagCode(equipTag,projCode){
    console.log("Equipment Param"+equipTag+projCode);
    return this.database.executeSql('SELECT * FROM equipmentInstall WHERE equipTag="'+equipTag+'" AND projCode="'+projCode+'" ', []); 
  }