Question

我想从颜色选择器中选择颜色，然后在画布上绘制该颜色。我收到错误消息：

Uncaught TypeError: colors.addEventListener is not a function
at window.onload

我使用npm color picker。

在调用函数时出现错误：

colors.addEventListener('click', function(event)

我的html：

  <div class="picker"
       acp-color="#EFE9E7"
       acp-palette="#f44336|#e91e63|#9c27b0|#673ab7|#3f51b5|#2196f3|#03a9f4|#00bcd4|
     #009688|#4caf50|#8bc34a|#cddc39|#cddc39|#ffeb3b|#ffc107|#ff9800|#ff5722|#795548|#9e9e9e|#20707|#befe7ee|#9e9e9e|#9e9e5e|#9e4e9e">
  </div>

  <div class="right-block">
    <canvas id="paint-canvas" width="640" height="400"></canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/a-color-picker@1.1.8/dist/acolorpicker.js"></script>
  <script src="./paint.js"></script>

我的js代码

var colors="#f44336";

AColorPicker.from('.picker')
    .on('change', (picker, color) => {
        colors= color;

    });



var canvas = document.getElementById("paint-canvas");
var context = canvas.getContext("2d");
var boundings = canvas.getBoundingClientRect();



window.onload = function () {

    // Definitions


    // Specifications
    var mouseX = 0;
    var mouseY = 0;
    context.strokeStyle = 'black'; // initial brush color
    context.lineWidth = 1; // initial brush width
    var isDrawing = false;

    loadInput.addEventListener('change', (event) => this.load(event));

    // Handle Colors


    colors.addEventListener('click', function(event) {
        context.strokeStyle = event.target.value || 'black';
    });

    // Mouse Down Event
    canvas.addEventListener('mousedown', function(event) {
        setMouseCoordinates(event);
        isDrawing = true;

        // Start Drawing
        context.beginPath();
        context.moveTo(mouseX, mouseY);
    });

    // Mouse Move Event
    canvas.addEventListener('mousemove', function(event) {
        setMouseCoordinates(event);

        if(isDrawing){
            context.lineTo(mouseX, mouseY);
            context.stroke();
        }
    });




    // Mouse Up Event
    canvas.addEventListener('mouseup', function(event) {
        setMouseCoordinates(event);
        isDrawing = false;
    });

    // Handle Mouse Coordinates
    function setMouseCoordinates(event) {
        mouseX = event.clientX - boundings.left;
        mouseY = event.clientY - boundings.top;
    }

};

Answer 1

您不能将事件侦听器添加到字符串。

var colors="#f44336";

colors.addEventListener('click', function(event) {
        context.strokeStyle = event.target.value || 'black';
    });

字符串没有此方法。根据假设，在发生更改事件的选择器之后，它仍然是字符串。

Answer 2

问题是，当事件触发时，您需要更改context.strokeColor，因为拾取时颜色会发生变化，因此您应该创建AColorPciker元素的引用，并在事件发生时使用其事件发射器您的文档已加载

然后，您可以轻松更改strokeColor，希望这对您有用。

我正在添加已编辑的脚本，该脚本应该对您有用。

// Initializing the color picker reference
var colorPicker = AColorPicker.from('.picker');



var canvas = document.getElementById("paint-canvas");
var context = canvas.getContext("2d");
var boundings = canvas.getBoundingClientRect();


window.onload = function () {

    // Definitions


    // Specifications
    var mouseX = 0;
    var mouseY = 0;
    context.strokeStyle = 'black'; // initial brush color
    context.lineWidth = 1; // initial brush width
    var isDrawing = false;

    // Here I am using the refernce of AColorPicker to set the context Stroke color, when the change is emitted on the color change
    colorPicker.on('change', (picker, color) => {
      context.strokeStyle = color;
    });



    // Mouse Down Event
    canvas.addEventListener('mousedown', function(event) {
        setMouseCoordinates(event);
        isDrawing = true;

        // Start Drawing
        context.beginPath();
        context.moveTo(mouseX, mouseY);
    });

    // Mouse Move Event
    canvas.addEventListener('mousemove', function(event) {
        setMouseCoordinates(event);

        if(isDrawing){
            context.lineTo(mouseX, mouseY);
            context.stroke();
        }
    });




    // Mouse Up Event
    canvas.addEventListener('mouseup', function(event) {
        setMouseCoordinates(event);
        isDrawing = false;
    });

    // Handle Mouse Coordinates
    function setMouseCoordinates(event) {
        mouseX = event.clientX - boundings.left;
        mouseY = event.clientY - boundings.top;
    }


};

出现错误“ addEventListener不是函数”

2 个答案: