javascript - 如何使 HTML Canvas 矩形随鼠标拖动调整大小？

Question

我正在创建一个基于 Web 的注释应用程序，用于通过 HTML canvas 元素和 Javascript 对图像进行注释。我希望用户按下鼠标以指示矩形的开始，拖动到所需的结束坐标并松开以指示矩形的另一端。

目前，我可以使用 context.rects() 函数获取起始坐标和结束坐标在图像上创建一个矩形，但是因为我不确定如何调整特定的大小 Canvas 上的矩形，这让我只能在用户释放鼠标单击后绘制矩形。

如何在拖动时调整在鼠标按下时创建的特定矩形的大小？

以下是执行该功能的代码片段:

var isMouseDown = false;
    var startX;
    var startY;
    canvas.onmousedown = function(e) { 
        if(annMode){
            isMouseDown = true;
            var offset = $(this).offset();
            startX = parseInt(e.pageX - offset.left);
            startY = parseInt(e.pageY - offset.top);
        }
    };
    canvas.onmousemove = function(e) { 
        if(isMouseDown) { 
            var offset = $(this).offset();
            var intermediateX = parseInt(e.pageX - offset.left);
            var intermediateY = parseInt(e.pageY - offset.top);
            console.log(intermediateX);
        } 
    };
    canvas.onmouseup   = function(e) { 
        if(annMode&&isMouseDown){
            isMouseDown = true;
            var offset = $(this).offset();
            var endX = parseInt(e.pageX - offset.left);
            var endY = parseInt(e.pageY - offset.top);
            var width = endX - startX;
            var height = endY - startY;
            context.strokeStyle = "#FF0000";
            context.rect(startX, startY, width, height);
            context.stroke();
        }
        isMouseDown = false 
    };

Answer 1

我的便捷前端脚本在这里派上用场了!

根据我对问题的理解，您希望能够将鼠标移动到 Canvas 上的任意点，按住鼠标左键并向任意方向拖动以在起点和任意新的鼠标位置之间形成一个矩形。当您释放鼠标按钮时，它会保留。

将帮助您完成您正在尝试做的事情的脚本:

https://github.com/GustavGenberg/handy-front-end/blob/master/README.md#canvasjs https://github.com/GustavGenberg/handy-front-end/blob/master/README.md#pointerjs

这两个脚本只是让代码更清晰、更容易理解，所以我使用了它们。

这是一个尽可能简单的 fiddle

const canvas = new Canvas([]);

和

const mouse = new Pointer();

https://jsfiddle.net/0y8cbao3/

我是否正确理解了您的问题？

你想要一个带有注释的版本来描述每一行及其作用吗？

目前仍然存在一些错误，但我会尽快修复这些错误!

编辑

再次阅读您的问题后，我的 react 是:“...但是我不确定如何调整 Canvas 上特定矩形的大小...”。

Canvas 就像一幅图像。一旦你画了它，你就不能“调整”不同的形状。您只能清除整个 Canvas 并重新开始(当然您也可以清除小部分)。

这就是 Canvas 助手如此有用的原因。为了能够“激活” Canvas ，您必须创建一个循环，每 16 毫秒 (60 fps) 使用新帧重新绘制 Canvas 。