Как я могу остановить рисовать с HTML5 Canvas - PullRequest
Новая
       5

Как я могу остановить рисовать с HTML5 Canvas

0 голосов
/ 01 ноября 2019

Надеюсь, у вас все хорошо.

Я пытаюсь сделать мой Paint-подобный, используя HTML 5 Canvas. Я должен сделать два типа прямоугольника: заполненный и не заполненный. Вот как я это сделал: 

  function rectangle(state = false) {
    var first = [];
    var second = [];
    var click = 0;

    canvas.mousedown(function(e) {
      if (status == "rectangle") {
        if (click == 0) {
          first[0] = e.offsetX;
          first[1] = e.offsetY;
          click++;
        } else {
          second[0] = e.offsetX;
          second[1] = e.offsetY;
          if (state) {
            ctx.fillRect(
              first[0],
              first[1],
              second[0] - first[0],
              second[1] - first[1]
            );
          } else {
            ctx = canvas[0].getContext("2d");
            ctx.strokeRect(
              first[0],
              first[1],
              second[0] - first[0],
              second[1] - first[1]
            );
          }
          click = 0;
        }
      }
    });
  }

и это мой звонок 

//rectangle ;)
$("#fill").click(function() {
  $("#alert").text("fill Rectangle");
  status = "rectangle";
  rectangle(true);
});

$("#contour").click(function() {
  $("#alert").text("Rectangle");
  status = "rectangle";
  rectangle();
});

У меня есть 2 кнопки для выбора желаемого типа прямоугольника. Когда я нажимаю filled, я могу нарисовать свой прямоугольник так, как хочу, но когда я переключаюсь на not filled, он все равно рисует, заполняя прямоугольник. Чтобы нарисовать незаполненный прямоугольник, я должен нажать F5 и нажать сначала в not filled.

Заранее благодарю за помощь (извините за плохой английский).

1 Ответ

0 голосов
/ 01 ноября 2019

Ваша проблема в том, что вы добавляете новый прослушиватель событий каждый раз, когда изменяется флажок заполнения, но не удаляете старого прослушивателя. Это означает, что вы рисуете контур-прямоугольник и заливку-прямоугольник. Вместо этого добавьте только одного прослушивателя событий и обработайте состояние независимо от него.

Дополнительные примечания:

  • Во-первых, вам не нужно заново создавать новый контекст при каждом щелчке.
  • Во-вторых, у вас много повторяющихся кодов
  • В-третьих, используйте {x, y} вместо [x, y] для упрощения модификации в будущем. 

let shape = 'rectangle'
let fill = false;
let clicks = [], clickCount = 0;

let fillCheck = document.querySelector('input');
fillCheck.addEventListener('input', () => fill = fillCheck.checked);

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext("2d");

canvas.addEventListener('mousedown', e => {
  if (shape == 'rectangle') {
    clicks[clickCount++] = {x: e.offsetX, y: e.offsetY};
    if (clickCount === 2) {
      ctx[fill ? 'fillRect' : 'strokeRect'](
        clicks[0].x,
        clicks[0].y,
        clicks[1].x - clicks[0].x,
        clicks[1].y - clicks[0].y);
      clickCount = 0;
    }
  }
});
canvas {
  outline: 1px solid;
}
<div><label><input type="checkbox">Fill?</label></div>
<canvas width="300" height="300"></canvas>
...