[英]Resize Rectangle HTML5 Canvas
I have some functions to draw rectangles on a canvas element. 我有一些函数在canvas元素上绘制矩形。 When the element is drawn, I want to be able to resize it by dragging its corners. 绘制元素时,我希望能够通过拖动它的角来调整它的大小。
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, 0, canvas.width, canvas.height); draw(); } } function draw() { ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h); } init();
<canvas id="canvas" width="500" height="500"></canvas>
Make sure to use some kind of threshold value to check for dragging on corners, use a closeEnough
variable to hold this threshold then check corners by seeing if the absolute value of the difference between corner point and mouse point is less than the threshold. 确保使用某种阈值来检查拐角处的拖动,使用closeEnough
变量来保持此阈值,然后通过查看拐角点和鼠标点之间的差值的绝对值是否小于阈值来检查拐角。 Apart from that, it is just a lot of cases to go through. 除此之外,还有很多案例要经历。 Here is a jsFiddle of it 这是一个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 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.startX) && checkCloseEnough(mouseY, rect.startY+rect.h) ){
dragBL = true;
}
// 4. bottom right
else if( checkCloseEnough(mouseX, rect.startX+rect.w) && checkCloseEnough(mouseY, rect.startY+rect.h) ){
dragBR = true;
}
// (5.) none of them
else {
// handle not resizing
}
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();
Do a handle system: when the mouse move, get the distance to each corner to get the first one that is near the cursor then save it and resize your rectangle according to it. 做一个句柄系统:当鼠标移动时,获取到每个角落的距离以获得光标附近的第一个然后保存并根据它调整矩形的大小。
Here is a JSfiddle illustrating it: http://jsfiddle.net/BaliBalo/9HXMG/ 这是一个JSfiddle说明它: http : //jsfiddle.net/BaliBalo/9HXMG/
function getHandle(mouse) {
if (dist(mouse, point(rect.x, rect.y)) <= handlesSize) return 'topleft';
if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize) return 'topright';
if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize) return 'bottomleft';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize) return 'bottomright';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize) return 'top';
if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize) return 'left';
if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize) return 'bottom';
if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize) return 'right';
return false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.