ラファエルのつまみダイヤルJS

Question

こんにちは私は "安全なノブダイヤラー"のようなものを構築しようとしています。私は、ここにSOを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」とカバー（赤一方ドラッグリスナーを設定した場合低アルファダイヤラPNG形式の画像）の代わりにライン「針」を、私はノブの任意の点からドラッグノブを回転させることができる。

fiddle

しかし、明らかに、開始角度を保持することができません。小さな線「針」を使用するような正しい行動をとるにはどうすればよいですか？

Answer 1

はい、同じ動作をさせるために、dragstartとdragendでオフセットを保存して使用することができます。

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); 
}; 

と回転

を更新するには、あなたが探しているものということですか？