找到点和圆画布之间的切线 [英] Find tangent between point and circle Canvas
问题描述
确定一些我对我的三角学有点生锈。
Ok some i'm a bit rusty on my trigonometry.
基本上我想在画布上做一个聚光灯。我试图保持一个9度的角度,这就是为什么这有点棘手。这是我的小提琴到目前为止。
Essentially I'm trying to make a sort of spotlight in canvas. I'm trying to maintain a 9 degree angle which is why this is a little tricky. Here's my fiddle so far.
it's a bit long please refer to the fiddle /\
很接近,但我需要圆上的切点,所以我可以在这两点和鼠标之间画一个三角形,所以我看起来像一个很好的光滑梁。
Pretty close, but i need the tangent points on the circle so i can draw a triangle between those two points and the mouse, so i looks like a nice smooth beam.
http:// en。 wikipedia.org/wiki/File:Inscribed_angle_theorem4.svg
以上是我需要实现的图表和公式。我需要点T和S.我希望这有意义。
Above is essentially the diagram and formula i need to implement. I need point T and S. I hope this makes sense.
推荐答案
这是计算切线的代码:
演示
This is the code to calculate tangents: Demo
//Calculate Tangents
var pointDistance = {
x: beamCenter.x - mousePos.x,
y: beamCenter.y - mousePos.y,
length: function () {
return Math.sqrt(this.x * this.x + this.y * this.y)
}
}
var radius = getDist(p1.x, p1.y, p2.x, p2.y) / 2;
//Alpha
var a = Math.asin(radius / pointDistance.length());
//Beta
var b = Math.atan2(pointDistance.y, pointDistance.x);
//Tangent angle
var t = b - a;
//Tangent points
var T1 = {
x: beamCenter.x + radius * Math.sin(t),
y: beamCenter.y + radius * -Math.cos(t)
};
t = b + a;
var T2 = {
x: beamCenter.x + radius * -Math.sin(t),
y: beamCenter.y + radius * Math.cos(t)
}
这篇关于找到点和圆画布之间的切线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!