03
Май
2020

Реализация заливки в canvas

делаю аналог 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;
    }  
}

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

Источник: https://ru.stackoverflow.com/questions/1119618/%D0%A0%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%B7%D0%B0%D0%BB%D0%B8%D0%B2%D0%BA%D0%B8-%D0%B2-canvas

Тебе может это понравится...

Добавить комментарий