与拉斐尔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']); 

如果我设置在实心圆“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); 
}; 

而且更新旋转

是你在找什么？