2

Всем привет. Столкнулся со следующей проблемой. Я хочу по нажатию на кнопки рисовать соответствующие фигуры в canvas. Например, нажал на кнопку линии, и теперь я могу рисовать линии с помощью курсора ну и т.д. Для этого имеется класс active, и при нажатии на какую-либо кнопку, ей добавляется этот класс, а у других кнопок, соответственно удаляется. Я выполняю проверку с помощью if, типа если у кнопки имеется класс active, то рисуем её фигуры. Проблема в том, что условие почему-то не действует. У меня по дефолту active стоит на кнопке lineRadioBtn, если жму на circleRadioBtn, то класс active удаляется у кнопки линии и добавляется кнопки кругу, но в canvas линия всё равно рисуется. Т.е. по идеи условие if(lineRadioBtn.classList.contains('active')) теперь должно не выполняться, так как active теперь у кнопки круга. В общем помогите пожалуйста, а то я не понимаю что тут не так. Заранее спасибо P.s. все кнопки по селекторам в js получил

lineRadioBtn.addEventListener('click', function(){ 
    this.classList.add('active');
    circleRadioBtn.classList.remove('active');
    dotRadioBtn.classList.remove('active');
    eraser.classList.remove('active');
});
circleRadioBtn.addEventListener('click', function(){ 
    this.classList.add('active');
    lineRadioBtn.classList.remove('active');
    dotRadioBtn.classList.remove('active');
    eraser.classList.remove('active');
});

if(lineRadioBtn.classList.contains('active')){
    canvas.style.cursor = 'crosshair';
    canvas.addEventListener('mousemove', e =>{
        if(ifMouseDown){
            ctx.fillStyle = generalColor.value;
            ctx.strokeStyle = generalColor.value;
            ctx.lineWidth = generalSize.value * 2;
            ctx.lineTo(e.clientX, e.clientY);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(e.clientX, e.clientY, generalSize.value, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.moveTo(e.clientX, e.clientY);
        }   
    });
}
<div style="display: flex; flex-wrap: wrap; width: inherit;">
                <input type="button" class="check-shapes line-radio-item active" title="Рисовать линиями" value="Линии" />
                <input type="button" class="check-shapes circle-radio-item" title="Рисовать окружностями" value="Круги" />
                <input type="button" class="check-shapes dot-radio-item" title="Рисовать точками" value="Точки" />
                <input type="button" class="check-shapes eraser" value="Ластик" title="Ластик" id="color"/>
            </div>

1 ответ 1

1

"Ветер дует, оттого что деревья качаются?" О.Генри "Вождь краснокожих"

//if(lineRadioBtn.classList.contains('active')){
canvas.style.cursor = 'crosshair';
canvas.addEventListener('mousemove', e =>{
  if (lineRadioBtn.classList.contains('active')){
    ...
2
  • Спасибо большое, глупая на самом деле ошибка, мог бы и сам догадаться. У меня 8 час утра уже просто - не вывожу :) Commented 18 авг. 2020 в 2:20
  • @ВитяГулак Пожалуйста. Успехов.
    – user176262
    Commented 18 авг. 2020 в 2:26

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.