Как правильно написать 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,
на всякий случай, строка 126 window.clearInterval(acrInterval); |
Часовой пояс GMT +3, время: 20:53. |