-2

私がやっていることは、ピクセルとして機能する div ("#gd_graphics_grid") に四角形を描画することです。問題は、それがちょっと遅いことです。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年になぜこれをしているのですか？

Raphaelなどの SVG ライブラリを使用するか、 HTML キャンバス要素を使用します。

あなたのスタイルに固執したい場合は、divの境界線を線として使用するか、imgを線として使用して再配置してみてください。ただし、正確に何を達成しようとしているのかはわかりません

于 2012-04-26T19:53:59.507 に答える