3

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

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

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

编辑：增加了一些要求

4

3 回答 3

0

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

有几个你想要的大小的图像。这样你就不会在浏览器上进行额外的处理。

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

于 2012-06-15T10:20:29.420 回答
0

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

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

我将从一个列表开始：

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

然后我会用 li 为行创建网格，用 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 并根据信息生成网格。

对于第 5 条；您可以将网格包装在一个 div 中，并将宽度和高度设置为 800x600 并将 CSS 溢出：滚动。

希望这可以帮助您朝着正确的方向前进。

于 2012-06-15T11:12:15.077 回答
0

您可以使用彩色跨度绘制任何您想要的东西
这是一个快速演示，可以作为进一步开发的开始。

于 2012-06-15T11:34:25.457 回答