ejemplos - create canvas javascript

Dibujar texto girado en un lienzo de HTML5

Question

Parte de una aplicación web que estoy desarrollando me obliga a crear gráficos de barras para mostrar información diversa. Pensé que, si el navegador del usuario es capaz, los dibujaría usando el elemento Canvas de HTML5. No tengo problemas dibujando líneas y barras para mis gráficos, pero cuando se trata de etiquetar los ejes, las barras o las líneas, me encontré con un problema. ¿Cómo dibujo texto girado en un elemento canvas para que se alinee con el elemento que está etiquetando? Un par de ejemplos incluyen:

• Gire el texto 90 grados en sentido antihorario para etiquetar el eje y
• Gire el texto 90 grados en sentido antihorario para etiquetar barras en un gráfico de barras verticales
• Girar texto en una cantidad arbitraria para etiquetar líneas en un gráfico de líneas

Cualquier indicador sería apreciada.

Answer 1

Al igual que otros han mencionado, es probable que desee considerar reutilizar una solución gráfica existente, pero rotar el texto no es demasiado difícil. La parte un tanto confusa (para mí) es que se rota todo el contexto y luego se dibuja sobre él:

ctx.rotate(Math.PI*2/(i*6));

El ángulo está en radianes . El código está tomado de este ejemplo , que creo que fue hecho para la parte de transformaciones del tutorial de lienzo de MDC .

Consulte la respuesta a continuación para obtener una solución más completa.

Answer 2

Aquí hay una alternativa HTML5 a homebrew: http://www.rgraph.net/ Es posible que pueda realizar una ingeniería inversa de sus métodos ...

También podría considerar algo como Flot ( code.google.com/p/flot ) o GCharts: ( http://www.maxb.net/scripts/jgcharts/include/demo/#1 ) No es bastante genial, pero totalmente compatible con versiones anteriores y aterrador, fácil de implementar.

Answer 3

Publicar esto en un esfuerzo por ayudar a otros con problemas similares. Resolví este problema con un enfoque de cinco pasos: guardar el contexto, traducir el contexto, rotar el contexto, dibujar el texto y luego restaurar el contexto a su estado guardado.

Pienso en las traducciones y las transformaciones al contexto como la manipulación de la cuadrícula de coordenadas superpuesta en el lienzo. Por defecto, el origen (0,0) comienza en la esquina superior izquierda del lienzo. X aumenta de izquierda a derecha, Y aumenta de arriba a abajo. Si haces una "L" con el dedo índice y el pulgar en tu mano izquierda y la sostienes frente a ti con el pulgar hacia abajo, tu pulgar apuntará en la dirección de aumentar Y y tu dedo índice apuntará en la dirección de aumentar X. Sé que es elemental, pero me parece útil cuando pienso en las traducciones y las rotaciones. Este es el por qué:

Cuando traduce el contexto, mueve el origen de la cuadrícula de coordenadas a una nueva ubicación en el lienzo. Cuando gire el contexto, piense en girar la "L" que hizo con la mano izquierda en el sentido de las agujas del reloj, la cantidad indicada por el ángulo que especifique en radianes sobre el origen. Cuando aplique strokeText o fillText, especifique sus coordenadas en relación con los ejes recién alineados. Para orientar el texto de modo que sea legible de abajo hacia arriba, se traduciría a una posición debajo de donde desea comenzar sus etiquetas, rotará en -90 grados y rellenará o acariciará el texto, desplazando cada etiqueta a lo largo del eje x girado. Algo como esto debería funcionar:

 context.save();
 context.translate(newx, newy);
 context.rotate(-Math.PI/2);
 context.textAlign = "center";
 context.fillText("Your Label Here", labelXposition, 0);
 context.restore();

.restore () restablece el contexto al estado que tenía cuando llamó a .save () - útil para devolver las cosas a "normal".

Answer 4

Si bien esto es una especie de seguimiento a la respuesta anterior, agrega un poco (con suerte).

Principalmente lo que quiero aclarar es que generalmente pensamos dibujar cosas como draw a rectangle at 10, 3 .

Entonces, si pensamos en eso de esta manera: move origin to 10, 3 , luego draw rectangle at 0, 0 . Entonces todo lo que tenemos que hacer es agregar un giro en el medio.

Otro gran punto es la alineación del texto. Es más fácil dibujar el texto en 0, 0, por lo que usar la alineación correcta puede permitirnos hacer eso sin medir el ancho del texto.

Todavía deberíamos mover el texto en una cantidad para centrarlo verticalmente, y desafortunadamente el lienzo no tiene soporte de gran altura de línea, así que eso es una cuestión de adivinar y verificar (corríjanme si hay algo mejor).

He creado 3 ejemplos que proporcionan un punto y un texto con 3 alineaciones, para mostrar cuál es el punto real en la pantalla donde irá la fuente.

var font, lineHeight, x, y;

x = 100;
y = 100;
font = 20;
lineHeight = 15; // this is guess and check as far as I know
this.context.font = font + ''px Arial'';


// Right Aligned
this.context.save();
this.context.translate(x, y);
this.context.rotate(-Math.PI / 4);

this.context.textAlign = ''right'';
this.context.fillText(''right'', 0, lineHeight / 2);

this.context.restore();

this.context.fillStyle = ''red'';
this.context.fillRect(x, y, 2, 2);


// Center
this.context.fillStyle = ''black'';
x = 150;
y = 100;

this.context.save();
this.context.translate(x, y);
this.context.rotate(-Math.PI / 4);

this.context.textAlign = ''center'';
this.context.fillText(''center'', 0, lineHeight / 2);

this.context.restore();

this.context.fillStyle = ''red'';
this.context.fillRect(x, y, 2, 2);


// Left
this.context.fillStyle = ''black'';
x = 200;
y = 100;

this.context.save();
this.context.translate(x, y);
this.context.rotate(-Math.PI / 4);

this.context.textAlign = ''left'';
this.context.fillText(''left'', 0, lineHeight / 2);

this.context.restore();

this.context.fillStyle = ''red'';
this.context.fillRect(x, y, 2, 2);

La línea this.context.fillText(''right'', 0, lineHeight / 2); es básicamente 0, 0 , excepto que nos movemos ligeramente para que el texto se centre cerca del punto