¿Cómo puedo obtener 4 puntos girados un cierto grado alrededor de un puntero para formar un rectángulo? Puedo rotar un punto alrededor de un punto, pero no puedo compensarlo para hacer un rectángulo que no esté distorsionado.Girar el rectángulo alrededor de un punto
Respuesta
Si puede rotar un punto alrededor de un punto, entonces debería ser fácil rotar un rectángulo; solo debe rotar 4 puntos.
Aquí es una función js para girar alrededor de un punto de origen:
function rotate_point(pointX, pointY, originX, originY, angle) {
angle = angle * Math.PI/180.0;
return {
x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
};
}
y entonces usted puede hacer esto para cada punto. Aquí se muestra un ejemplo: http://jsfiddle.net/dahousecat/4TtvU/
Cambiar el ángulo y correr golpear a ver el resultado ...
¿Puedes explicar esto? jsfiddle.net/bjhc34xk/7 ¿Tiene esto algo que ver con la aproximación de PI, o quizás errores matemáticos de punto flotante? –
El violín de Félix se bifurcó para incluir un control deslizante para la entrada dinámica para que sea más fácil experimentar: https://jsfiddle.net/brichins/0ccdd362/ – brichins
@MaxMastalerz Estoy seguro de que ya pasó de esto, pero su violín es probablemente no haciendo lo que pensaste Está cambiando la coordenada X de su punto final, en el medio del cálculo, y luego girando la coordenada Y desde ese punto de desplazamiento en lugar del centro. Los resultados en una espiral de oro fresco, pero creo que tenía la intención de hacer esto: https://jsfiddle.net/brichins/w2rxsbt4/ – brichins
- 1. OpenGL girar alrededor de un punto
- 2. Trigonometría adecuada para girar un punto alrededor del origen
- 3. C++/OpenGL - Girar un rectángulo
- 4. Rotar punto en el rectángulo
- 5. ¿Girar un rectángulo de Java Graphics2D?
- 6. Gire el rectángulo alrededor de su centro
- 7. ¿Girar imágenes alrededor de un círculo?
- 8. Girando alrededor de un punto arbitrario: HTML5 Canvas
- 9. WPF Girar animación de rectángulo en XAML
- 10. ¿Cómo rotar un vértice alrededor de un cierto punto?
- 11. Gire un punto alrededor de un punto con OpenCV
- 12. Girar un punto por otro punto en 2D
- 13. ¿Cómo dibuja Qt un borde alrededor de un rectángulo?
- 14. cómo rotar alrededor de un punto especificado en fabric.js?
- 15. ¿Cómo girar un icono de Android en su punto central?
- 16. ¿Cómo rotar el objeto alrededor de un punto usando cuaterniones?
- 17. eliminar el rectángulo rojo alrededor del cuadro combinado
- 18. CGAffineTransformMakeRotation alrededor del punto externo
- 19. Rotación de un objeto alrededor de un vector central punto
- 20. girar una UIView alrededor de su centro, sino varias veces
- 21. dibujando un círculo de radio R alrededor de un punto
- 22. Matplotlib: hacer girar un parche
- 23. imageview girar alrededor de su centro sin cortar los bordes
- 24. three.js - ¿cómo giro un cilindro alrededor de un punto específico?
- 25. Comprobar si un punto está en un rectángulo girado (C#)
- 26. núcleo gráfico giran rectángulo
- 27. Coordenadas GPS: 1km cuadrados alrededor de un punto
- 28. Prueba si el punto está en algún rectángulo
- 29. Dibujando rectángulo alrededor del objeto detectado usando SURF
- 30. Encaja un rectángulo alrededor de una cadena en un lienzo de Android
que han tratado de hacer hasta ahora? algún código? gracias – Trufa
Traduce tus cuatro puntos para que trates el puntero como el centro, haz la rotación mediante el método de la matriz de rotación estándar y luego traduce los puntos hacia atrás. [Explicación aquí] (http://www.euclideanspace.com/maths/geometry/affine/aroundPoint/index.htm) – Michal
Si entendí que lo usaría, pero necesito una solución en inglés simple o preferiblemente JavaScript. – Anonymous