html5画布矩形,javascript – 调整矩形HTML5画布

我有一些函数在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)

}

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();