¿Cómo renderizar una ruta sin problemas dado un conjunto de puntos de datos?

Question

He estado desconcertando la renderización de caminos durante los últimos días sin ninguna solución real.

Por representación de camino quiero decir dado un conjunto de puntos de datos x, y (a distancia variable) dibujar una línea punteada (o en mi caso un cuadrante rotado) de longitud fija a intervalos regulares entre los puntos de configuración de datos crea un camino suave.

Si tiene control de vuelo para el iPhone, estoy tratando de crear un efecto similar a la representación de ruta en ese juego.

Aquí está mi problema. Si el ancho del gráfico + el espacio no es exactamente la distancia entre los dos puntos del conjunto de datos, entonces me queda con una superposición o una superposición. Mi única solución para esto es

1) Tome el punto de superposición/solapamiento para que sea el punto final del siguiente punto de ajuste de datos y luego dibuje desde allí hasta el siguiente punto.

2) Dejar correr siempre bajo el criterio de valoración final y empezar un nuevo máximo desde el siguiente punto de datos.

Ninguna de estas soluciones es ideal y ambas tienen problemas.

¿Alguien tiene una mejor solución?

Cualquier ayuda sería muy apreciada.

La siguiente pantalla ilustra lo que estoy tratando de crear: http://www.firemint.com/flightcontrol/screenshots-peaceful.html

El gruesa línea de puntos.

Actualización:

Hola he intentado darlo por vía curvas, calculé una curva cúbica (a través de 4 puntos de control). Sin embargo, el problema es uno de interpolación. Dado 0 y 1 puedo pasar por 2 puntos. Sin embargo, quiero pasar por la ruta completa (puntos de control múltiples). El problema es que algunos puntos de control estarán separados por una distancia diferente y, por lo tanto, avanzar de manera constante a un incremento escalonado (digamos 0.2) producirá resultados irregulares. Me doy cuenta de que para pasar correctamente por todo el camino necesitaría calcular la longitud de toda la curva ... la pregunta es ¿cómo hago eso? ... ¿O hay otra manera?

Saludos ricos

Answer 1

¿Estás completamente restringidos a los quads de tamaño fijo? La solución ideal es truncar el último quad al tamaño correcto.

Si usted está restringido, se puede hacer un par de cosas. Si dibuja líneas punteadas, puede variar la distancia de los guiones para asegurarse de que nunca termine con cuadrículas parciales en los puntos finales. Esto podría distraer visualmente ya que la distancia se ajustaría en función de la longitud del segmento.

editar:

Ah, la imagen ayuda. Supongo que, como está en el iPhone, obtendrás una serie de puntos a partir de los cuales dibujar líneas entre ellos produce una curva aceptable. Si este es el caso usando splines/primitivos de curva es probablemente exagerado. Probablemente me acerque a dibujar líneas como se muestra simplemente dibujando quads en cada punto de datos que está a una distancia determinada del último punto de datos.

El algoritmo sería algo así como:

1. Dibuje quad en el primer punto de datos (girar apropiadamente)
2. Traverse la lista de puntos hasta que esté al menos distancia X desde el último punto
3. Pasa entre el punto actual y el último punto visitado para encontrar el centro exacto para colocar el siguiente quad.
4. dibujar el cuádruple (girar apropiadamente)
5. Ir al paso 2
6. Si usted tiene un punto parcial para el último quad dibujarlo como normales (esto le dará una mejor visual de truncarla).

Para la diversión, a Lerp entre dos puntos por una cierta distancia D que es menor que la distancia entre los dos puntos (esto es probablemente más sencillo en el caso 2D, pero me gustaría trabajar en general):

vector v = point2 - point1; 
normalize(v); 
v *= D; 
finalPoint = point1 + v; 

Answer 2

Es posible que desee echar un vistazo a Bezier curves o hermite curves que no son tan difíciles de calcular y obtiene curvas agradables y suaves.

Answer 3

Probablemente deberías consultar los algoritmos Bézier curves y Splines.

Answer 4

Hay una función de CoreGraphics llamada "CGPathAddQuadCurveToPoint" que se utiliza para dibujar rutas uniformes. An example on how to use it is on GitHub.