-2

我正在做的是在 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 的背景颜色的类（作为一条线）。提前致谢。

4

1 回答 1

2

你为什么在 2012 年这样做？

使用一些 SVG 库，如Raphael或使用HTML 画布元素。

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

于 2012-04-26T19:53:59.507 回答