Dibuja una ruta curva en Canvas?

Question

¿Cómo podría trazar una curva cuadrática o una curva trigonométrica (como sin(x)) en un Canvas?

Answer 1

mayoría de las API de dibujo no proporcionan tales funciones, se tendrá que calcular los píxeles de la curva deseada en píxeles y dibujar pieza por pieza en el lienzo con una o más llamadas a la API de canvas.

Answer 2

voy a suponer que usted está familiarizado con el trazado de líneas básicas en un lienzo, si no, entonces responder de nuevo y podemos profundizar más atrás. Sin embargo, en cuanto a dibujar una función sinusoidal, hay una función dentro de la clase Math que tiene justo lo que necesita. http://download.oracle.com/javase/1.4.2/docs/api/java/lang/Math.html#sin%28double%29 A partir de ahí sólo tiene que pasar la variable x (en radianes) en la función y guardar su salida como una variable y. Esto representa un punto en tu gráfica. Ahora incremente la variable x1 en una pequeña cantidad (tal vez 1/100 de su gráfica, aunque necesitará ajustar esto para probarla), ejecútela nuevamente a través de la función y guarde esas variables (x2 e y2) como su segundo punto. Dibuja una línea entre estos dos puntos. Guarde sus variables x2, y2 como x1, y1 e incremente su valor de x nuevamente para encontrar el tercer punto, y así sucesivamente. Esta no es una curva "verdadera", ya que en realidad es solo una serie de líneas que se aproximan a la función, un enfoque de cálculo si se quiere.

Así:

x1 = x; // donde x es un punto en el eje x en el que te gustaría empezar a graficar.

y1 = sin (x);

x2 = x1 + incremento;

y2 = sin (x2);

// Dibujar una línea aquí

x1 = x2; y1 = y2;

// volver al principio, este código estaría obviamente en un bucle en el que se usa el incremento como su propio incremento, siendo el valor inicial igual a la cantidad que desea incrementar cada vez (digamos ... 5) y la instrucción "siguiente" es increment = increment + 5.

También hay una clase GraphCanvas con la que no estoy familiarizado, que parece tomar esos mismos puntos y dibujar la curva entre ellos, aunque no estoy seguro de qué tipo de transformación se está utilizando para dibujar la curva y qué tan precisa es. Aquí está la clase: http://www.java2s.com/Code/Java/Swing-Components/GraphCanvas.htm

Answer 3

Utilice Canvas.drawPath y Path.quadTo.

Answer 4

Aquí es un método drawEquation() que escribí para una clase Gráfico - Creo que puede ayudar. La idea básica para crear un método que acepta una ecuación (que es básicamente una función) como

function(x) = Math.sin(x); 

y luego bucle a través de los límites del gráfico y señala a pequeños segmentos que conectan cada punto. El transformContext() simplemente invierte el contexto de la lona para que los valores crecientes de y van hacia arriba y no hacia abajo:

Graph.prototype.transformContext = function(){ 
    var canvas = this.canvas; 
    var context = this.context; 

    // move context to center of canvas 
    this.context.translate(this.centerX, this.centerY); 

    // stretch grid to fit the canvas window, and 
    // invert the y scale so that that increments 
    // as you move upwards 
    context.scale(this.scaleX, -this.scaleY); 
}; 

Graph.prototype.drawEquation = function(equation, color, thickness){ 
    var canvas = this.canvas; 
    var context = this.context; 

    context.save(); 
    this.transformContext(); 

    context.beginPath(); 
    context.moveTo(this.minX, equation(this.minX)); 

    for (var x = this.minX + this.iteration; x <= this.maxX; x += this.iteration) { 
     context.lineTo(x, equation(x)); 
    } 

    context.restore(); 
    context.lineJoin = "round"; 
    context.lineWidth = thickness; 
    context.strokeStyle = color; 
    context.stroke(); 

}; 

Answer 5

Al igual que usted, que tenía que dibujar una línea curva desde point(x1, y1) a point (x2, y2). Hice algunas búsquedas que me llevan a la clase Path (android.graphics.Path). Path tiene numerosos métodos para dibujar líneas.Una vez que haya creado una ruta, use un método de dibujo para hacer la línea real. Las rutas se pueden rotar, transformar, guardar y agregar a. También hay arcos, círculos y rectángulos que se dibujan con esta clase.

http://developer.android.com/reference/android/graphics/Path.html

Conjunto punto de inicio de la ruta camino → mPath.moveTo(x1, y1);

Establecer puntos constantes y final → mPath.quadTo(cx, cy, x2, y2);

Convertir a línea → canvas.drawPath(mPath, mPaint);