使用arctextjquery插件使用range标记创建动态的文本弧

using arctext jquery plugin to create dynamic arc of text using range tag

本文关键字：动态 创建 文本 插件 arctextjquery range 使用      更新时间：2023-09-26

我喜欢动态创建arctext，所以我使用了arctext jquery插件，并使用range html标记来选择文本中的圆弧或曲线。

这是我的html代码

<label>Curve:</label>
<input type="range" name="value" id="value" min="-100" max="100" value="0" />
<p  id="textvalue"> I wanna to be curve</p>

javascript代码：

<script type="text/javascript">
$(function(){
  $("#value").change(function () {
    var newValue = $('#value').val();
    changetext(newValue);
  });
  function changetext(newValue){
    console.log(newValue);
    var pos;
    if(newValue>0)
      pos=1;
    else{
      pos=-1;
      $("#textvalue").hide();
      $("#textvalue").show().arctext({radius:newValue, dir: pos});
    }
  }
});
</script>

但这段代码适用于第一次拖动。但后来它保持不变。范围值不断变化，我从console.log中了解到这一点。

我认为您的意思是在if语句的大括号之外添加$（"textvalue"）.hide（）。此外，滑块变为负值，文本仅取正值。我看了一下，我能让它工作的唯一方法是完全移除元素，用不同的半径替换它，所以，

$(function(){
$("#value").change(function () {
 var newValue = $('#value').val();
 changetext(newValue);
});
function changetext(newValue){
  console.log(newValue);
  var pos;
  if(newValue>0)
   pos=1;
  else{
   pos=-1;
  }
  var text = $("#textvalue").text();
  $("#textvalue").remove();
  $('body').append('<p id="textvalue">'+ text +'</p>');
  $("#textvalue").arctext({radius:Math.abs(newValue), dir: pos});
 }
});
相关文章：