Question

我在我的应用上实现了一项功能，该功能利用Snap.SVG创建可以拖动的矩形。这是我的代码:(我在此处上传：http://jsfiddle.net/u8vnL9tg/）

<!DOCTYPE html>
<html>
<head>
    <title>TEST WHITEOUT FEATURE</title>
    <style type="text/css">
    #mySvg{
        width: 700px;
        height: 700px;
        margin: 0 auto;
        display: block;
        border: 1px solid black;
    }
    .white-out{
        cursor: move;
    }
    </style>
</head>
<body>
    <svg id="mySvg">

    </svg>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
    <script type="text/javascript">

        var s = Snap("#mySvg");

        $('#mySvg').mousedown(function(e){
            if (e.which === 1){
                if ($(e.target).is('.white-out')){
                    return;
                } else {
                    $('#mySvg').css({
                        'cursor' : 'cell'
                    });
                    // Calculate relative mouse position
                    var offset = $('#mySvg').offset();
                    var relativeMouseX = e.pageX - offset.left;
                    var relativeMouseY = e.pageY - offset.top;
                    // Create a rectangle
                    var selectionRect = s.rect(relativeMouseX, relativeMouseY, 1, 1);
                    selectionRect.addClass('white-out');
                    $('#mySvg').on('mousemove', function(e){
                        // Calculate relative mouse position
                        var offset = $('#mySvg').offset();
                        var newRelativeMouseX = e.pageX - offset.left;
                        var newRelativeMouseY = e.pageY - offset.top;
                        var width  = Math.abs(newRelativeMouseX - relativeMouseX);
                        var height = Math.abs(newRelativeMouseY - relativeMouseY);
                        var new_x, new_y;

                        new_x = (newRelativeMouseX < relativeMouseX) ? (relativeMouseX - width) : relativeMouseX;
                        new_y = (newRelativeMouseY < relativeMouseY) ? (relativeMouseY - height) : relativeMouseY;

                        selectionRect.attr({
                            'width': width,
                            'height': height,
                            'top': new_y,
                            'left': new_x,
                            'fill': '#6699FF',
                            'opacity': 0.5
                        });
                    });

                    $('#mySvg').on('mouseup', function(e) {
                        // Unbind the mousemove event
                        $('#mySvg').off('mousemove');
                        // Set opacity to 1 - so it's really a whiteout
                        selectionRect.attr({
                            'opacity': 1
                        });
                        selectionRect.drag();
                        // Set cursor to default
                        $('#mySvg').css({
                            'cursor' : 'default'
                        }); 
                    });
                }
            }
        });
    </script>
</body>
</html>

目前，我已成功创建矩形并使其可拖动。我在这里遇到的问题是，经过一段时间（例如，超过5次）拖放一个矩形后，矩形变得越来越慢< / strong>即可。经过大约10次的拖放，它甚至几乎不动！虽然我遵循互联网上的示例和教程，尤其是SnapSVG documentation，但我不知道为什么会发生这种情况。

真的希望你们能提供帮助！非常感谢先进！

Snap.SVG - 为什么我的可拖动矩形在被拖动时变得越来越慢？

0 个答案: