it-swarm.com.de

Gibt es eine Möglichkeit, Text/Bogen mit CSS3/Canvas zu kurven

Ich versuche, einen gekrümmten TextEffekt mit CSS3, HTML Canvas oder sogar SVG zu erzeugen (siehe Bild unten). Ist das möglich? Wenn ja, wie kann ich diesen Effekt erzielen?

Update: Zur Klarstellung: Der Text, der so gestaltet wird, ist dynamisch.

Arched or Curved Text Example

51
gabriel

SVG unterstützt Text-auf-einem-Pfad direkt, obwohl die einzelnen Zeichen entlang des Pfads nicht "gebogen" werden. Hier ist ein Beispiel wie Sie es erstellen:

...
<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>
...
33
Phrogz

Sie können es sicherlich mit Canvas tun, probieren Sie diesen Code als Beispiel:

<!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>

Es macht es nicht genau richtig, aber ich bin mir sicher, dass Sie es schaffen werden, es an Ihre Vergleiche anzupassen;)

21
Jakub Hampl

Oder Sie können es mit CSS tun, aber ich bin mir sicher, Sie werden es nicht bald auf IE zum Laufen bringen. Auf der anderen Seite ist die coole Sache, dass der Text auswählbar ist: 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>
13
Jakub Hampl

Es ist keine reine CSS-Lösung, aber CircleType.js eignet sich hervorragend für Bogentext.

http://circletype.labwire.ca/

8
peterhry

Es gibt ein jQuery-Plugin für Kurven mit CSS3 namens arctext.js . Es ist ziemlich gut und bietet eine Reihe von Konfigurationsoptionen. Ich denke, es wird nicht mit IE8 funktionieren, aber ich denke, die meisten CSS3-Dinge tun dies nicht!

Es gibt auch eine Demo-Seite mit einigen Beispielen davon in Aktion hier

3
Mark Rhodes
<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>
2
signano Anas

Sie können dieses jQuery-Plugin ausprobieren http://codecanyon.net/item/jquery-text-Arch/3669779
Es gibt viele Möglichkeiten, Textbögen und Textkreise anzupassen.
Funktioniert in allen gängigen Browsern und Betriebssystemen

1

Ich weiß, dass dies über ein Jahr zu spät ist, aber hier ist meine Lösung

JS Fiddle Snippet

der Text wird um den Text herum gewickelt, aber ich kann nicht herausfinden, wie ich die Buchstaben vertikal entlang der Unterseite drehen kann, da ich die Umwandlung der Leinwand wirklich wirklich sehr hasse und meinen Kopf nicht darum drehen kann, wie zwei Textdrehungen ausgeführt werden (einmal umdrehen) die y-Achse und noch einmal um den Mittelpunkt eines imaginären Kreises).

0
puk

Ich konnte Beispiele aus http://apike.ca/prog_svg_text.html in Chrome ausführen, aber es funktioniert nicht im IE.

Sie können SVGWeb verwenden, http://code.google.com/p/svgweb/

Alternativ können Sie auf der Server-Site (in .NET/PHP) wie ein HTTP-Handler ein eigenes Dienstprogramm zur Bilderzeugung schreiben und Text an ihn übergeben. GIF/PNG wird mithilfe der Grafikbibliothek und dem schnellen Rendern von Bildern zurückgegeben.

0
Vishal Seth

Ich habe das oben erwähnte Tutorial (von Simon Tewsi) verwendet, um eine bessere Lösung bezüglich des Kerning-Problems zu schreiben. Verwendet keine Bibliothek, reines JS.

Siehe unter http://jsfiddle.net/fidnut/cjccg74f/

function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)

Hinweis: SO fordert, dass ich auch den gesamten Code von JSFiddle hier einsetze. Ich denke nicht, dass das klug ist, zu viel Code, also füge ich nur den Namen der Funktion hinzu.

0
Rookie Vee

Dieses Tutorial zeigt Ihnen genau, wie Sie dies mit HTML5 und Canvas tun. Eine der anderen Antworten hatte eine ähnliche Idee, die canvas.rotate-Methode zu verwenden. Dieses verwendet auch canvas.translate.

0
Simon Tewsi

Sie können SVG wie folgt mit TextPath verwenden:

<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>

0
Vereb