1

我正在制作一个简单的 HTML5 应用程序，它将被包装以在 Android、iOS 和网络浏览器上使用。在我的应用程序中，我需要以某种方式拖动和排序一组点，我将 raphael.js 用于动画和 movememts，它适用于 3 或 4 个圆圈，但是当我使用更多时，会出现延迟性能（移动浏览器）。我还需要该应用程序能够像标记一样徒手绘制线条，并且我使用的代码是指拖动到，因此性能很糟糕。有趣的是，第一个动作效果很好，当我移动更多元素时，性能急剧下降。它在 pc 浏览器中运行良好，但在移动浏览器上运行 3 或 4 次移动正常。

有没有办法让大量元素的拖放运行快速流畅？

这是代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Drag-n-drop</title>
        <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="apple-touch-icon-precomposed" href="/Raphael.png">
        <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
        <style>
        #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}
</style>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="raphael-min.js"></script>
        <script>    
            window.onload = function () {
                var y = $(window).height();
                var x = $(window).width();
                y=y/30;
                var posX=y;
                var posY=y;
                var posX2=x-y;
                var R = Raphael(0, 0, "100%", "100%");
                var nJ=10
                var jugador=new Array();
                var rival=new Array();
                crearJugadores(nJ);
                crearRivales(nJ);
                function crearJugadores(nJ) {
                    nJ=nJ;
                    for (var i=0;i<nJ;i++)
                    {
                        jugador[i]= R.circle(posX, posY, y).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5});
                        posY=posY+(2*y);
                        };
                };
                function crearRivales(nJ) {
                    posX=x-y;
                    posY=y;
                    nJ=nJ;
                    for (var i=0;i<nJ;i++)
                    {
                        rival[i]= R.circle(posX, posY, y).attr({fill: "#214dcf", stroke: "none", opacity: .5});
                        posY=posY+(2*y);
                        };
                };
                var start = function () {
                    this.ox = this.attr("cx");
                    this.oy = this.attr("cy");
                    this.animate({r: (1.5*y), opacity: .3}, 100, ">");
                },
                move = function (dx, dy) {
                    this.attr({cx: this.ox + dx, cy: this.oy + dy});
                },
                up = function () {
                    this.animate({r: y, opacity: 1}, 500, ">");
                };
                R.set(rival).drag(move, start, up);
                R.set(jugador).drag(move, start, up);
                initDrawing(R);
                };




                        var g_masterPathArray;
                        var g_masterDrawingBox;
                        var g_masterPaper;

                        function initDrawing(R) {
                                g_masterPaper = R;

                                var masterBackground = g_masterPaper.rect(0,0,"100%","100%");
                                masterBackground.attr({fill:"blue", opacity: 0});
                                masterBackground.mousemove(function (event) {
                                        var evt = event;
                                        var IE = document.all?true:false;
                                        var x, y;
                                        if (IE) {
                                                x = evt.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
                                                y = evt.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
                                        }
                                        else {
                                                x = evt.pageX;
                                                y = evt.pageY;
                                        }

                                        // subtract paper coords on page
                                        this.ox = x;
                                        this.oy = y;
                                });

                                var start = function () {
                                        g_masterPathArray = new Array();
                                },
                                move = function (dx, dy) {
                                        if (g_masterPathArray.length == 0) {
                                                g_masterPathArray[0] = ["M",this.ox,this.oy];
                                                g_masterDrawingBox = g_masterPaper.path(g_masterPathArray);
                                                g_masterDrawingBox.attr({stroke: "#000000","stroke-width": 3});
                                        }
                                        else
                                                g_masterPathArray[g_masterPathArray.length] =
["L",this.ox,this.oy];

                                        g_masterDrawingBox.attr({path: g_masterPathArray});
                                },
                                up = function () {
                                        ;
                                };

                                masterBackground.drag(move, start, up);

                            masterBackground.toBack();

                                }




                </script>
    </head>
    <body>
    <div id="background">
    <img src="cancha.jpg" class="stretch" alt="" />
</div>
        <div id="holder"></div>
    </body>
</html>

有任何想法吗？？

谢谢

4

0 回答 0