1

我正在构建一个生成器，我正在使用 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/

4

1 回答 1

1

我通过使用 Erik 在此处发布的解决方案修复它：为什么更改的输入字段会更改元素但不再允许 Jquery 弧效果

从此代码更改：`

$(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});

});
于 2013-11-14T21:09:19.707 回答