如何使用 HTML Canvas 通过连接三个坐标位于等边三角形的三个边上来查找坐标

Question

假设我有一个等边三角形 abc，它具有三个坐标 A(40,60)、B(70,30)、C(50,80)，如图所示。 Triangle with it's Coordinates

我想找到一个与所有点相交的坐标，让这个坐标为 D(x,y) 如图： Intersected Coordinate D with other Coordinates

假设AD平行于bc，BD平行于ab，DC平行于ac。请帮忙找坐标D。 到目前为止，我能够使用 HTML 画布定位三角形上的三个点，但无法连接所有坐标以形成 D 坐标。 所有坐标都是像素值。 制作三角形：

var v0={x:114,y:366};
var v1={x:306,y:30};
var v2={x:498,y:366};
var triangle=[v0,v1,v2];
drawTriangle(triangle);

function drawTriangle(t){
ctx.beginPath();
ctx.moveTo(t[0].x,t[0].y);
ctx.lineTo(t[1].x,t[1].y);
ctx.lineTo(t[2].x,t[2].y);
ctx.closePath();
ctx.strokeStyle='black';
ctx.lineWidth=2;
ctx.stroke();
}

在三角形上绘制坐标的函数。 x,y 坐标是随机取的。

function drawCoordinates(x,y){
ctx.fillStyle = "red"; // Red color
ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
//For Drwaing Cords
//drawCords(x,y);
}

有没有办法通过满足这个平行条件来连接这三个点形成D。请帮忙。如果您需要任何进一步的说明，也请提出建议，我是这种 HTML 画布技术的新手。

Answer 1

逻辑有点不同：

1. 我画了三角形
2. 我用三角形的两条边画了两条平行线
3. 我计算点以绘制与三角形第三条边平行的第三条线。

如果您知道 3 条线的点，则只需计算其中 2 条的交点。

计算我使用的交叉点http://paulbourke.net/geometry/pointlineplane/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 600;
var ch = canvas.height = 400;



// triangle
var v0={x:114,y:366};
var v1={x:306,y:30};
var v2={x:498,y:366};


ctx.beginPath();
ctx.moveTo(v0.x,v0.y);
ctx.lineTo(v1.x,v1.y);
ctx.lineTo(v2.x,v2.y);
ctx.closePath();
ctx.stroke();

//lines
var p1 = {x:40,y:300};
var p2 = {x:500,y:300};
var p3 = {x:356,y:30};
var p4 = {x:164,y:366};

// draw the first 2 lines
drawLine(p1,p2);
drawLine(p3,p4);



// find the intersection between the 2 lines

function Intersect(p1,p2,p3,p4){
  var denominator = (p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y);
  var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x))/denominator;
  var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x))/denominator;
  var x = p1.x + ua*(p2.x - p1.x);
  var y = p1.y + ua*(p2.y - p1.y);
  if(ua > 0 && ua < 1 && ub > 0  && ub < 1){
  return {x:x,y:y};
  }else{return false;}
}

var o = Intersect(p1,p2,p3,p4);

// draw the point of intersection
  if(o){  
  ctx.beginPath();
  ctx.arc(o.x, o.y,3,0,2*Math.PI);
  ctx.stroke();
  }


// calculate the position of the 3-rd line
var p5 = {x:o.x+100/Math.tan(Math.PI/3),y:o.y+100};
var p6 = {x:o.x-100/Math.tan(Math.PI/3),y:o.y-100}

drawLine(p5,p6);

function drawLine(p1,p2){
ctx.beginPath();
ctx.moveTo(p1.x,p1.y);
ctx.lineTo(p2.x,p2.y);
ctx.stroke();
}

<canvas id="canvas"></canvas>

Answer 2

我也得到了一个答案，如果我在等边三角形的一侧有任何点，我们可以使用 (x+lcos(@),y+l sin(@)) 然后我们得到两条线，使用两条线的终点坐标可以通过求解简单的线方程找到交点，然后连接所有三个点，即 A(40,60), B (70,30), C(50,80) 与交点 D(X,Y)。为了找到交叉点，我使用了这个函数：

function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) {
// if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contains the point
var denominator, a, b, numerator1, numerator2, result = {
  x: null,
  y: null,
  onLine1: false,
  onLine2: false
};
denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY));
if (denominator == 0) {
  return result;
}
a = line1StartY - line2StartY;
b = line1StartX - line2StartX;
numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b);
numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b);
a = numerator1 / denominator;
b = numerator2 / denominator;

// if we cast these lines infinitely in both directions, they intersect here:
result.x = line1StartX + (a * (line1EndX - line1StartX));
result.y = line1StartY + (a * (line1EndY - line1StartY));
/*
        // it is worth noting that this should be the same as:
        x = line2StartX + (b * (line2EndX - line2StartX));
        y = line2StartX + (b * (line2EndY - line2StartY));
        */
// if line1 is a segment and line2 is infinite, they intersect if:
if (a > 0 && a < 1) {
  result.onLine1 = true;
}
// if line2 is a segment and line1 is infinite, they intersect if:
if (b > 0 && b < 1) {
  result.onLine2 = true;
}
// if line1 and line2 are segments, they intersect if both of the above are true
return result;

}

结果包含 x,y 坐标，因此使用 drawCoordinates(x,y) 函数我可以绘制生成的三角形。 这解决了我的问题。感谢您的所有反馈和帮助。