Question

使用下面的代码绘制超过~5 + SVG行会在移动元素时使性能不稳定，尤其是在绘制长SVG线时。这只是一个自然的SVG性能限制（因为svg画布大小）还是我的代码有些可疑？

这里的项目可以在这里看到（到目前为止只支持Chrome和Firefox，请查看左下角的fps，尝试展开对象，启动时得到~14 fps）：http://www.nada.kth.se/~benned/celestial/

一些解释：

SVG.rootElement是一个大型（100％* 100％）svg元素，由jQuery.svg在所有HTML下创建。 elem1和elem2是可拖动的HTML元素，而不是SVG元素。我用一条SVG线连接elem1和elem2，当它们移动时，该线跟随。如果没有绘制SVG，性能就是完美的。

Javascript代码（启动新的SVG行，将其连接到两个HTML元素并添加事件侦听器）：

addLine = function(elem1, elem2) {

    var mouseEvent = function(i, elem) {

        var mouseDown = function(e) {
            document.addEventListener('mousemove', mouseMove, false);
            document.addEventListener('mouseup', mouseUp, false);               
        }

        var mouseMove = function(e) {
            line.setAttribute(xi, elem.style.left);
            line.setAttribute(yi, elem.style.top);
        }

        var mouseUp = function(e) {
            document.removeEventListener('mousemove', mouseMove, false);
            document.removeEventListener('mouseup', mouseUp, false);
        }

        var xi = "x"+i;
        var yi = "y"+i;
        mouseMove(); // sets initial position
        return mouseDown;
    }

    var elem1 = document.getElementById(elem1);
    var elem2 = document.getElementById(elem2);
    var line = SVG.rootElement.line(0, 0, 0, 0, {stroke:"#aa0000", strokeWidth:"5", opacity:.3});

    elem1.addEventListener('mousedown', mouseEvent(1, elem1), false);
    elem2.addEventListener('mousedown', mouseEvent(2, elem2), false);
}

Answer 1

问题解决了！您不应该使用内置的opacity属性。看起来像不透明度（SVG，CSS3以及CSS3中的box-shadow）真的搞砸了javascript性能大的时间！

SVG问题;更新移动元素是CHOPPY，为什么？

1 个答案: