Vanilla Javascript: Как сделать так, чтобы ячейки были разными цветами на сетке с помощью пользовательского ввода цвета - PullRequest
Новая
       39

Vanilla Javascript: Как сделать так, чтобы ячейки были разными цветами на сетке с помощью пользовательского ввода цвета

0 голосов
/ 08 сентября 2018

Что я строю

Привет, ребята! Я создаю Pixel Art Maker.

Это в основном сетка, и каждая ячейка в сетке меняет цвет, когда вы нажимаете на нее.

Это приложение, которое должно учитывать разные цвета на одном и том же холсте.

Проблема:

Как разрешить использовать несколько разных цветов в одной сетке с помощью выбранного пользователем цвета?

Я знаю, как сделать все это черным, например (сейчас он жестко запрограммирован), но если я хочу добавить больше цветов, как мне это сделать?

JS Fiddle Demo

https://jsfiddle.net/JayS5/foznjb2m/

Код JS 

const canvas = document.querySelector('#pixelCanvas')

const tbody = document.createElement('tbody');

canvas.addEventListener('click', function(e){
  e.target.style.background = 'black';
});

canvas.addEventListener('dblclick', function(e){
  e.target.style.backgroundColor = 'white';
});

// Store the value of columns
const column = document.getElementById('column');

// Store the value of rows
const row = document.getElementById('row');

// Access forms
const submitForm = document.querySelector('#submitForm');

submitForm.addEventListener('submit', function(e){
  e.preventDefault();  // Prevents the submit button from refreshing the page by default
  tbody.innerHTML = "";

  // Color picker

  const colorPicker = document.createElement('div');
  colorPicker.setAttribute("id", "ActiveColor")

  colorPicker.innerHTML = '<input type="color" id="head" name="color" value="#e66465"/>';

  document.body.appendChild(colorPicker);

  // Generate grid

  for (r = 0; r < row.value; r++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);
    for (c = 0; c < column.value; c++) {
      const td = document.createElement('td');
      tr.appendChild(td);
    } 
    canvas.appendChild(tbody);  
  }
});

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Вы можете добавить событие onchange и записать цвет в глобальный переменный цвет 

  colorPicker.onchange = function (e) {
    color = e.target.value
  }

Полный код

0 голосов
/ 08 сентября 2018

Вероятно, было бы лучше поместить элемент ввода средства выбора цвета в HTML в начале, чтобы вы могли выбрать его на верхнем уровне без переназначения.Когда форма будет отправлена, сделайте ее видимой.Затем, по щелчку, просто откройте value этого элемента и присвойте его свойству background: 

const colorInput = document.querySelector('input[type="color"]');
canvas.addEventListener('click', function(e) {
  e.target.style.background = colorInput.value;
});


const canvas = document.querySelector('#pixelCanvas')
const tbody = document.createElement('tbody');
const colorInput = document.querySelector('input[type="color"]');
canvas.addEventListener('click', function(e) {
  e.target.style.background = colorInput.value;
});

canvas.addEventListener('dblclick', function(e) {
  e.target.style.backgroundColor = 'white';
});


const column = document.getElementById('column');
const row = document.getElementById('row');
const submitForm = document.querySelector('#submitForm');

submitForm.addEventListener('submit', function(e) {
  e.preventDefault(); // Prevents the submit button from refreshing the page by default
  colorInput.style.display = 'inline';
  tbody.innerHTML = "";
  // Generate grid

  for (r = 0; r < row.value; r++) {
    const tr = document.createElement('tr');
    tbody.appendChild(tr);
    for (c = 0; c < column.value; c++) {
      const td = document.createElement('td');
      tr.appendChild(td);
    }
    canvas.appendChild(tbody);
  }
});
/**
 * index.scss
 * - Add any styles you want here!
 */

body {
  background: #f5f5f5;
}

table,
thead,
tbody,
tfoot,
tr,
td {
  border-collapse: collapse;
  border: 3px solid black;
}

td {
  width: 30px;
}

tr {
  height: 30px;
}
input[type="color"] {
  display: none;
}
<h1>
  Pixel Art Maker</h1>

<fieldset>
  <legend>Grid Size</legend>

  <form id='submitForm'>

    <label for="height">Columns:</label>
    <input type="number" id="column" placeholder="Key in an integer" step="1" />

    <label for="width">Rows:</label>
    <input type="number" id="row" placeholder="Min: 1, max: 100" min="1" max="100" />

    <div>
      <input type="submit" id="submit" value="Submit" />
    </div>
  </form>
</fieldset>

<br>

<br>

<div>
  <table id="pixelCanvas">
    <!--  Dynamic pixel canvas  -->
  </table>
</div>
<div>
  <input type="color" value="#e66465" />
</div>
...