function PaintDashRect(id, child) {
var canvas = document.getElementById(id);
var ctx = canvas.getContext('2d');
var p1 = {};
var p2 = {};
var data = {}; //按10000*10000转换后的值
var cWidth = $("#"+id).width();
var cHeight = $("#"+id).height();
// 设置画布的宽高,不然百分比会对绘图效果造成影响 还有一种方式是直接在画布上设置宽高
canvas.width = cWidth;
canvas.height = cHeight;
console.log(cWidth,cHeight)
var _handelFun = {
init: function()
{
canvas.addEventListener("dblclick", _handelFun.dblclickFun,false);
canvas.addEventListener("mousedown", _handelFun.mousedownFun,false);
document.addEventListener("mouseup", _handelFun.mouseupFun,false); // 鼠标移出canvas外也监听抬起事件
},
dblclickFun: function(e) {
// console.log("双击")
console.log(data)
setPTZZoom(child,"goto_point",data);
},
mousedownFun: function(e) {
p1.x = e.offsetX;
p1.y = e.offsetY;
p1.width = 0;
p1.height = 0;
// console.log('按下')
canvas.addEventListener("mousemove",_handelFun.myDrect);
},
mouseupFun: function(e) {
// console.log('抬起')
data.x = parseInt((10000*p1.x)/cWidth);
data.y = parseInt((10000*p1.y)/cHeight);
data.width = parseInt((10000*p1.width)/cWidth);
data.height = parseInt((10000*p1.height)/cHeight);
if (p1.width == 0 || p1.height == 0)
{
ctx.clearRect(0,0,cWidth,cHeight);
canvas.removeEventListener("mousemove",_handelFun.myDrect);
return;
}
if (p2.x > p1.x && p2.y > p1.y) {
// console.log("框选放大",data)
setPTZZoom(child,"zoom_part",data);
}else
{
// console.log("框选缩小",data)
setPTZZoom(child,"zoom_whole",data);
}
ctx.clearRect(0,0,cWidth,cHeight);
canvas.removeEventListener("mousemove",_handelFun.myDrect);
},
myDrect: function(e) {
p2.x = e.offsetX;
p2.y = e.offsetY;
p1.width = Math.abs(p1.x-p2.x);
p1.height = Math.abs(p1.y-p2.y);
ctx.strokeStyle = '#eee';
ctx.clearRect(0,0,cWidth,cHeight);
ctx.beginPath();
if(p2.x>=p1.x){
if(p2.y>=p1.y){
ctx.rect(p1.x,p1.y,p1.width,p1.height);
}else{
ctx.rect(p1.x,p1.y,p1.width,-p1.height);
}
}else{
if(p2.y>=p1.y){
ctx.rect(p1.x,p1.y,-p1.width,p1.height);
}else{
ctx.rect(p1.x,p1.y,-p1.width,-p1.height);
}
}
ctx.setLineDash([5]);// 绘制虚线
ctx.stroke();
ctx.save();
}
}
_handelFun.init();
}
使用鼠标在canvas画布上进行框选绘制
最新推荐文章于 2024-07-24 18:03:00 发布
这段代码描述了一个用于双击、鼠标按下和抬起事件处理的交互式画布功能。用户可以通过拖动鼠标在画布上绘制矩形,进而实现图像的放大或缩小操作。双击事件触发预定义的`setPTZZoom`函数,该函数可能用于调整摄像头视角。代码涉及到鼠标的坐标转换、画布的宽高设置以及虚线矩形的绘制。
摘要由CSDN通过智能技术生成