it-swarm.com.ru

Есть ли способ кривой/дуги текста с использованием CSS3/Canvas

Я пытаюсь сделать изогнутый текст эффект, используя CSS3, HTML Canvas или даже SVG (см. Изображение ниже, например)? Это возможно? Если так, как я могу достичь этого эффекта?

Обновление: Для пояснения: текст, который будет стилизован таким образом, будет динамичным.

Arched or Curved Text Example

51
gabriel

SVG напрямую поддерживает text-on-a-path, хотя и не «сгибает» отдельные глифы вдоль пути. Вот пример как вы его создаете:

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

Конечно, вы можете сделать это с помощью canvas, попробуйте этот код в качестве примера:

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

Это не совсем правильно, но я уверен, что вам удастся настроить его по своему усмотрению;)

21
Jakub Hampl

Или вы можете сделать это с помощью некоторого CSS, однако я уверен, что вы не запустите его в IE в ближайшее время. С другой стороны, классно то, что текст выбирается: 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

Это не чистое решение CSS, но CircleType.js отлично работает для вычеркнутого текста.

http://circletype.labwire.ca/

8
peterhry

Существует плагин jQuery для кривой текста с использованием CSS3, который называется arctext.js . Это довольно хорошо и имеет ряд вариантов конфигурации. Я думаю, это не будет работать на IE8, но я думаю, что большинство CSS3 не работает!

Также есть демонстрационная страница с некоторым примером этого в действии здесь

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

Вы можете попробовать этот плагин jQuery http://codecanyon.net/item/jquery-text-Arch/3669779
У него много опций для настройки текстовых арок и текстовых окружностей.
Работает во всех основных браузерах и ОС

1
Aleksandar Timic

Я понимаю, что это больше года, но вот мое решение

фрагмент JS Fiddle

это оборачивает текст, но я не могу понять, как перевернуть буквы вертикально вдоль нижней части, потому что я действительно очень ненавижу преобразования холста, и я не могу обернуть голову, как сделать два поворота текста (перевернуть один раз вдоль ось у и еще раз около центра воображаемого круга).

0
puk

Я смог запустить примеры из http://apike.ca/prog_svg_text.html в Chrome, но он не работает в IE.

Вы можете использовать SVGWeb, http://code.google.com/p/svgweb/

В качестве альтернативы, вы можете написать свою собственную утилиту генерации изображений на сайте сервера (в .NET/PHP), например, обработчик Http, и передать ему текст, и он вернет GIF/PNG с помощью графической библиотеки и визуализации изображения на лету.

0
Vishal Seth

Я использовал упомянутый выше урок (от Саймона Тьюси), чтобы написать лучшее решение проблемы кернинга. Не использует библиотеку, чистый JS.

Смотрите это на http://jsfiddle.net/fidnut/cjccg74f/

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

Примечание: SO требует, чтобы я поместил здесь весь код из JSFiddle. Я не думаю, что это разумно, слишком много кода, поэтому я добавляю только имя функции.

0
Rookie Vee

Этот учебник показывает, как именно это сделать, используя HTML5 и canvas. В одном из других ответов выше была похожая идея использовать метод canvas.rotate. Этот также использует canvas.translate.

0
Simon Tewsi

Вы можете использовать SVG с TextPath следующим образом:

<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