时间戳

首页 > 解决方案 > 单击另一支笔后，JavaScript Etch-a-Sketch 着色笔停止增加不透明度

javascript - 单击另一支笔后，JavaScript Etch-a-Sketch 着色笔停止增加不透明度

问题描述

我正在使用 HTML、CSS 和 JavaScript为 Odin 项目创建 Etch-a-Sketch 。我已经实现的“着色笔”的 JavaScript 遇到了一些困难。

注意：不要将本问题中描述的“笔”与代码笔混淆。

有两支笔：一支将单元格变为黑色的黑色笔和一支着色笔，在第一次通过时，将单元格变为黑色，但将不透明度更改为 0.1，使其几乎透明。这会产生轻微变暗的错觉，因为单元格后面的背景与单元格的原始颜色相同。在使用着色笔的每个后续通道之后，不透明度增加 0.1。

着色笔是默认笔。起初它工作正常，但是当我单击黑色笔然后回到着色笔时，着色笔增加一次不透明度并停止。它还覆盖了黑色单元格。

这是我设置笔的方法：

makeGrid(16); // generate grid
pen("shader"); // default pen: shader

document.querySelector('#black').addEventListener("click", e => pen("black"));
document.querySelector('#shader').addEventListener("click", e => pen("shader"));

function pen(selected) {
  let cells = document.querySelectorAll('div.cell');
  cells.forEach(cell => {
    cell.addEventListener('mouseover', function(e) {
      if (selected == "black") {
        // turns cell black
        cell.classList.remove('shade');
        cell.style.backgroundColor = '#101010';
        cell.style.opacity = '1';
        console.log('Make cell black')
      } else if (selected == "shader") {
        let opacity = cell.style.opacity;
        if (cell.classList.contains("shade")) {
          // increases opacity by 0.1
          cell.style.opacity = (Number(opacity) + 0.1);
          console.log('If there is shade, increase opacity.')
        } else {
          // turns cell to 0.1 opacity
          cell.classList.add('shade');
          cell.setAttribute('style', 'opacity:0.1');
          cell.style.backgroundColor = '#101010';
          console.log('Else, add shade class.')
        }
      }
    })
  });
}

我在每个条件块中使用语句运行此代码，console.log当我回到使用着色笔时，看起来黑色笔仍在运行。我最好的猜测是这就是导致问题的原因，但我不确定如何解决它。

我已经用其余的代码创建了一个CodePen ，这样你就可以看到它的实际效果。如前所述，默认笔是着色器。它在开始时按预期工作，但在选择黑笔后才停止。

任何帮助或指导将不胜感激。

标签： javascripthtmlcss

解决方案

您的代码有很多问题，主要问题是当您更改笔类型时（当您调用pen()函数时）您添加了一个新的mouseover事件侦听器。

让我们来看看

您的代码首先调用pen('shader')设置shader默认笔类型

pen("shader");

让我们看看pen()定义

function pen(selected) {
  let cells = document.querySelectorAll('div.cell');
  cells.forEach(cell => {    
    cell.addEventListener('mouseover', function(e){     
       ...
    })  
  });
}

现在，当您将鼠标悬停在单元格上时，事件侦听器获取字符串shader并关闭该实例（这称为闭包） ，笔类型将是shader

现在，当您选择黑色笔时，您pen()再次调用该函数，添加一组新的事件侦听器。

这不会用新的事件侦听器替换旧的事件侦听器，它会将它们堆叠起来，就像一个接一个地调用两个函数一样。

现在，当您将鼠标悬停在单元格上时，第一个带有笔类型的事件侦听器shader将触发，然后第二个带有黑色笔的事件侦听器将在它之后触发，您可以在控制台中看到这一点，您会看到两个 if 语句条件都打印了两条消息。

现在，当您shader再次选择添加一组具有着色笔类型的新事件侦听器时，发生的情况是第一个事件侦听器将触发设置不透明度为 0.1，然后是黑色的删除阴影类，然后是第三个侦听器再次检查如果单元格的类阴影if(cell.classList.contains("shade"))为假，则下降到最后一个 else 语句。

有很多方法可以解决这个问题，但鉴于你是初学者，我会给你简单的解决方案

  • 首先使笔类型成为全局变量，然后在每个按钮上单击更改它

  • 其次，在代码开始时向所有 cels 添加一个事件侦听器，并让它们检查全局变量

演示

let penType = 'shader';

makeGrid(4); // generate grid


document.querySelector('#black').addEventListener("click", e => penType = "black");
document.querySelector('#shader').addEventListener("click", e => penType = "shader");



// generate grid
function makeGrid(dimension) {
  const canvas = document.querySelector('#canvas');
  const canvasWidth = document.getElementById("canvas").offsetWidth;
  const cellWidth = canvasWidth / dimension;

  for (let x = 1; x <= dimension * dimension; x++) {
    const makeCell = document.createElement('div');
    makeCell.classList.add('cell');
    canvas.appendChild(makeCell);
  };

  canvas.style.gridTemplateRows = `repeat(${dimension}, ${cellWidth}px [row-start]`;
  canvas.style.gridTemplateColumns = `repeat(${dimension}, ${cellWidth}px [column-start]`;


  // after all cells have been generated add the event listener
  // this is not the most optimize version of this but it gets the job done
  let cells = document.querySelectorAll('div.cell');
  cells.forEach(cell => {
    cell.addEventListener('mouseover', function(e) {
      console.log(penType)
      if (penType == "black") { // turns cell black
        cell.classList.remove('shade');
        cell.style.backgroundColor = '#101010';
        cell.style.opacity = '1';
        console.log('Make cell black')
      } else if (penType == "shader") { // turns cell 0.1
        let opacity = cell.style.opacity;
        if (cell.classList.contains("shade")) {
          cell.style.opacity = (Number(opacity) + 0.1);
          console.log('If there is shade, increase opacity.')
        } else {
          cell.classList.add('shade');
          cell.setAttribute('style', 'opacity:0.1');
          cell.style.backgroundColor = '#101010';
          console.log('Else, add shade class.')
        }
      }
    })
  });
}
body {
  margin: 0;
  background-color: #514c53;
  color: #fff;
  font-size: 18pt;
}


/* DIV STYLING */

#container {
  margin: 20px auto;
  max-width: 400px;
  display: flex;
  flex-wrap: wrap;
}

.full {
  width: 100%;
}

.left {
  width: 75%;
  margin-top: 15px;
}

.right {
  width: 25%;
  text-align: right;
}

#canvas {
  display: grid;
  flex-wrap: wrap;
  grid-template-rows: repeat(16, 30px [row-start]);
  grid-template-columns: repeat(16, 30px [col-start]);
  background: #e8dfd6;
}

.cell {
  background: #e8dfd6;
}


/* CELL SHADING */

.black {
  background-color: #101010;
}

.shade {
  background-color: #101010;
  width: 100%;
  height: 100%;
}


/* ELEMENT STYLING */

button {
  font-weight: 700;
  margin: 10px 0;
  background-color: #b9967d;
  color: #fff;
  padding: 0px 15px;
  text-shadow: 1px 1px #2e2e2e;
  box-shadow: 3px 3px #2e2e2e;
  border-radius: 5px;
  border: 0px;
  text-transform: uppercase;
  height: 30px;
  outline: none;
  transition: 0.3s;
}

button:hover {
  cursor: pointer;
  background-color: #aa8062;
  box-shadow: 0px -3px #2e2e2e;
}

button:active {
  background-color: #997963;
}

.circle {
  float: left;
  height: 15px;
  width: 15px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: 1px 5px 0 0;
}

.circle:hover {
  cursor: pointer;
  /*transition: 0.3s; 
  border: 2px solid #fff;*/
}

.meaning {
  float: left;
  font-size: .542em;
  text-transform: uppercase;
  padding-top: 2px;
  margin-right: 10px;
}

#black {
  background-color: #101010;
}

#shader {
  background-image: linear-gradient(#807b76, #dfd8d0);
}
<div id="container">
  <div class="left" style="margin-bottom:10px">
    <div class="circle" id="black"></div>
    <div class="meaning">Black</div>
    <div class="circle" id="shader"></div>
    <div class="meaning">Shader</div>
  </div>
  <div id="canvas" class="full">
    <!--grid generates here-->
  </div>
</div>
<!--container-->

您的逻辑有一个小问题，当您使用黑色笔时，您不必删除阴影类，因为当您回到阴影笔并将鼠标悬停在黑色单元格上时，它会将不透明度设置回0.1

推荐阅读