需要帮助创建一个绘图工具，用于在 Javascript 中使用鼠标拖放进行像素绘图

Question

嘿嘿！我是一个玩 DOM 的 JavaScript 初学者，我目前面临一个问题，我一直无法找到解决方案。我想要的是将每个 square div 绘制为像素/单元格，并且只要您单击和/或拖动鼠标，它就会像标准绘画应用程序一样更改每个 div 的背景颜色。在下面的第一个代码块中，我最终使用了它，但它不是我想要的，它只能通过一个一个地单击来绘制每个单独的像素/单元格。我尝试使用

EventListener

和

onmousedown

或

mouseover

嵌套在

EventListener

和

Click

中。然而，这是不成功的。我曾希望在点击之后，下一个

EventListener

会被检测到，这样我就可以像许多其他标准绘图应用程序一样进行绘图。如果有人指出我正确的方向，我将不胜感激。

 document.querySelectorAll(".PixelBoxes").forEach(element => {
    element.addEventListener("click", () => {
        console.log(colorPicker.color.hexString);
        element.style.backgroundColor = colorPicker.color.hexString;
    })
  });

这是我之前试图描述的凌乱的不成功代码。

element.addEventListener("click", () => {
    console.log(colorPicker.color.hexString);
    element.style.backgroundColor = colorPicker.color.hexString;

    document.querySelectorAll(".PixelBoxes").forEach( element => {
        element.addEventListener("mouseover", () => {
          element.style.backgroundColor = colorPicker.color.hexString;
        })
    })
}

这是我的 codepen，可以查看所有工作，我正在处理的与这篇文章相关的部分位于 JS 部分的第 126 行（CSS 响应式设计可能有点不稳定）：https://codepen.io/DawnofSouls/pen /GRXeQRo

如前所述，我想要的是像许多标准绘图应用程序一样创建某种绘图功能。起初，我尝试在

onmousedown

中放置一个

mouseover

或

eventlisten click

来实现标准的画笔/铅笔工具，但最终无法按我想要的方式工作。即使在松开鼠标后，它也会不停地绘制每个像素。

谢谢！ :D

Answer 1

这里没有判断，只有提示可以帮助您；）

开始时你需要做伪代码，并实现你需要在开始键入和调试时避免意大利面条代码的功能。 如果愿意，可以创建一个“the_thing_i_want_to_do”库。

您需要检测 clic 何时发布并仅在 clic 开启时应用颜色，例如：

    var mouseDown = 0;
    document.body.onmousedown = function() { 
      ++mouseDown;
    }
    document.body.onmouseup = function() {
      --mouseDown;
    }

所以里面：

element.addEventListener("mouseover", () => {

你可以这样使用它：

    if(mouseDown){
  // change color of destination 
    }