Question

我正在寻找一种方式来生活＆＃34;在画布上绘制矩形或圆形。

我找到了fillRect()绘制矩形的各种方法，但没有生活。我的意思是，能够在一个点上mouseDown()并将其移动到画布中的另一个点，该点定义画布的大小，就像在Microsoft Paint，OneNote等中一样。

有人可以帮助我，并就如何开始给我一个建议吗？我可能正在考虑如何做到这一点，而不会看到矩形（或圆圈）大小的变化，如：

 $("canvas").mousedown(function(event){
     var ctx = this.getContext("2d");
     ctx.clearRect(0,0,$(this).width(),$(this).height());
     var initialX = event.clientX - this.getBoundingClientRect().left;
     var initialY = event.clientY - this.getBoundingClientRect().top;

     $(this).mousemove(function(evt) {
         ctx.strokeRect(initialX, initialY, evt.clientX - event.clientX, evt.clientY - event.clientY);
     });
 });

但是我希望看到它的存在，所以当用户移动鼠标时矩形大小会如何变化。

Answer 1

https://jsfiddle.net/zb66mxra/2/

要实现这一点，您需要保持Canvas的恒定图像。这可以通过使用JavaScript一次又一次地绘制对象数组来轻松实现。

let drawArr = [];

示例对象包含开始绘制的x和y坐标，宽度和高度：

 { x: 100,
  y: 100,
  w: 10,
  h: 10  }

当鼠标在画布上移动时，如果鼠标按下，则只需要更改数组。这意味着您需要设置一个标志以查看此案例是真还是假：

  let mousedown = false;
  canvas.addEventListener('mousedown', function(e) {
    mousedown = true;
  ...
  });
  canvas.addEventListener('mouseup', function(e) {
    mousedown = false;
  });

当你的鼠标关闭时，你想要添加一个项目来绘制到数组：

  canvas.addEventListener('mousedown', function(e) {
  mousedown = true;
  drawArr.push({
    x: e.pageX,
    y: e.pageY,
    w: 0,
    h: 0
  });
});

高度和宽度最初设置为0.如果可以想象，我们现在想要做的是创建矩形的高度和宽度，同时我们将鼠标拖到画布上并且鼠标是下。我们想要动态调整它，以便在重新渲染屏幕时，它被视为正在绘制。

操作高度和宽度很容易，因为只要您一次只能绘制一个，它就会一直是添加到绘图数组中的最新对象。

  canvas.addEventListener('mousemove', function(e) {
  if (mousedown) {
    let i = drawArr.length -1;

    let {
      x,
      y
    } = drawArr[i];
    drawArr[i].w = e.pageX - x;
    drawArr[i].h = e.pageY - y;
  }
});

最后，我们使用requestAnimationFrame不断绘制绘图数组中的任何对象。我们通过在加载页面时调用它来执行此操作：

requestAnimationFrame(draw);

然后在draw函数中递归：

function draw() {
...
requestAnimationFrame(draw);
}

然后我们只需要清除前面的屏幕渲染并迭代绘制数组并再次将所有内容绘制到屏幕上。

  function draw() {
    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
    for (let obj of drawArr) {
    let {
      x,
      y,
      w,
      h
     } = obj;
      ctx.strokeRect(x, y, w, h);
    }
    requestAnimationFrame(draw);
  }

瞧。

Javascript Canvas绘制矩形或圆形

1 个答案: