Question

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

该浏览功能在Chrome，Safari和Opera中运行良好。在Internet Explorer中，运动非常紧张，并且经常会返回到它的初始起始位置。在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);

这是一个小提琴，http://jsfiddle.net/fiddle_fish/7bmwvfmm/1/

任何提示将不胜感激。

Answer 1

我无法看到＆＃39;事件＆＃39;已定义，你可以尝试修改你的处理函数params来直接采取事件......

      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中拖动旋转

1 个答案: