我正在为自己创建一个UI,在其中定义用于执行OCR的框。那不是重要的部分。我们正在考虑前端。对于UI,其想法是使用鼠标(mousedown,mousemove,mouseup)绘制一个矩形。但是我的脚本绘制了多个矩形而不是一个矩形。这是问题的图像。
我只想为每个选择矩形绘制一个矩形。我怎样才能做到这一点?这是我的选择代码。
var ctx = Data.ctx_items[index];
//get box
Data.canvas_items[index].addEventListener('mousedown', function(e){
Data.x1 = e.offsetX;
Data.y1 = e.offsetY;
Data.is_drawing = true;
})
Data.canvas_items[index].addEventListener('mousemove', function(e){
if(Data.is_drawing){
Data.x2 = e.offsetX - Data.x1;
Data.y2 = e.offsetY - Data.y1;
ctx.beginPath();
ctx.rect(Data.x1, Data.y1, Data.x2, Data.y2);
ctx.stroke();
}
})
Data.canvas_items[index].addEventListener('mouseup', function(e){
Data.is_drawing = false;
})
感谢您的帮助。谢谢