Símbolos y fórmulas
símbolo | significado |
---|---|
α |
ángulo |
rad |
radián |
k |
pendiente |
X | La coordenada x del punto |
y | La coordenada y del punto |
- La fórmula para la relación entre ángulos y radianes:
α=(rad*180)/π
- pendiente en línea recta
k=(y2-y1)/(x2-x1)
- tangente
tan(α)=|k₁-k₂/(1+k₁k₂)|
función tangente inversa
Independientemente de calcular ángulos o radianes, la función tangente es siempre inseparable tanα
En funciones trigonométricas, tangentetanA = a / b= tanθ = y / x
Como typescript
ejemplo, proporcione dos funciones de tangente inversa atan()
y atan2()
el valor en radianes utilizado para devolver el ángulo incluido, y luego obtenga el ángulo.
con el propósito | atan2 | |
---|---|---|
entrando | pendiente k | coordenada y (longitud del lado opuesto) y coordenada x (longitud del lado adyacente) |
rango | (-π/2, π/2) |
(-π, π) |
valor devuelto | valor en radianes | valor en radianes |
Después de entender la fórmula y comparar las dos funciones tangentes inversas, podemos concluir:
- En la escena real,
atan2
está más en línea con la demanda y el cálculo es más conveniente - Dos puntos determinan una línea recta. Por lo tanto, se determina de acuerdo con los dos puntos,
x轴正方向夹角
el valor en radianes de la línea recta y el ángulo, y luego se calcula el ángulo. - El ángulo entre dos rectas. Podemos calcular sus valores en radianes por separado
交点的x轴正方向夹角
, y luego restarlos.
combate
Cocos画圆弧
: Tome tres puntos en la pantalla p1,p2,p3
; p1
como el centro del círculo, p1p2
el p1p3
más corto de , como el radio, p1p2
y p1p3
los dos lados del arco.
dealArc() {
if (this._points.length < 3) return;
const ponits = this._points.slice(this._points.length - 3, this._points.length);
//辅助线
this.drawGuideLine(ponits[0], ponits[1]);
this.drawGuideLine(ponits[0], ponits[2]);
//第1个点到第2个点到距离为半径
const r1 = ponits[0].sub(ponits[1]).mag();
//第1个点到第3个点到距离为半径
const r2 = ponits[0].sub(ponits[2]).mag();
//选小的作为半径
const r = r1 > r2 ? r2 : r1;
const sAngle = LineUtils.getXRadian(ponits[0], ponits[1]);
const eAngle = LineUtils.getXRadian(ponits[0], ponits[2]);
CC_DEBUG && cc.log("GraphicsView " + sAngle + " " + eAngle);
CC_DEBUG &&
cc.log(
"GraphicsView " +
LineUtils.getXAngle(ponits[0], ponits[1]) +
" " +
LineUtils.getXAngle(ponits[0], ponits[2])
);
this.drawArc(ponits[0], r, sAngle, eAngle, false);
}
drawArc(
point: cc.Vec2,
r: number,
sAngle: number,
eAngle: number,
counterclockwise: boolean,
lineWidth: number = this.lineWidth,
lineClolor: cc.Color = this.lineClolor
) {
this.graphics.lineWidth = lineWidth;
this.graphics.strokeColor = lineClolor;
this.graphics.arc(point.x, point.y, r, sAngle, eAngle, counterclockwise);
this.graphics.stroke();
}
export namespace LineUtils {
//两个点计算与X轴正方向的夹角
export function getXAngle(point1: cc.Vec2, point2: cc.Vec2) {
//const k = Math.abs((point2.y - point1.y) / (point2.x - point1.x));
const angle = (Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180) / Math.PI;
return angle > 0 ? angle : 360 + angle;
}
//两个点计算与X轴正方向的弧度
export function getXRadian(point1: cc.Vec2, point2: cc.Vec2) {
return (getXAngle(point1, point2) / 180) * Math.PI;
}
}
referencia
https://blog.csdn.net/qq_43413788/article/details/108247240
https://www.jianshu.com/p/7c6a4f3021a1