2

const canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var pageX,
  pageY,
  elem,
  tool,
  lengthSquare = 25,
  heightSquare = 25,
  previous,
  mouseDown,
  mouseUp,
  brushColor = 'black';

function Paint() {

  this.pencil = () => {
    tool = 'pencil';
    lengthSquare = heightSquare = 5;
  };

  this.brush = () => {
    tool = 'brush';
    lengthSquare = heightSquare = 25;
  };

  this.fill = () => {
    tool = 'fill';
  };

  this.clear = () => {
    tool = 'clear';
    brushColor = 'white'
  };

  canvas.addEventListener('mousedown', () => {
    mouseDown = true;
    mouseUp = false;

    if (tool == 'fill') {
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

  });

  canvas.addEventListener('mouseup', () => {
    mouseDown = false;
    mouseUp = true;
  });

  canvas.addEventListener('mousemove', () => {

    if (mouseDown) {
      elem = canvas.getBoundingClientRect();
      pageX = event.clientX;
      pageY = event.clientY;
      ctx.fillStyle = brushColor;

      if (tool == 'pencil' || tool == 'brush') {
        ctx.fillRect(pageX - elem.left, pageY - elem.top, lengthSquare, heightSquare);
      } else if (tool == 'clear') {
        ctx.clearRect(pageX - elem.left, pageY - elem.top, lengthSquare, heightSquare);
      }

    }

  });

  document.body.addEventListener('click', () => {
    let target = event.target;
    let action = target.getAttribute('data-type');

    if (action) {

      if (previous) {
        previous.classList.remove('active');
      }

      target.classList.add('active');
      previous = target;
      this[action]();
    };

  });
}

new Paint();
body {
  position: relative;
  min-height: 100vh;
  background: gray;
  margin: 0;
}

.draw {
  position: absolute;
  top: 0;
  right: 10%;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tools {
  position: absolute;
  top: 0%;
  left: 0%;
  bottom: 0%;
  width: 48px;
  background: #575a5e;
}

.tools>div {
  width: 48px;
  height: 48px;
}

.tools div:hover {
  cursor: pointer;
}

.pencil {
  background: url('icons.png');
  background-position-x: 0;
}

.brush {
  background: url('icons.png');
  background-position-x: -48px;
}

.fill {
  background: url('icons.png');
  background-position-x: -96px;
}

.clear {
  background: url('icons.png');
  background-position-x: -144px;
}

.active {
  background-color: #cdd0d6;
}

canvas {
  border: 1px solid black;
  background: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class='tools'>
    <div class='pencil' data-type='pencil'></div>
    <div class='brush'><img src='http://s1.iconbird.com/ico/2014/1/631/w512h5121390856650paintbrush512.png'  data-type='brush' width='48px' height='48px'></div>
    <div class='clear' data-type='fill'></div>
    <div class='fill' data-type='clear'></div>
  </div>
  <div class='draw'>
    <canvas width='800px' height='500px' id='canvas'></canvas>
  </div>

</body>

</html>

Пытаюсь делать paint. Если быстро провести мышью над canvas, он не успевает реагировать на события, тем самым не заполняя необходимое пространство. Необходимо исправить таким образом, чтобы ему было всё равно с какой скоростью пользователь рисует.

При выполнении кода разверните его на всю страницу

3
  • 1
    я думаю тут проблема не в том, что ваш код плохо работает, а то что событие mousemove при быстром перемещении не передает каждое смещение и вызывается с какой-то частотой
    – ThisMan
    20 июн 2019 в 8:23
  • 4
    События сами по себе не приходят на каждый сдвинутый пиксель. Нужно прорисовывать не точку, над которой в текущий момент находится мышка, а регистрировать начало и конец движения. После чего заполнять простанство между двумя контрольными точками линией.
    – Alex Krass
    20 июн 2019 в 8:25
  • 2
    Берите уравнение отрезка по двум точкам - и чертите отрезок - тогда проблемы не будет. (Аналогичная проблема бывает и на с++ и на с#) Нужно хранить xprev yprev (присваивать их при mousedown) и чертить линию от пердыдущих координат к текущим.
    – nick_n_a
    20 июн 2019 в 8:26

1 ответ 1

2

Тут все просто:

По нажатию начинаем рисовать путь

Во время движения с нажатой мышью - рисуем

По отпусканию - замыкаем путь

var m = {x: 0,y: 0};
var ctx = canvas.getContext('2d');
ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';

canvas.addEventListener('mousemove', e => {
  m.x = e.pageX - canvas.offsetLeft;
  m.y = e.pageY - canvas.offsetTop;
});

canvas.addEventListener('mousedown', e => {
  ctx.beginPath();
  ctx.moveTo(m.x, m.y);
  canvas.addEventListener('mousemove', paint);
});

canvas.addEventListener('mouseup', e => canvas.removeEventListener('mousemove', paint));

function paint() {
  ctx.lineTo(m.x, m.y);
  ctx.stroke();
}
<canvas width="300" height="300" style="border:solid" id="canvas"></canvas>

PS: если необходимо рисовать не линиями, рекомендую эту ссылку

неплохой пример аналогичного приложения

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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