Question

我使用以下代码更改文本框中输入的任何字体文本，它工作得很好，我现在要做的是使用Jquery将文本显示为CURVE，如下所示。我尝试使用http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/，但我发现那里的大部分文字都是有编码的，我不想要那样的。所以，如果有人在文本框中键入文本，它应该显示为弯曲而不是单行\

enter image description here

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

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

Answer 2

结帐CircleType.js。您可以在this site上查看如何使用它来创建弯曲文本输入。

完全披露：CircleType.js是我的项目，但我认为它可能对您的情况有所帮助。

用Jquery弯曲文本没有硬编码

2 个答案: