Question

我希望你一切都好。

我正在尝试使用HTML 5 Canvas做类似Paint的工作。我必须做两种类型的矩形：实心和不实心。这是我的操作方式：

  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中单击。

在此先感谢您的帮助（对不起，英语不好。）

Answer 1

您的问题是，每次修改填充复选框时，您要添加一个新的事件侦听器，但不会删除旧的侦听器。这意味着您将同时绘制轮廓矩形和填充矩形。相反，只添加一个事件侦听器并处理状态即可。

其他说明：

首先，您不必每次单击都重新创建新的上下文。
第二，您有很多重复的代码
第三，使用{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>

如何停止使用HTML5画布绘制

1 个答案: