[英]Update moment.js duration with ionic touch event
I am building an iOS application with Ionic. 我正在使用Ionic构建iOS应用程序。 The application is a timer where the user will specify a time limit and then countdown that time for a certain activity. 该应用程序是一个计时器,用户将在其中指定时间限制,然后针对特定活动倒计时该时间。 I am trying to achieve an interaction where the user will drag a handle around the outside of a circle and each clockwise rotation will increment the time limit by one minute, and going the opposite direction will decrement by one. 我正在尝试实现一种交互,其中用户将在圆的外部拖动手柄,并且每次顺时针旋转将使时间限制增加一分钟,而向相反的方向将减少一分钟。
I have the circle working, where you can drag the handle and it will adhere to the bounds of the container. 我有一个正在工作的圆,您可以在其中拖动手柄,它会紧贴容器的边界。 Now I am trying to use Moment.js to create the countdown, but am having a tough time getting the timer values to update inside of the touch event. 现在,我试图使用Moment.js来创建倒计时,但是很难在触摸事件中更新计时器值。
The $scope.duration
variable is what I am using to track the timer value. $scope.duration
变量是我用来跟踪计时器值的变量。 I have tried using the moment().duration()
method to specify a duration object and am initializing it to '00:00:00'. 我尝试使用moment().duration()
方法指定一个持续时间对象并将其初始化为'00:00:00'。 When I try to update that value in the touch gesture event, I am unable to update the timer value. 当我尝试在触摸手势事件中更新该值时,无法更新计时器值。 I am assuming I either don't understand how to correctly apply updated scope values in Angular/Ionic, I don't know how to correctly use Moment.js, or quite possibly - both. 我假设我要么不明白如何正确地在Angular / Ionic中应用更新的范围值,要么不知道如何正确地使用Moment.js,或者很可能-两者都有。
Here is my template code: 这是我的模板代码:
<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>
And my large controller: 而我的大型控制器:
.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);
})
I hacked up a CodePen demo. 我破解了CodePen演示。 It doesn't track the drag event all that well without a mobile format, but you can get the idea of what I am going for. 没有移动格式,它不能很好地跟踪拖动事件,但是您可以了解我要做什么。
http://codepen.io/stat30fbliss/pen/xZRrXY http://codepen.io/stat30fbliss/pen/xZRrXY
Here's a screenshot of the app in-progress 这是正在进行的应用程序的屏幕截图
更新$scope.duration
,运行$scope.$apply()
它将开始工作:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.