确保使用某种阈值检查拖动角上的内容,使用closeEnough
变量来保存这个阈值,然后进行角点和鼠标点之间的绝对值差的比较,看是否小于阈值。除此之外,还有许多情况需要处理。 这里是一个jsFiddle的示例
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
rect = {},
drag = false,
mouseX,
mouseY,
closeEnough = 10,
dragTL=dragBL=dragTR=dragBR=false;
function init() {
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
}
function mouseDown(e) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
if(rect.w === undefined){
rect.startX = mouseY;
rect.startY = mouseX;
dragBR = true;
}
else if( checkCloseEnough(mouseX, rect.startX) && checkCloseEnough(mouseY, rect.startY) ){
dragTL = true;
}
else if( checkCloseEnough(mouseX, rect.startX+rect.w) && checkCloseEnough(mouseY, rect.startY) ){
dragTR = true;
}
else if( checkCloseEnough(mouseX, rect.startX) && checkCloseEnough(mouseY, rect.startY+rect.h) ){
dragBL = true;
}
else if( checkCloseEnough(mouseX, rect.startX+rect.w) && checkCloseEnough(mouseY, rect.startY+rect.h) ){
dragBR = true;
}
else {
}
ctx.clearRect(0,0,canvas.width,canvas.height);
draw();
}
function checkCloseEnough(p1, p2){
return Math.abs(p1-p2)<closeEnough;
}
function mouseUp() {
dragTL = dragTR = dragBL = dragBR = false;
}
function mouseMove(e) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
if(dragTL){
rect.w += rect.startX-mouseX;
rect.h += rect.startY-mouseY;
rect.startX = mouseX;
rect.startY = mouseY;
} else if(dragTR) {
rect.w = Math.abs(rect.startX-mouseX);
rect.h += rect.startY-mouseY;
rect.startY = mouseY;
} else if(dragBL) {
rect.w += rect.startX-mouseX;
rect.h = Math.abs(rect.startY-mouseY);
rect.startX = mouseX;
} else if(dragBR) {
rect.w = Math.abs(rect.startX-mouseX);
rect.h = Math.abs(rect.startY-mouseY);
}
ctx.clearRect(0,0,canvas.width,canvas.height);
draw();
}
function draw() {
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
init();