如何解决Javascript HTML5 canvas:选择矩形,想要绘制一个但绘制多个
我正在为自己创建一个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;
})
感谢您的帮助。谢谢
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。