Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.10.2022, 01:27
Аспирант
Отправить личное сообщение для Olga27 Посмотреть профиль Найти все сообщения от Olga27
 
Регистрация: 10.06.2021
Сообщений: 49

Как правильно написать Math.PI для стартовой и конечной точки arc?
Делаю круговой прогресс бар который привязан к таймеру и уменьшается по часовой стрелки. Использую библиотеку EaselJS и tweenjs (для движения). Вроде все работает но здесь есть некоторые вопросы по Math.PI мне кажется я не совсем правильно указала математические расчеты.
Создание Arc
shape2.graphics.clear().beginStroke("#b1b1b1").setStrokeStyle(lineWidth).arc( 0, 0, radius, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) ); 
         
         shape2.graphics.setStrokeStyle(lineWidth).beginStroke("#3949AB");
         arcCommand = shape2.graphics.arc(0, 0, radius, -Math.PI / 2 + degrees * Math.PI, -Math.PI / 2).command;

Запуск tween:
var t = arcCommand;
     var tween = createjs.Tween.get(arcCommand, { override: true })
     .to({startAngle: Math.PI*2 + Math.PI/2+Math.PI}, timeLimit, createjs.Ease.easeIn).call(handleComplete);
     function handleComplete()
     {
       pusk = false;
       t.startAngle = -Math.PI / 2 + degrees * Math.PI;
      
     }

Как правильно указать математические расчеты где присутствует Math.PI для стартовой и конечной позиции угла arc?

Вот код:
<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
    background: #f1ecec; 
} 
canvas {background-color: aliceblue;} 
    </style> 
     <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script> 
     <script src='https://code.createjs.com/tweenjs-0.6.2.min.js'></script>

    
    <script> 
var sec1, timeLimit, degrees, timeStart,lineWidth,radius,x1,y1,rt;        
var pusk = false;
var arcCommand;
var text1,textTime;
 function Main()
 {
    sec1 = 10;
    timeLimit = sec1 * 1000;
    degrees = 2;
    timeStart = (new Date).getTime();
    lineWidth = 10;
    radius = 40;
    x1 = 50;
    y1 = 50;
    canvas = document.getElementById('myCanvas'); 
    stage = new createjs.Stage(canvas); 
    
    shape1 = new createjs.Shape();
    shape2 = new createjs.Shape();
    shape1.graphics.beginFill("#E2FFCC").drawCircle(0, 0, radius-5);
    
     text1 = new createjs.Text("Пуск", "24px Arial", "rgb(130, 113, 121)");
     textTime = new createjs.Text("0:"+sec1, "24px Arial", "rgb(130, 113, 121)");
     
     
    
    shape1.on("click",onSearch);
     text1.x = x1-25;
     text1.y = y1-20;
     
     textTime.x = x1-20;
     textTime.y = y1+50;
    
    shape1.x = shape2.x = x1;
    shape1.y = shape2.y = y1;
  
         
          
          
    
     
        
         
         shape2.graphics.clear().beginStroke("#b1b1b1").setStrokeStyle(lineWidth).arc( 0, 0, radius, (Math.PI/180) * 270, (Math.PI/180) * (270 + 360) ); 
         
         shape2.graphics.setStrokeStyle(lineWidth).beginStroke("#3949AB");
         arcCommand = shape2.graphics.arc(0, 0, radius, -Math.PI / 2 + degrees * Math.PI, -Math.PI / 2).command;
         

         
         
         
    
    
    stage.addChild(shape1,shape2,text1,textTime);
     
      createjs.Ticker.addEventListener("tick",function()
      {
        stage.update();
      });
 }


       


function onSearch(evt)
{

 if(pusk==false)
 {
   pusk = true;
  
   progress1();
 }


}


  function progress1()
  {  
    timeStart = (new Date).getTime();
     var acrInterval = setInterval (function() {
       a = ((new Date).getTime() - timeStart) / timeLimit;
       if(1 < a)
            rt = 0;
            
            
        
        else
            rt = (timeStart + timeLimit - (new Date).getTime()); // Миллисекунд до окончания
            
        s1 = Math.floor((rt / 1000) % 60);
        m1 = Math.floor(rt / 60000);
        
        if(s1<10)
          {
             s1="0"+s1;
          }
          textTime.text = m1+":"+s1;
      
     },63);
     
     var t = arcCommand;
     var tween = createjs.Tween.get(arcCommand, { override: true })
     .to({startAngle: Math.PI*2 + Math.PI/2+Math.PI}, timeLimit, createjs.Ease.easeIn).call(handleComplete);
     function handleComplete()
     {
       pusk = false;
       t.startAngle = -Math.PI / 2 + degrees * Math.PI;
      
     }
   }
 
 </script>
</head> 
<body onload="Main()"> 

<canvas id="myCanvas" width="500" height="500"></canvas> 

</body> 
</html>

Последний раз редактировалось Olga27, 01.10.2022 в 01:31.
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2022, 05:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Olga27,
на всякий случай, строка 126
window.clearInterval(acrInterval);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как написать корректный ajax-запрос для записи в бд? web2k99 AJAX и COMET 1 03.04.2019 01:08
Как написать бот для игры на js sergiyss Events/DOM/Window 1 03.04.2017 14:00
Как правильно написать скрипт Estrella Moretti (X)HTML/CSS 3 17.08.2011 15:45
как правильно написать регулярное выражение? Lucius Общие вопросы Javascript 5 17.04.2011 16:34
Как правильно написать код? dididima Общие вопросы Javascript 1 21.01.2011 22:43