Question

我正在做的是在div（“#gd_graphics_grid”）中绘制矩形，div用作像素。问题是它有点慢。在Chrome上它可能没问题（有点慢），但在IE上它是一场噩梦（我知道这是正常的，因为IE JavaScript引擎很慢）。我想知道是否有一种方法来优化这段代码（尝试但未成功）：

这是生成div的html / php：

<div id="gd_graphics">
    <p id="gd_loader">Veuillez patienter!</p>
    <div id="gd_graphics_grid">
         <?php for($row = 0; $row < 73; $row++) : ?>
         <div class="gd_grid_row">
             <?php for($block = 0; $block < 130; $block++) : ?>
             <div class="gd_grid_block"><div class="gd_grid_block_wrap"></div></div>
            <?php endfor; ?>
            <div class="gd_hidden"></div>
         </div>
         <?php endfor; ?>
    </div>
</div>

这是javascript（只有刷新的部分（这会减慢我的代码）：

function RefreshDrag()
{
    $(".gd_selected_block").removeClass("gd_selected_block");

    if(startX <= endingX)
    {
        var minX = startX;
        var maxX = endingX;
    }
    else
    {
        var minX = endingX;
        var maxX = startX;
    }

    if(startY <= endingY)
    {
        var minY = startY;
        var maxY = endingY;
    }
    else
    {
        var minY = endingY;
        var maxY = startY;
    }

    var $row = null;
    var $block = null;
    var $left = null;
    var $right = null;
    var $this = null;
    var rowIndex = null;

    $(".gd_grid_row").slice(minY, maxY+1).each(function() {
        $row = $(this);
        rowIndex = $row.index();

        if(rowIndex == minY || rowIndex == maxY)
        {
            $row.children(".gd_grid_block").slice(minX, maxX+1).find(".gd_grid_block_wrap").each(function() {
                $this = $(this);

                $this.addClass("gd_selected_block");
            });
        }
        else
        {
            $left  = $row.children(".gd_grid_block").eq(minX).find(".gd_grid_block_wrap");
            $right = $row.children(".gd_grid_block").eq(maxX).find(".gd_grid_block_wrap");

            $left.addClass("gd_selected_block");

            $right.addClass("gd_selected_block");
        }
    });

}

.gd_selected_block是一个改变div的背景颜色的类（用作一条线）。提前谢谢。

Answer 1

你为什么要这样做，2012年？

使用某些SVG库，例如Raphael或使用HTML canvas元素。

如果你想坚持自己的风格，尝试将div边框用作线条，或将img用作线条并重新定位它们，尽管我不确定你想要实现的是什么

JavaScript代码很慢（JQuery）。有没有办法优化它？

1 个答案: