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

Question

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

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

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

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();
}

在三 Angular 形上绘制坐标的函数。 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

逻辑有点不同:

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

如果您知道 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>