Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
拖拽
var lastPostionY = 0;
var lastPostionX = 0;
var currentPositionY = 0;
var currentPositionX = 0;
var turntableCircleLeft = $('.turntable_circle').offset().left;
var turntableCircleHalfWidth = $('.turntable_circle').width() / 2;
var turntableCircleTop = $('.turntable_circle').offset().top;
var turntableCircleHalfHeight = $('.turntable_circle').height() / 2;
$('.turntable_circle').on('touchstart',function(event){
turntableCircleLeft = $(event.target).offset().left;
turntableCircleHalfWidth = $(event.target).width() / 2;
turntableCircleTop = $(event.target).offset().top;
turntableCircleHalfHeight = $(event.target).height() / 2;
event.preventDefault();
lastPositionY = event.originalEvent.touches[0].pageY
- turntableCircleTop - turntableCircleHalfHeight;
lastPositionX = event.originalEvent.touches[0].pageX
- turntableCircleLeft - turntableCircleHalfWidth;
});
$('.turntable_circle').on('touchmove',function(event){
event.preventDefault();
currentPositionY = event.originalEvent.touches[0].pageY
- turntableCircleTop - turntableCircleHalfHeight;
currentPositionX = event.originalEvent.touches[0].pageX
- turntableCircleLeft - turntableCircleHalfWidth;
var currentRadian = Math.atan2(currentPositionY,currentPositionX);
//(degree - 150) * Math.PI / 180
var currentDegree = 90 - currentRadian * (180 / Math.PI);
var lastRadian = Math.atan2(lastPositionY,lastPositionX);
var lastDegree = 90 - lastRadian * (180 / Math.PI);
//(90 - Math.atan2(y, x) * (180 / Math.PI))
//console.log(Math.abs(currentDegree - lastDegree));
var circleDegree = parseFloat($(event.target).attr('data-circle-degree'));
if(currentDegree < lastDegree){
tempDegree = circleDegree + Math.abs(currentDegree - lastDegree);
}else{
tempDegree = circleDegree + lastDegree - currentDegree;
}
console.log(tempDegree);
var percentatge = tempDegree > 0 ? parseInt(tempDegree/360*100) : parseInt(( 90 - Math.abs(tempDegree) + 270) / 360 * 100);
if(percentatge !== 99){
draw(event.target.getContext("2d"),$(event.target).attr('data-color'),percentatge,tempDegree);
}else{
draw(event.target.getContext("2d"),$(event.target).attr('data-color'),100,360);
}
});
$('.turntable_circle').on('touchend',function(event){
event.preventDefault();
$(event.target).attr('data-circle-degree',tempDegree);
console.log($(event.target).attr('data-circle-degree'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.