javascript - 带 Raphael JS 的旋钮拨盘

Question

你好，我正在尝试构建类似“安全旋钮拨号器”的东西。我在这里找到了一个 thread关于绕中心旋转一条线。

我修改了上面的代码，结果是这样的:

fiddle

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

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

移动 Angular 是通过将两个 Angular 相加来计算的，第一个是中心点和当前鼠标点之间的 Angular :

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 图像的低 alpha 的红色圆圈)而不是线“needle”上，我可以旋转旋钮从旋钮的任意点拖动:

fiddle

但是，显然，它不能保留起始 Angular 。我怎样才能有正确的行为，比如使用细线“针”的行为？

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

并更新旋转

这就是你要找的吗？