Javascript Canvas - 绘制矩形拖放

Question

我希望能够在 javascript canvas 上单击并拖动以绘制一个矩形。

我需要能够在拖动时看到矩形以更改大小，就像我听说的 "rubber band" 一样拖动时。然后它在 mouseup 上创建。

我在这方面遇到了严重的困难，感谢任何帮助，谢谢！

Answer 1

首先，要在拖动（或鼠标移动）时绘制矩形，您只需清除 canvas，然后绘制一个新的矩形。其次，canvas 形状不是对象，因此据我所知你不能与它们交互，如果你想要交互，请考虑使用 svg。这是拖动时绘图的草率实现。

 $("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 2

要研究的算法是

使用动画帧回调清除并写入一个新矩形到canvas。（见 requestAnimationFrame ）
在 canvas 上使用 mousedown 和 mouseup 事件来启动跟踪鼠标移动。 mousedown 事件可以启动动画调用以绘制一个 1x1 像素的矩形。
mousemove 事件记录鼠标的位置以供动画帧绘制代码使用 - 如果没有挂起的回调，可能会调用 requestAnimationFrame。
如果能把前面内容的canvas清除掉，做成橡皮筋效果，最后在mouseup上画的矩形就是结果了。
如果需要保留现有内容，研究在按下鼠标时复制 canvas，然后在绘制新矩形之前将其复制回 canvas。查看 how to copy a canvas locally and/or how to (deep) clone a canvas

编码愉快，有很多东西要学！

Javascript Canvas - 绘制矩形拖放

Javascript Canvas - Draw rectangle drag and drop

html

javascript

canvas

rectangles

html5-canvas