创建一个网格来绘制

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

我希望它与IE7/8（因此没有HTML5 /画布）兼容。
我还希望能够存储最终绘制的图像。
网格必须能够有几种尺寸（从10x10到1000x1000，最好是更多）。可能带有放大/缩小功能。
我也希望支持所有RGB颜色
除此之外整个网格应该在一个固定的大小（即800×600）
NO FLASH 得出然而，我不知道怎么做，所以我想问问有没有人知道这样做的方式。

我一直在寻找jquery自己，虽然我不知道如何以这种方式实现它，因为我从来没有使用过它。

编辑：增加了一些要求

来源

2012-06-15 Zilarion

去一些自由职业者的网站，你可以聘请某人或你，因为这里没有人会为你编码 – 2012-06-15 10:21:00

有[sketchpad]（http://ianli.com/sketchpad/）使用[Raphael.js]（http ：//raphaeljs.com）。 –

@Somebodyisintrouble不，我希望自己做这个，因为这是我自己的项目，我希望从中学习。把它交给一些其他我必须付钱的人是一个坏主意。 – Zilarion

，如果你只想要节省绘制的图像，而不是网格线，为什么不使用的图像？

有几个图像的大小，你想要的。这样你就可以把额外的处理放在浏览器上。

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

来源

2012-06-15 10:20:29 atmd

您尚未完成第三项要求 – 2012-06-15 10:22:23

哪部分？不同大小的网格很容易完成。至于缩放，就像你说的，没有人会为你编码。 – atmd

不仅图像确实让第三部分变得困难，我不想制作超过一百万张不同的图像。由于显然，我想支持所有的RGB颜色.. – Zilarion

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

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

我将与列表中开始：

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

然后，我会创建为李行和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 ;) 
}

你需要一个循环槽的所有行和单元格，并保存在一个XML文件或东西的信息，能够保存图形的JavaScript函数。你需要一个读取xml并根据这些信息生成网格。

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

希望这可以帮助你在正确的方向。

来源

2012-06-15 11:12:15

你可以绘制任何你想要的颜色跨度
这是一个quick demo可以开始进一步发展。

来源

2012-06-15 11:34:25 skafandri

创建一个网格来绘制

回答

相关问题