Обозначение текстового значения Raphael.js

Я пытаюсь оживить счетчик в raphael.js, но я столкнулся со странным поведением. В середине текста анимации значение равно NaN, и я не понимаю, почему.Обозначение текстового значения Raphael.js

Вот мой код:

<html> 
<head> 
    <title></title> 
    <script src="raphael.js"></script> 
    <script src="jquery.js"></script> 
</head> 
<body> 
    <script type="text/javascript"> 
     var r = Raphael(0, 0, 400, 400); 
     r.ca.strNumber = function (number) { 
      var str = number + ''; 
      return {"text" : str}; 
     } 

     $(document).ready(function() { 
      var t = r.text(200, 200, "1").attr({"font-size": 50, "fill": "black"}); 
      t.animate({"strNumber": 999}, 500); 
     }); 
    </script> 

</body> 
</html>

Так что же случилось с ним? Как это исправить?

Спасибо!

источник

2013-10-24 DaZzz

-1

У вас есть NaN, потому что у него нет начального значения для ваших пользовательских атрибутов. Добавьте это после создания вашего текста:

t.attr ({strNumber: 0}); // сделать начальное значение 0, вы можете установить на любое число, которое соответствует вашим потребностям

Затем вы можете сделать анимацию как обычный

источник

2014-09-18 08:19:46 dduyduong

Я предполагаю, что вы хотите сделать подсчет анимации от 1 до 999. Я не Не думаю, что .animate() может помочь вам это сделать, вместо этого вы можете использовать следующий код: от 1 до 10:

<body> 
<script type="text/javascript"> 
    var r = Raphael(0, 0, 400, 400); 
    $(document).ready(function() { 
     counter = 1; 
     var t = r.text(200, 200, counter).attr({"font-size": 50, "fill": "black"}); 

     var myTimer = setInterval(function(){ 
      counter ++; 
      t.attr('text', counter); 
      if (counter>=10){ 
      clearInterval(myTimer); 
      } 
     }, 500); 
    }); 
</script> 
</body>

источник

2018-01-03 00:10:42

Обозначение текстового значения Raphael.js

ответ

Смежные вопросы