Javascript Canvas - 绘制矩形拖放

Question

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

我需要能够在拖动时看到矩形以更改大小，因为我听说它被称为“橡皮筋”。然后它在 mouseup 上创建。

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

Answer 1

要研究的算法是

1. 使用动画帧回调来清除新的矩形并将其写入画布。 （见requestAnimationFrame）

2. 在画布上使用 mousedown 和 mouseup 事件来启动跟踪鼠标移动。 mousedown 事件可以启动动画调用以绘制一个 1x1 像素的矩形。

3. mousemove 事件记录鼠标的位置以供动画帧绘制代码使用 - 如果没有待处理的回调，则可以调用 requestAnimationFrame。

4. 如果您可以清除画布上的先前内容以创建橡皮筋效果，则为 mouseup 上最后绘制的矩形。

5. 如果需要保留现有内容，请研究在鼠标按下时复制画布，并在绘制新矩形之前将其复制回画布。查看how to copy a canvas locally 和/或how to (deep) clone a canvas 等问题

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

Answer 2

首先，要在拖动（或鼠标移动）时绘制矩形，您只需清除画布，然后绘制一个新矩形。其次，画布形状不是对象，因此据我所知，您无法与它们进行交互，如果您想要交互性，请考虑使用 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);
     });
 });