我有一些函数在canvas元素上绘制矩形.绘制元素时,我希望能够通过拖动它的角来调整它的大小.
<canvas id="canvas" width="500" height="500"></canvas>
JS
var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d'),rect = {},drag = false;
function init() {
canvas.addEventListener('mousedown',mouseDown,false);
canvas.addEventListener('mouseup',mouseUp,false);
canvas.addEventListener('mousemove',mouseMove,false);
}
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
function mouseUp() {
drag = false;
}
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
ctx.clearRect(0,canvas.width,canvas.height);
draw();
}
}
function draw() {
ctx.fillRect(rect.startX,rect.startY,rect.w,rect.h);
}
init();
解决方法
确保使用某种阈值来检查拐角处的拖动,使用closeEnough变量来保持此阈值,然后通过查看拐角点和鼠标点之间的差值的绝对值是否小于阈值来检查拐角.除此之外,还有很多案例要经历.
Here is a jsFiddle of it
var canvas = document.getElementById('canvas'),drag = false,mouseX,mouseY,closeEnough = 10,dragTL=dragBL=dragTR=dragBR=false;
function init() {
canvas.addEventListener('mousedown',false);
}
function mouseDown(e) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
// if there isn't a rect yet
if(rect.w === undefined){
rect.startX = mouseY;
rect.startY = mouseX;
dragBR = true;
}
// if there is,check which corner
// (if any) was clicked
//
// 4 cases:
// 1. top left
else if( checkCloseEnough(mouseX,rect.startX) && checkCloseEnough(mouseY,rect.startY) ){
dragTL = true;
}
// 2. top right
else if( checkCloseEnough(mouseX,rect.startX+rect.w) && checkCloseEnough(mouseY,rect.startY) ){
dragTR = true;
}
// 3. bottom left
else if( checkCloseEnough(mouseX,rect.startY+rect.h) ){
dragBL = true;
}
// 4. bottom right
else if( checkCloseEnough(mouseX,rect.startY+rect.h) ){
dragBR = true;
}
// (5.) none of them
else {
// handle not resizing
}
ctx.clearRect(0,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,canvas.height);
draw();
}
function draw() {
ctx.fillRect(rect.startX,rect.h);
}
init();
