带 Raphael JS 的旋钮拨盘

Question

你好，我正在尝试构建类似 "safe knob dialer" 的东西。我在 SO 上找到了关于围绕中心旋转一条线的。

我修改了上面的代码，结果是：

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

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

和线的中心和当前端点之间的第二个 ("needle"):

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

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

fiddle

但是，显然，它不能保留起始角度。我怎样才能有正确的行为，比如使用小线 "needle" 的行为？

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

并更新旋转

这是你要找的吗？

带 Raphael JS 的旋钮拨盘

Knob dial with Raphael JS

javascript

raphael