我正在用Ionic构建iOS应用程序。该应用程序是一个计时器,用户将指定一个时间限制,然后为某个活动倒计时。我试图实现一种交互方式,用户将围绕圆圈的外部拖动手柄,每次顺时针旋转将使时间限制增加一分钟,向相反方向递减1。更新带有离子触摸事件的moment.js持续时间
我有圆圈工作,在那里你可以拖动手柄,它将坚持容器的边界。现在我正在尝试使用Moment.js来创建倒计时,但是我很难在触摸事件中获取定时器值来更新。
$scope.duration
变量是我用来跟踪计时器值。我曾尝试使用moment().duration()
方法指定持续时间对象,并将其初始化为'00:00:00'。当我尝试在触摸手势事件中更新该值时,我无法更新计时器值。我假设我要么不明白如何正确应用Angular/Ionic中的更新后的范围值,我不知道如何正确使用Moment.js,或者很可能 - 都是。
这里是我的模板代码:
<ion-view hide-nav-bar="true" view-title="Dashboard">
<ion-content>
<div class="timer">
<div class="timer-slider"></div>
<span class="timer-countdown">
{{duration}}
</span>
</div>
</ion-content>
</ion-view>
我的大控制器:
.controller('DashCtrl', function($scope, $ionicGesture) {
var $timer = angular.element(document.getElementsByClassName('timer')[0]);
var $timerSlider = angular.element(document.getElementsByClassName('timer-slider')[0]);
var timerWidth = $timer[0].getBoundingClientRect().width;
var sliderWidth = $timerSlider[0].getBoundingClientRect().width;
var radius = timerWidth/2;
var deg = 0;
var X = Math.round(radius * Math.sin(deg*Math.PI/180));
var Y = Math.round(radius * -Math.cos(deg*Math.PI/180));
var counter = 0;
$scope.duration = moment().hour(0).minute(0).second(0).format('HH : mm : ss');
// Set timer circle aspect ratio
$timer.css('height', timerWidth + 'px');
$timerSlider.css({
left: X + radius - sliderWidth/2 + 'px',
top: Y + radius - sliderWidth/2 + 'px'
});
$ionicGesture.on('drag', function(e) {
e.preventDefault();
var pos = {
x: e.gesture.touches[0].clientX,
y: e.gesture.touches[0].clientY
};
var atan = Math.atan2(pos.x - radius, pos.y - radius);
deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position
// for attraction to multiple of 90 degrees
var distance = Math.abs(deg - (Math.round(deg/90) * 90));
if (distance <= 5 || distance >= 355)
deg = Math.round(deg/90) * 90;
if(Math.floor(deg) % 6 === 0) {
console.log(Math.floor(deg));
$scope.duration = moment().hour(0).minute(0).second(counter++).format('HH : mm : ss');
}
if (deg === 360)
deg = 0;
X = Math.round(radius * Math.sin(deg * Math.PI/180));
Y = Math.round(radius * -Math.cos(deg * Math.PI/180));
$timerSlider.css({
left: X + radius - sliderWidth/2 + 'px',
top: Y + radius - sliderWidth/2 + 'px'
});
}, $timerSlider);
})
我砍死了CodePen演示。如果没有移动格式,它不会很好地跟踪拖动事件,但是您可以了解我要做什么。
http://codepen.io/stat30fbliss/pen/xZRrXY
这里正在进行的应用程序的截图