Question

您好我试图建立一个像＃＆＃34;安全旋钮拨号器＆＃34;。我在这里发现thread关于在中心周围旋转一条线。

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

然而，它没有按照我的意愿工作，因为（正确地）只有当从用以下方式制作的红色矩形开始拖动时，才能旋转拨号器：

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

和线的中心和当前端点之间的第二个（＆＃34;针＆＃34;）：

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

如果我在完整的圆圈上设置拖动侦听器＆＃34; needle1＆＃34; （红色的一个覆盖低角度的拨号器png图像）而不是线＆＃34;针＆＃34;，我可以旋转旋钮从旋钮的任何一点拖动：

fiddle

但是，显然，它无法保持起始角度。我怎样才能有正确的行为，比如使用小线＆＃34;针＆＃34; ？

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旋钮

1 个答案: