我需要从线段中绘制一个三角形 - 如何找到中心点？

Question

在我的javascript应用程序中，我有一个线段 - 基本上，画布上有两个已知点。我需要从那些最大直线是两点并且两条匹配线从中心点到边缘的点动态绘制一个钝角等腰三角形。

所以我想问题是，如何找到任意两个给定点之间的中心点？

我对javascript很好，而不是数学。对于这个问题，我能找到的每个现实世界的答案都指向一个指南针，但我不确定它是如何转化为代码的？我没有画线，只是没有找到重点。谢谢你的帮助！

Answer 1

让我们更简单地尝试这一点，只需使用线性代数和几何

生成等腰三角形

你要找的点与你已经拥有的两个点是等距的（这就是“等腰”的含义）。因此，它位于the bisector (the line perpendicular to the segment and cutting it in two equal halves)：

drawing of obtuse isosceles triangle http://fr.maths.free.fr/maths/mnr/quat-lec/drtesrem/image59.gif

段[BC]的正交向量u为( -(c.y-b.y), c.x-b.x )，因此形式A = I + t * u的所有点都带有任何标量（即数字），形成B和C等腰三角形。

为了构建这个向量u，我们采用[BC]段的方向，由B到C的向量(c.x-b.x, c.y-b.y)给出，我们知道对于任何向量{{1} }，向量(x,y)与它垂直：尝试它们之间的标量积。

(-y,x)的坐标是微不足道的：B和C I

的平均值（实际上是重心）

'ob

为了使角度为钝角，距离( (b.x + c.x)/2, (b.y + c.y)/2 )和AB（相同）必须小于A角度为90°的值。 / p>

当A中的角度为90°时，我们必须查看AIC三角形。它在A角的角度为90°/ 2 = 45°，由于其在I角的角度为90°，三角形的角度总和为180°，因此AIC在C角的角度也为45°。两个相等的角度，如两个相等的边，是等腰三角形的特征。

因此，AC和AI = IC后，IC = BC / 2的限制值为AI。

现在我们必须选择BC / 2 t ，其中AI < BC / 2。

让我们记住，我们没有为AI = abs(t) * |u|采用标准化向量，所以 u， 我们还有|u| = sqrt( (-c.y+b.y)^2 + (c.x-b.x)^2 )，因此BC = sqrt( (b.x-c.x)^2 + (c.y-b.y)^2 )。

因此我们可以得出结论|u| = BC。

最终算法：尽可能简单

• 在abs(t) < BC / (2 * |u|) = 1/2或t之间选择[-0.5,0]，不包括在内。
• [0,0.5]
• a.x = (b.x-c.x)/2 - t*(c.y-b.y)

最后，不仅仅是，尝试一下：

a.y = (b.y+c.y)/2 + t*(c.x-b.x)

function draw()
{
    var t = parseFloat(document.getElementById('t').value);
      
    a.x = (b.x+c.x)/2 - t*(c.y-b.y);
    a.y = (b.y+c.y)/2 + t* (c.x-b.x);

    // end of the math, do the drawing
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(a.x,a.y);
    ctx.lineTo(b.x,b.y);
    ctx.lineTo(c.x,c.y);
    ctx.closePath();
    ctx.stroke();
}

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var b = {x:420, y:190}, c = {x:50, y:160}, a = {x:0, y:0};

ctx.fillRect(b.x,b.y,2,2);
ctx.fillRect(c.x,c.y,2,2);

document.getElementById('t').onchange = draw;
draw();

Answer 2

在大多数情况下，在2D坐标中工作时，这都可以用基本代数完成。您需要确定原始线的中心点和斜率，并从这两条信息中轻松绘制垂直点。

找到中心点

要找到两点之间的中心点，您应该能够得到相应的x和y坐标之间的差值并除以2，然后将其添加到起始值：

function getCenterPoint(a, b) {
    return { x: (b.x - a.x) / 2 + a.x, y: (b.y - a.y) / 2 + a.y }; 
}

var p1 = { x: 10, y: 10 }
var p2 = { x: 90, y: 40 }
var center = getCenterPoint(pt1, pt2); // { x: 50, y: 25 }

找到斜率

你可以通过它运行的线的斜率：

function getSlope(a, b) {
    return (b.y - a.y) / (b.x - a.x);
}

var slope = getSlope(p1, p2);

要获得垂直斜率，你可以否定它并将其反转：

var perpendicularSlope = -(1 / slope);

使用斜率绘制点

您现在可以绘制垂直于中心点的线上的任意点。在您的示例中，要使用高于线的x值，要使用小于中心点的x值，要使用大于中心点的x值，要低于线。要确定y值，请将斜率乘以x值。

var pAbove = { x: center.x - 10, y: (center.x - 10) * perpendicularSlope };
var pBelow = { x: center.x + 10, y: (center.x + 10) * perpendicularSlope };