Estoy tratando de hacer un efecto de texto curvo utilizando CSS3, HTML Canvas, o incluso SVG (vea la imagen a continuación, por ejemplo)? es posible? Si es así, ¿cómo puedo lograr este efecto?¿Hay alguna manera de curvar/texto de arco usando CSS3/Canvas
Actualización: Para aclarar: El texto que se diseñará de esta manera será dinámico.
Por supuesto que puede hacerlo con una lona, probar este código como un ejemplo:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
</style>
</head>
<body>
<canvas id="cnv"></canvas>
<script type="text/javascript" charset="utf-8">
cnv = document.getElementById("cnv");
cnv.width = 500;
cnv.height = 300;
ctx = cnv.getContext("2d");
ctx.font = "bold 12px sans-serif";
text = "abcdefghijklm"
for (i = 0; i < text.length; i++) {
ctx.fillText(text[i], 300, 100);
ctx.rotate(0.1);
}
</script>
</body>
</html>
no hace exactamente correcto, pero estoy seguro de que va a administrar para ajustarlo a su comparación;)
Throws Error de Javascript en IE8 pero funciona en Chrome. –
Para IE tiene que usar excanvas: mira esto http://diveintohtml5.org/canvas.html#ie –
La siguiente solución SVG parece mucho más fácil. ¿Por qué lo harías de esta manera? –
Pude ejecutar ejemplos desde http://apike.ca/prog_svg_text.html en Chrome, pero no funciona en IE.
Puede utilizar SVGWeb, http://code.google.com/p/svgweb/
Alternativamente, usted puede escribir su propia utilidad de la generación de la imagen en el sitio del servidor (en .NET/PHP) como un controlador HTTP y pasar el texto a él y sería volver GIF/PNG mediante el uso de la biblioteca de gráficos y la imagen de representación sobre la marcha para usted.
O puede hacerlo utilizando algunos CSS, sin embargo, estoy seguro de que no lo ejecutará en IE en el corto plazo. Por otro lado lo bueno es que el texto es seleccionable: D
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing min-width and max-width</title>
<style type="text/css">
.num1 {
-webkit-transform: translate(0px, 30px) rotate(-35deg);
}
.num2 {
-webkit-transform: translate(0px, 25px) rotate(-25deg);
}
.num3 {
-webkit-transform: translate(0px, 23px) rotate(0deg);
}
.num4 {
-webkit-transform: translate(0px, 25px) rotate(25deg);
}
.num5 {
-webkit-transform: translate(0px, 30px) rotate(35deg);
}
span {display: inline-block; margin: 1px;}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; margin: 50px auto">
<span class="num1">a</span><span class="num2">b</span><span class="num3">c</span><span class="num4">d</span><span class="num5">e</span>
</div>
</body>
</html>
Francamente, no me importa IE. Esto está destinado a un sitio web optimizado para iPhone, por lo que solo me preocupa que se muestre correctamente en Webkit. Podría ser capaz de sacar lo que estás sugiriendo para texto dinámico usando un poco de trucos de JavaScript. Gracias. – gabriel
IE9 + es compatible con las transformaciones CSS3 2d, y IE8 y las versiones posteriores admiten las transformaciones de matriz de Microsoft, pero son un tanto diferentes en el manejo. – JayC
@JayC Sí y esta publicación tiene 2 años. Creo que usar el prefijo '-ms-' debería funcionar principalmente, aunque no tengo medios para probar. –
SVG soporta texto-on-a-ruta directamente, aunque no lo hace 'curva' los glifos individuales a lo largo del camino. Aquí es an example de cómo crearlo:
...
<defs>
<path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
<textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
¿Por qué no es esta la respuesta? Parece ser la mejor solución de lejos? –
Comprendo que esto es más de un año de retraso, pero aquí está mi solución
que envuelve el texto alrededor, pero no puedo averiguar cómo voltear las letras verticalmente en la parte inferior porque realmente odio las transformaciones del lienzo y no puedo entender cómo hacer dos rotaciones en el texto (voltear una vez a lo largo del eje y y una vez más sobre el centro de un imaginario) circulo).
Este es un excelente trabajo. ¿Te has expandido o has creado una biblioteca desde 2011? –
<embed width="100" height="100" type="image/svg+xml" src="path.svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
</svg>
</embed>
Este tutorial le muestra exactamente cómo hacerlo utilizando HTML5 y lienzo. Una de las otras respuestas, arriba, tenía una idea similar, para usar el método canvas.rotate. Este también usa canvas.translate.
Hay un complemento jQuery para curvar texto usando CSS3 llamado arctext.js. Es bastante bueno y tiene una gama de opciones de configuración. Supongo que no funcionará en IE8 pero creo que la mayoría de las cosas de CSS3 no lo hacen.
También hay una página de demostración con algún ejemplo de ello en acción here.
Puede probar este plugin jQuery http://codecanyon.net/item/jquery-text-arch/3669779
Tiene muchas opciones para personalizar arcos de texto y círculos de texto.
Funciona en todos los principales navegadores y SO
No es una solución pura de CSS, pero CircleType.js funciona muy bien para texto en arco.
¡Cosas geniales! Funciona con bastante facilidad. Tenga en cuenta que requiere otro complemento (se requiere "Lettering.js") – Rav
que utiliza el tutorial mencionado anteriormente (por Simon Tewsi) para escribir una mejor solución, con respecto al tema de interletraje. No usa ninguna biblioteca, JS puro.
verlo en http://jsfiddle.net/fidnut/cjccg74f/
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)
Nota: SO está exigiendo que puse todo el código de jsFiddle aquí también. No creo que esto sea inteligente, hay demasiados códigos, así que solo agrego el nombre de la función.
Puede utilizar SVG con textPath así:
<html>
<head>
<script>
function updateMessage(str) {
document.getElementById("MyMessage").textContent = str;
}
</script>
</head>
<body >
<button onClick="updateMessage('The text has changed');">Change the text</button>
<svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="CurvedPath"
d="M 0 150 Q 325 50 650 150 " />
</defs>
<text font-size="54" x='325' y='50' text-anchor="middle" fill="darkgreen" font-family=Arial,Helvetica style="text-shadow: 2px 2px 3px gray;"
> <textPath id='MyMessage' xlink:href="#CurvedPath" >
THIS TEXT IS CURVED
</textPath>
</text>
</svg>
</body>
</html>
http://tavmjong.free.fr/INKSCAPE/MANUAL/web/svg_tests.php muestra lo que pueda lograr con SVG. Un buen vistazo a la fuente puede ayudarlo a encontrar la solución –
@Gabriel, pregunta extraña: ¿qué es esa fuente? Es delicioso. –
@sudowned: Ha pasado un tiempo, pero creo que es Futura. – gabriel