Создание сетки Pixel Art Maker - PullRequest
Новая
       5

Создание сетки Pixel Art Maker

0 голосов
/ 29 октября 2018

Я пытаюсь создать создатель пиксельной графики, чтобы пользователь мог выбрать размер сетки (или, в частности, Canvas) для работы. Однако мой код не работает - в частности, создаются строки таблицы, но на самом деле они не отображаются. Я помог мне связать свой JavaSctipt и HTML-код.

Вот мой код: 

let color = document.getElementById("colorPicker");
    let table = document.getElementById("pixelCanvas");
    let sizePicker = document.getElementById("sizePicker");
    
    let height = document.getElementById("inputHeight").value;
    let width = document.getElementById("inputWeight").value;
    makeGrid(height, width);
    
    sizePicker.addEventListener("click", (e) => {
    
      e.preventDefault();
    
      let height = document.getElementById("inputHeight").value;
      let width = document.getElementById("inputWeight").value;
      table.firstElementChild.remove();
    
      makeGrid(height, width);
    
    });
    
    function makeGrid(height, width){
    
    	for(let i=0; i<= height; i++){
    		let row = table.insertRow(i);
    		for(let j=0; j<= width; j++){
    			let cell = row.insertCell(j);
    			cell.addEventListener("click", (e) => {
    				cell.style.backgroundColor = color.value;
    			})
    		}
    	}
    
    }
     

    
<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Pixel Art Maker</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
      </head>
      <body>
    
      	<h1>Pixel Art Maker</h1>
    
      	<h2>Choose Grid Size:</h2>
      	<form id="sizePicker">
      		Grid Height:
      		<input type="number" id="inputHeight" name="height" min="1" value="1">
      		Grid Width:
      		<input type="number" id="inputWeight" name="width" min="1" value="1">
      		<input type="submit">
      	</form>
    
      	<h2>Pick A Color:</h2>
      	<input type="color" id="colorPicker">
    
      	<h2>Canvas</h2>
      	<table id="pixelCanvas">
      	</table>
    
      <script src="main.js"></script>
      </body>
    </html>

1 Ответ

0 голосов
/ 29 октября 2018

Итак, код работает, таблица создана, но вы ничего не видите, потому что нет начального стиля для ячеек. Я добавил основные стили для имитации матов. Кроме того, были две проблемы - разрывы между ячейками (фиксированные с помощью cellspacing="0") и n+1 строк / ячеек с фиксированным условием < в обоих циклах. Результат ниже: 

let color = document.getElementById("colorPicker");
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");

let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWeight").value;
makeGrid(height, width);

sizePicker.addEventListener("click", (e) => {

  e.preventDefault();

  let height = document.getElementById("inputHeight").value;
  let width = document.getElementById("inputWeight").value;
  table.firstElementChild.remove();

  makeGrid(height, width);

});

function makeGrid(height, width) {

  for (let i = 0; i < height; i++) {
    let row = table.insertRow(i);
    for (let j = 0; j < width; j++) {
      let cell = row.insertCell(j);
      cell.addEventListener("click", (e) => {
        cell.style.backgroundColor = color.value;
      })
    }
  }

}
table {
  margin: auto
}

tr:nth-child(even) td:nth-child(even),
tr:nth-child(odd) td:nth-child(odd) {
  background-color: #eee;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pixel Art Maker</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>

  <h1>Pixel Art Maker</h1>

  <h2>Choose Grid Size:</h2>
  <form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
    <input type="number" id="inputWeight" name="width" min="1" value="1">
    <input type="submit">
  </form>

  <h2>Pick A Color:</h2>
  <input type="color" id="colorPicker">

  <h2>Canvas</h2>
  <table id="pixelCanvas" cellspacing="0">
  </table>

  <script src="main.js"></script>
</body>

</html>

Кроме того, вы должны попытаться заполнить ячейки в событии mousemove, после срабатывания mousedown и до mouseup, или, по крайней мере, увеличить ячейки, так как нажатие на ячейки 1px не очень просто.

Между тем, это хорошо для обучения, но в дальнейшем я бы рекомендовал перейти с canvas, так как огромные таблицы не очень хороши с точки зрения производительности и эффективности памяти.

...