Question

当我尝试在IE 11中使用鼠标指针时，它不会工作，但它在Chrome中运行正常。

    <body>
            <div id="container" onmousemove="move(event)"></div>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

            <script>

                    var paper = Raphael("container", 500, 500);

                    console.log("Path redraw test");

                    var arrow = paper.path("M 250, 250, L 0, 0");
                    arrow.attr('stroke-width', 2);
                    arrow.attr('stroke', "#0000FF");
                    arrow.attr('arrow-end', "classic-wide-long");

                    function move(event)
                    {
                            var x = event.layerX;
                            var y = event.layerY;

                            var path = "M 250, 250, L " + x + ", " + y;                    

                            arrow.attr('path', path);
                    }

            </script>


    </body>

任何人都知道出了什么问题？

Answer 1

上面提到的工作就是这个。删除箭头，更改路径，向后添加箭头。

在此更新代码：http://jsfiddle.net/7fz5qb7e/2/

此处也找到了相同的解决方案，https://groups.google.com/forum/#!topic/raphaeljs/m-H63bb7Nsw

这里有完整的JS代码：

    <body>
            <div id="container" onmousemove="move(event)"></div>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

            <script>

                    var paper = Raphael("container", 500, 500);

                    console.log("Path redraw test");

                    var arrow = paper.path("M 250, 250, L 0, 0");
                    arrow.attr('stroke-width', 2);
                    arrow.attr('stroke', "#0000FF");
                    arrow.attr('arrow-end', "classic-wide-long");

                    function move(event)
                    {
                            var x = event.offsetX;
                            var y = event.offsetY;

                            var path = "M 250, 250, L " + x + ", " + y;                    
                            arrow.attr('arrow-end', "");
                            arrow.attr("path", path);
                            arrow.attr('arrow-end', "classic-wide-long");
                    }

            </script>


    </body>

Raphael JS动态路径更新在IE 11中无效

1 个答案: