Javascript 拉斐尔JS旋钮刻度盘

你好，我正在尝试建立一个像“安全旋钮拨号器”的东西。我在这里发现了一个关于绕中心旋转直线的例子

我修改了上述代码，结果如下：

但是，它不能像我所希望的那样工作，因为（正确地）只有当拖动从红色矩形开始时，才能旋转拨号器，该矩形由：

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

以及线的中心和当前端点之间的第二个端点（“针”）：

如果我将拖动侦听器设置在填充的圆圈“needle1”（红色圆圈覆盖着拨号器png图像的低alpha）上，而不是线“needle”，我可以从旋钮的任意点旋转旋钮拖动：

---

但是，很明显，它不能保留起始角。我如何才能有一个正确的行为，比如使用小行“针”的行为？

是的，您可以通过dragstart和dragend存储并使用偏移量来获得相同的行为

并更新旋转

这就是你要找的吗

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

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