javascript - 我需要从线段绘制三 Angular 形 - 如何找到中心点？

Question

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

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

我对 javascript 没问题，但对数学不太满意。对于这个问题，我能找到的每个现实世界的答案都提到了一个指南针，但我不确定它是如何转化为代码的？我可以画线，只是找不到重点。感谢您的帮助!

Answer 1

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

生成等腰三 Angular 形

您正在寻找的点与您已有的两个点等距(这就是“等腰”的意思)。因此它在 the bisector (the line perpendicular to the segment and cutting it in two equal halves) 上:

_{(来源:free.fr)}

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

要构建此向量 u ，我们采用 [BC] 段的方向，由从 B 到 C 的向量给出，(c.x-b.x, c.y-b.y) ，我们知道对于任何向量 (x,y) , 矢量 (-y,x)垂直于它:尝试它们之间的标量积。

I的坐标微不足道:B 和 C 的平均值(重心，真的)( (b.x + c.x)/2, (b.y + c.y)/2 )

让他们变钝

为了使 Angular 变钝，距离 AB和 AC (相同)必须小于 A 处的 Angular 为 90° 的值。

当A中的 Angular 为90°时，我们要看AIC三 Angular 形。它在 A 中的 Angular 是 90°/2=45°，因为它在 I 中的 Angular 是 90°，三 Angular 形内 Angular 的总和总是 180°，所以 AIC 在 C 中的 Angular 也是 45°。两个相等的 Angular 就像两条相等的边一样，是等腰三 Angular 形的特征。

因此，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();

<p>t=<input type="text" id ="t" value="0.2" /></p>
<canvas id="c" width="500" height="300" />