Question

我想在我的网站上创建一个网格，您可以以某种方式绘制。但是有一些问题：

我希望它与IE7 / 8兼容（因此没有HTML5 / canvas）。
我还希望能够存储最终绘制的图像。
网格必须能够具有多种尺寸（从10x10到1000x1000甚至更多）。可能有放大/缩小功能。
我也想支持所有RGB颜色
除此之外，整个网格应以固定尺寸（即800x600）
没有闪光但是我不知道该怎么做，因此我想问一下是否有人知道这样做的方法。

我自己一直在关注jquery，虽然我不知道如何以这种方式实现它，因为我之前从未使用它。

编辑：增加了一些要求

Answer 1

如果您只想保存绘制的图像而不是网格线，为什么不使用图像？

拥有您想要的尺寸的多张图片。这样你就不会在浏览器上添加额外的处理。

您可以使用较小网格尺寸的图像并在背景上平铺/重复它。应该是一个相当小的图像和快速负载

Answer 2

如果我理解正确;你想要一个带有单元格的网格，用户可以选择一种颜色来拖动/移动单元格来绘制一些东西。然后当用户满意时，他们必须能够保存图片以便以后继续使用..

如果是我的项目（jQuery和CSS），我将描述我会做什么。

我会从列表开始：

<ul id="grid"></ul>

然后我将为行创建网格，为单元格创建div的div。您可以使用CSS和jQuery设置单元格的大小和颜色。

以下是生成网格和单元格事件的简单示例。

function createGrid() {
    $('#grid').html('');

    for(var row = 0; row < total_rows; row++) {
        $('#grid').append('<li id="row_' + row + '"></li>');
        var current_row = $('#row_' + row);

        for(cell = 0; cell < total_cells; cell++) {
            $(current_row).append('<div id="cell_' + cell + '" class="cell"></div>');

            //set events
            $('#cell_' + cell).mouseenter(paint_cell);
        }
    }
}

function paint_cell(event) {
    //mouse down?
    if(event.which==1) {
        //give it a color
        $(this).addClass('red');
    }
}

简单的CSS：

.cell {
    float: left;
    width: 20px;
    height: 20px;
    background: white;
}

.cell .red {
    background: red; //all the rgb you want ;)
}

你需要一个循环遍历所有行和单元格的javascript函数，并将信息保存在xml文件中，或者能够保存图形。你需要一个人来读取xml并根据信息生成网格。

对于bullit 5;你可以将网格包装在div中，并将宽度和高度设置为800x600，将CSS设置为溢出：滚动。

希望这能帮助你朝着正确的方向前进。

Answer 3

你可以用彩色画面绘制任何你想要的东西这是一个quick demo，可以作为进一步发展的开始。

创建要绘制的网格

3 个答案: