[英]Spinning wheel segment detection system
I'd been working on this code pen project involving a spinning wheel. 我一直在从事涉及转轮的代码笔项目。 I want to know how to detect in which segment the pointer points. 我想知道如何检测指针指向哪个段。 Below is the javascript. 以下是JavaScript。 I suppose that I have to divide 360 degrees by the quantity of segments I have. 我想我必须将360度除以我拥有的路段数量。 Thanks in advance and sorry for my bad english. 在此先感谢您,我的英语不好。 I'm from Argentina. 我来自阿根廷。
http://codepen.io/AndreCortellini/pen/vERwmL http://codepen.io/AndreCortellini/pen/vERwmL
//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;
$(document).ready(function(){
/*WHEEL SPIN FUNCTION*/
$('#spin').click(function(){
//add 1 every click
clicks ++;
/*multiply the degree by number of clicks
generate random number between 1 - 360,
then add to the new degree*/
var newDegree = degree*clicks;
var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
totalDegree = newDegree+extraDegree;
/*let's make the spin btn to tilt every
time the edge of the section hits
the indicator*/
$('#wheel .sec').each(function(){
var t = $(this);
var noY = 0;
var c = 0;
var n = 700;
var interval = setInterval(function () {
c++;
if (c === n) {
clearInterval(interval);
}
var aoY = t.offset().top;
$("#txt").html(aoY);
console.log(aoY);
/*23.7 is the minumum offset number that
each section can get, in a 30 angle degree.
So, if the offset reaches 23.7, then we know
that it has a 30 degree angle and therefore,
exactly aligned with the spin btn*/
if(aoY < 23.89){
console.log('<<<<<<<<');
$('#spin').addClass('spin');
setTimeout(function () {
$('#spin').removeClass('spin');
}, 100);
}
}, 10);
$('#inner-wheel').css({
'transform' : 'rotate(' + totalDegree + 'deg)'
});
noY = t.offset().top;
});
});
});//DOCUMENT READY
We need to find a degree in terms of [0..360]
degrees first, so we calculate (totalDegree % 360)
. 我们首先需要找到一个[0..360]
度的度,所以我们计算(totalDegree % 360)
。
Then we see that [31..90]
stands for orange, [91..150]
is yellow, [151..210]
is dark blue and so on... 于是我们看到, [31..90]
代表橙, [91..150]
是黄色的, [151..210]
是深蓝色等等...
In other words, 换一种说法,
[31..90] => 1, orange
[91..150] => 2, yellow
[151..210] => 3, dark blue
[211..270] => 4, blue
[271..330] => 5, cyan
[331..30] => 0, red
This reminds me of dividing and rounding: (deg / 60)
and round it to integer. 这使我想起除法和舍入: (deg / 60)
并将其舍入为整数。 For example: 例如:
31 / 60 = 0.516 ~ 1
32 / 60 = 0.533 ~ 1
...
45 / 60 = 0.750 ~ 1
...
88 / 60 = 1.466 ~ 1
89 / 60 = 1.483 ~ 1
90 / 60 = 1.500 ~ 2
91 / 60 = 1.516 ~ 2
...
So, as you can see, the function roundToInteger((deg / 60))
totally fits our purposes! 因此,如您所见,函数roundToInteger((deg / 60))
完全符合我们的目的!
In terms of JavaScript: 在JavaScript方面:
var sector = ((totalDegree % 360) / 60).toFixed(0);
$("#txt").html(sector);
See http://codepen.io/mr_nameless/pen/yVmRxW 参见http://codepen.io/mr_nameless/pen/yVmRxW
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.