라파엘 손잡이 다이얼 JS

Question

안녕하세요, 저는 "안전한 손잡이 걸기"와 같은 것을 만들려고합니다. 여기 주변에서 선을 돌리는 것에 대해 thread에서 찾았습니다. 내가 좋아하는 것처럼 (바르게) 하나를 드래그 빨간색에서 시작하는 경우에만 전화 걸기를 회전 할 수 있기 때문에

fiddle

그러나, 그것이 작동하지 않습니다 :

나는이 결과, 위의 코드를 수정 한 사각형으로 만든 :

쉬프트 각도는 두 개의 각도의 중심과 현재의 마우스 포인트 간의 제 합산하여 계산된다

var needle = paper.path("M 125 25, L125,0").attr({stroke: '#b00', 'stroke-width': 12}).attr({opacity: 0.5}); 

:

을

var newA = Raphael.angle(dialCenter, dialCenter, mouseX, mouseY); 

및 센터 라인 ("바늘")의 현재 포인트 간의 제 :

var needleA = Raphael.angle(dialCenter, dialCenter, needle.getPointAtLength(needle.getTotalLength())['x'], needle.getPointAtLength(needle.getTotalLength())['y']); 

I가 채워진 원 "needle1"에 드래그 수신기를 설정하는 경우는 (적색 하나 커버링 그것은 시작 각도를 유지 할 수없는, 분명히,

fiddle

그러나 : 낮은 알파 이미지를 PNG로 전화 걸기) 대신 라인 "바늘"나는 노브의 어느 지점에서 드래그 노브를 회전 할 수 있습니다. 어떻게 작은 줄 "바늘"을 사용하는 것과 같은 올바른 행동을 취할 수 있습니까?

Answer 1

예, 드래그 스타트 및 드래그를 통해 오프셋을 저장하고 사용할 수 있으므로 동일한 동작을 얻을 수 있습니다.

uppdated fiddle

setOffset = function (e) { 
    var mouseX = (e.offsetX == undefined) ? e.layerX : e.offsetX; 
    var mouseY = (e.offsetY == undefined) ? e.layerY : e.offsetY; 
    var newA = Raphael.angle(dialCenter, dialCenter, mouseX, mouseY); 
    angleOffset = newA -needleMemory; 
} 

storeNeedle = function(e) { 
    var mouseX = (e.offsetX == undefined) ? e.layerX : e.offsetX; 
    var mouseY = (e.offsetY == undefined) ? e.layerY : e.offsetY; 
    var newA = Raphael.angle(dialCenter, dialCenter, mouseX, mouseY); 
     needleMemory = newA - angleOffset; 
} 


var startDrag = function() { 
    setOffset(event); 
}, dragger = function (dx, dy) { 
    moveNeedle(event); 
}, endDrag = function() { 
    storeNeedle(event); 
}; 

그리고 회전

를 업데이트 당신이 찾고있는 무엇인가요?