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 canvas技术的新手。

Answer 1

逻辑有些不同：

我画三角形
我画出两条线的三角形的两边平行线
我计算出与三角形的第三边画第三条直线的点。

如果您知道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 + l cos（@），y + l来找到它在三角形另一侧的平行坐标 sin（@）），然后使用两条线的结束坐标得到两条线，可以通过求解简单的线方程并随后将所有三个点i，e 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）函数可以绘制所得三角形。这解决了我的问题。感谢您的所有反馈和帮助。

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

2 个答案: