Question

我正在构建一个生成器，我正在使用arctext.js插件。（http://tympanus.net/Development/Arctext/）

这是我的问题。我有一个输入字段，人们可以在其中键入他们想要的任何文本。之后有字体大小，字母间距和文字弧的滑块。

arctext.js适用于页面加载时的文本，但不适用于输入的文本。这是输入文本的代码

/* top */
$(document).on('keyup', '#bead-top-text', function(e) {

    $('#bTop').html($(this).val().replace(/\n/g,'<br/>'));

});
$(document).on('change', '#bead-top-font', function(e) {

    $('#bTop').css({'font-family': ''+$(this).val()+'', 'font-weight': 'normal'});

});
$("#bead-top-font-size").slider({
  range: "min",
  value: 28,
  min: 10,
  max: 100,
  slide: function( event, ui ) {
    $('#bTop').css({'font-size': ui.value+'px'});
  }
});
$("#bead-top-letter-spacing").slider({
  range: "min",
  value: 0,
  min: 0,
  max: 100,
  slide: function( event, ui ) {
    $('#bTop').css({'letter-spacing': ui.value+'px'});
  }
});
$("#bead-top-arc").slider({
  range: "min",
  value: 0,
  min: 0,
  max: 1000,
  slide: function( event, ui ) {

    $('#bTop').arctext('set', {
                    radius      : ui.value, 
                    dir         : 1, 
                    animation   : {
                        speed   : 300
                    }
                });
  }
});

我不知所措。关于如何让这个工作的任何想法？生成器位于http://www.xbracelets.com/xgen/

Answer 1

我使用Erik在此处发布的解决方案修复了它：Why does the changed input field change the element but no longer allows Jquery arc effects

更改了此代码：`

$(document).on('keyup', '#bead-top-text', function(e) {

    $('#bTop').html($(this).val().replace(/\n/g,'<br/>'));

});

对此：

$(document).on('keyup', '#bead-top-text', function(e) {

    $('#bTop').arctext('destroy');
    $('#bTop').html($(this).val().replace(/\n/g,'<br/>'));
    $('#bTop').arctext({radius: 1100});

});

arctext.js用于处理输入的文本

1 个答案: