[英]How to draw a triangle given two points using an html canvas and typescript
I am sure I have missed something obvious, but I am trying to draw a quadratic curve between two points using an html canvas, for which I need a 'control point' to set the curve.我确定我错过了一些明显的东西,但我正在尝试使用 html 画布在两点之间绘制二次曲线,为此我需要一个“控制点”来设置曲线。 The start and end point of the curve are known, the control point is unknown because the lines are dynamically rotated.
曲线的起点和终点已知,控制点未知,因为线条是动态旋转的。 I just need to find this third point of the triangle in order to set the control point
我只需要找到三角形的第三个点即可设置控制点
I use this function to find the mid point of the line:我使用这个函数来找到线的中点:
lineMidPoint(p: Point, q: Point): Point {
let x = (p.x + q.x) / 2;
let y = (p.y + q.y) / 2;
return { x: x, y: y } as Point;
}
This function works as expected.此功能按预期工作。
Then a second function to get the angle of the line relative to the origin:然后是第二个函数来获取线相对于原点的角度:
getAngleRelativeToOrigin(start: Point, end: Point): number {
let dx = start.x - end.x;
let dy = start.y - end.y;
let radians = Math.atan2(dy, dx);
return radians * (180/Math.PI);
}
It is hard to verify that this function is working.很难验证此功能是否有效。
Then finally I have a function for rotating the midpoint around either the start or the end of the line in order to find the control point:最后我有一个函数可以围绕线的起点或终点旋转中点以找到控制点:
getControlPoint(start: Point, end: Point): Point {
let midPoint = this.lineMidPoint(start, end);
let offset = 45 * (Math.PI / 180);
let theta = this.getAngleRelativeToOrigin(start, end) + offset;
let x = Math.cos(theta) * (start.x - midPoint.x) - Math.sin(theta) * (start.y - midPoint.y) + midPoint.x;
let y = Math.sin(theta) * (start.x - midPoint.x) - Math.cos(theta) * (start.y - midPoint.y) + midPoint.y;
return { x: x, y: y } as Point;
}
The result is this:结果是这样的:
Those lines that are not connected to circles (for instance on the far right) should all be the length of the line they start from / 2, but they are clearly inconsistent.那些没有连接到圆圈的线(例如最右边的)应该都是它们开始的线的长度/ 2,但它们显然不一致。
When I draw the quadratic curves they are all wonky:当我绘制二次曲线时,它们都很不稳定:
Can anyone lend a hand and tell me where Ive gone wrong?任何人都可以伸出援助之手,告诉我哪里出了问题吗?
OK, your middle point is correct.好的,你的中间点是正确的。 Now determine difference vector and perpendicular to the line
现在确定差向量和垂直于线
let dx = start.x - end.x;
let dy = start.y - end.y;
let leng = Math.hypot(dx, dy);
let px = - dy / leng; //and get perpendicular unit vector
let py = dx / leng;
I am not sure what logic you wanted to implement, so I propose to get control point at distance d
from line middle (so curve is symmetrical)我不确定你想实现什么逻辑,所以我建议在距离线中间
d
处获得控制点(所以曲线是对称的)
let xxx = midPoint.x + d * px;
let yyy = midPoint.y + d * py;
If you want to rotate middle point about start
point, it might be done using the next approach:如果您想围绕
start
旋转中间点,可以使用下一种方法来完成:
let cost = Math.cos(45 * (Math.PI / 180));
let sint = Math.sin(45 * (Math.PI / 180));
let x = start.x + 0.5 * dx * cost - 0.5 * dy * sint;
let y = start.y + 0.5 * dx * sint + 0.5 * dy * cost;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.