創建一個網格來繪製

我想在我的網站上創建一個網格，您可以通過某種方式繪製網格。然而有一些問題：創建一個網格來繪製

我希望它與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

創建一個網格來繪製

回答

相關問題