0

次のコードを使用して、テキストボックスに入力したフォントテキストを変更しています。これはうまく機能します。次に、Jqueryを使用してテキストをCURVEとして表示します。http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/を使用しようとしましたが、ほとんどのテキストがハーコードされているのがわかります。つまり、誰かがテキストボックスにテキストを入力した場合、それは1本の線ではなく曲線として表示されるはずです\

ここに画像の説明を入力してください

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - </title>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
            $('#ta').keyup(function(){
                $('#float').html("<p>"+$(this).val()+"</p>");
            });
            $("#fs").change(function() {
                $('#float').css("font-family", $(this).val());
            });
            $("#size").change(function() {
                $('#float').css("font-size", $(this).val() + "px");
            });

});//]]>  

</script>


</head>
<body>
  <form id="myform">
    <button>erase</button>
    <select id="fs"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>

    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>    <textarea id=ta class="changeMe">Text into textarea</textarea>
    <div id="container" class="changeMe">
        <div id="float">
            <p>
                Text into container
            </p>
        </div>
    </div>


</body>


</html>
4

2 に答える 2

1

プラグインをコードに含め、これをスクリプトに使用します

$(window).load(function(){
    function update(){
        var text = '<p>' + $('#ta').val() + '</p>',
            size = $('#size').val(),
            font = $('#fs').val();

        $('#float')
            .css({
                fontFamily: font,
                fontSize: size + 'px'
            })
            .html(text)
            .find('p')
            .arctext();

    }

    $('#ta').keyup( update );
    $("#fs, #size").change( update );
});

http://jsfiddle.net/gaby/AnyNQ/1/でのデモ

于 2012-05-26T14:51:54.520 に答える
0

CircleType.jsをチェックしてください。このサイトで、湾曲したテキスト入力を作成するためにどのように使用されたかを確認できます。

完全な開示：CircleType.jsは私のプロジェクトですが、あなたの状況で役立つと思います。

于 2014-07-13T21:31:03.507 に答える