3

делаю аналог Paint используя canvas. Самые простые функции он уже исполняет, но никак не могу придумать реализацию инструмента 'заливка'(залить надо не обязательно фон, а к примеру любую неправильную фигуру), а так же отмена действия. Вот код:

 const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let isMouseDown = false;

const type = document.getElementById('type');
const clear = document.getElementById('clear');
const range = document.getElementById('size');
const range2 = document.getElementById('size2');
const fill = document.getElementById('fill');
const save = document.getElementById('save');
const label = document.getElementById('lb1');
const label2 = document.getElementById('lb2');
const border = document.getElementById('border');
const label3 = document.getElementById('lb3');
const weight = document.getElementById('weight');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvas.addEventListener('mousedown', function(e) {
    isMouseDown = true;
    draw(e);
});
canvas.addEventListener('mousemove', function(e) {
    if (isMouseDown) {       
        draw(e);       
    }   
});
canvas.addEventListener('mouseup', function() {
    isMouseDown = false;
    context.beginPath();
});
canvas.addEventListener('mouseout', function() {
    isMouseDown = false;
    context.beginPath();
});


clear.onclick = function() {
    clearCanvas();
}

function clearCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
}

type.addEventListener('change', () => {
    if (type.value == 'ractangle') {
        range2.classList.add('size-active');
        label2.classList.add('label-active');
        label.innerHTML = 'Ширина';
    } else {
        range2.classList.remove('size-active');
        label2.classList.remove('label-active');
        label.innerHTML = 'Размер';
    }
});
border.addEventListener('change', () => {
    if (border.value == 'border') {
        weight.classList.add('weight-active');
        label3.classList.add('label-active');
    } else {
        weight.classList.remove('weight-active');
        label3.classList.remove('label-active');
    }
});
function draw(e) {    
    switch (type.value) {
        case 'circle' :
            context.beginPath();
            switch (border.value) {
                case ('fill') :
                context.fillStyle = fill.value;
                context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
                context.fill();
                break;
                case ('border') :
                    context.lineWidth = weight.value;
                    context.strokeStyle = fill.value;
                    context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
                    context.stroke();
                break;    
            }                  
        break;
        case 'line' :
            context.lineWidth = range.value;
            context.strokeStyle = fill.value;
            context.lineTo(e.clientX, e.clientY - 30);
            context.stroke();

            context.beginPath();
            context.fillStyle = fill.value;
            context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
            context.fill();

            context.beginPath();
            context.moveTo(e.clientX, e.clientY - 30);
        break;
        case 'square' :
            context.beginPath();
            switch (border.value) {
                case ('fill') : 
                    context.fillStyle = fill.value;
                    context.fillRect(e.clientX - range.value / 2, e.clientY - (30 + range.value / 2), range.value, range.value);
                break;
                case ('border') : 
                    context.lineWidth = weight.value;
                    context.strokeStyle = fill.value;
                    context.strokeRect(e.clientX - range.value / 2, e.clientY - (30 + range.value / 2), range.value, range.value);
                break;
            }

        break;
        case 'rubber' :
            context.beginPath();
            context.fillStyle = 'white';
            context.arc(e.clientX, e.clientY - 30, range.value / 2, 0, Math.PI * 2);
            context.fill();
        break;
        case 'ractangle' :
            context.beginPath();
            switch (border.value) {
                case ('fill') :
                    context.fillStyle = fill.value;
                    context.fillRect(e.clientX - range.value / 2, e.clientY - range2.value / 2 - 30, range.value, range2.value);
                break;
                case ('border') :
                    context.lineWidth = weight.value;
                    context.strokeStyle = fill.value;
                    context.strokeRect(e.clientX - range.value / 2, e.clientY - range2.value / 2 - 30, range.value, range2.value);
                break;
            }

        break;
    }  
}

Мне бы хотя бы подсказать логику реализации.

3
  • Буду честен, я не разбираюсь особо в этой теме, но 5-ти минутные поиски дали следующий результат, github.com/1j01/jspaint/blob/… по ссылке вы увидите код именно заливки для MS Paint is a online который вы можете увидеть по ссылке jspaint.app Надеюсь я помог вам найти ответ на ваш вопрос.
    – Ceri
    3 мая 2020 в 11:56
  • 1
    jsfiddle.net/SSh2C 3 мая 2020 в 11:58
  • @StrangerintheQ спасибо
    – Arkadii
    3 мая 2020 в 12:12

1 ответ 1

0

Посмотрите этот gist, писал подобное ранее...

const inRange = (x,y) => {
  if (x < 0 || x > area.length) {
    return false;
  } else if (y < 0 || y > area[0].length) {
    return false;
  } else {
    return true;
  }
}

const border = (x,y) => [
  [x-1,y-1], 
  [x,y],
  [x-1,y+1],
  [x,y+1],
  [x,y-1],
  [x+1,y],
  [x+1,y+1],
  [x+1,y-1]
].filter(([x, y]) => inRange(x,y));

...

const ignore = new Set();

const fill = (x, y) => {
  const pos = `${x}:${y}`;
  if (ignore.has(pos)) {
    return;
  } else if (area[x][y] == 1) {
    ignore.add(pos);
    area[x][y] = 0;
    border(x, y).forEach(([x, y]) => fill(x,y));
  } else {
    return;
  }
}

fill(1, 1);

Ваш ответ

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

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