raphael js 在 Firefox 和 Internet Explorer 中拖动旋转

Question

我是 SVG 和 Raphael 世界的新手，我正在尝试创建一个具有可拖动指针的径向表盘。

拖动在 Chrome、Safari 和 Opera 中运行良好。在 Internet Explorer 中，移动非常不稳定，并且经常 return 到它的初始位置。在 Firefox 中，它根本不起作用:(

var paper = Raphael("paper1", 250, 250);
            var dialCenter = 125;
            var dialRadius = 125;
            var dialCircum = 2 * Math.PI * dialRadius;
            var circle = paper.circle(dialCenter, dialCenter, dialRadius).attr({fill: "orange"});
            paper.circle(125, 125, 10).attr({fill: "black", "stroke-width": 5, stroke: "purple"});
            var needle = paper.path("M" + dialCenter.toString() + ' ' + dialCenter.toString() + ", L0,125").attr({stroke: '#ffff00', 'stroke-width': 6});
            var centerCircle = paper.circle(125, 125, 10).attr({fill: "black", "stroke-width": 5, stroke: "purple"});
            needle.data("id", 'needle1');
            var degStep = 1;
            var currentDeg = 1;
            var mouseXPos, mouseYPos, mouseDir, mouseEv;

            var needleSet = paper.set();
            needleSet.push(needle);

            var currSectorX = 0;
            var currSectorY = 0;

            moveNeedle = function (e) {
                var mouseX = (e.offsetX == undefined) ? e.layerX : e.offsetX;
                var mouseY = (e.offsetY == undefined) ? e.layerY : e.offsetY;
                var needleA = Raphael.angle(dialCenter, dialCenter, needle.getPointAtLength(needle.getTotalLength())['x'], needle.getPointAtLength(needle.getTotalLength())['y']);
                var newA = Raphael.angle(dialCenter, dialCenter, mouseX, mouseY);
                var rotateAngle = (360 - needleA) + newA;
                needle.transform('r' + rotateAngle + ",125,125");
            }
            var startDrag = function () {
                // console.log(this);
            }, dragger = function (dx, dy) {
                moveNeedle(event);
            }, endDrag = function () {

            };

            needleSet.drag(dragger, startDrag, endDrag);

这里是fiddle，http://jsfiddle.net/fiddle_fish/7bmwvfmm/1/

任何提示将不胜感激。

Answer 1

我看不到 'event' 的定义位置，您可以尝试修改您的处理函数参数以像这样直接接收事件...

      moveNeedle = function (dx,dy,x,y,e) {

      ....

      var startDrag = function () {
            // console.log(this);
      }, 
      dragger = moveNeedle,
      endDrag = function () {};

jsfiddle

编辑：这应该可以修复 firefox 错误。对于抖动问题，我认为是layerX/Y。也许使用 clientX/Y 之类的东西，例如

           var mouseX = e.clientX;
           var mouseY = e.clientY;

jsfiddle

raphael js 在 Firefox 和 Internet Explorer 中拖动旋转

raphael js drag rotation in Firefox and Internet Explorer

javascript

rotation

raphael

drag