javascript - 拉斐尔JS旋钮旋钮

您好，我正在尝试构建“安全旋钮拨号器”之类的东西。我在这里找到了关于围绕中心旋转线的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”（红色的那个覆盖低的Dialer png图像，而不是直线“ needle”），则可以旋转从旋钮任意点拖动的旋钮：

fiddle

但是，显然，它不能保留起始角度。我该如何采取正确的行为，就像使用细线“ needle”的行为一样？

最佳答案

是的，您可以通过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);
};

并更新旋转

那是您要找的东西吗？

关于javascript - 拉斐尔JS旋钮旋钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46053793/