调整矩形 HTML5 画布的大小
Resize Rectangle HTML5 Canvas
>我有一些函数可以在画布元素上绘制矩形。绘制元素时,我希望能够通过拖动其角来调整其大小。
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>
确保使用某种阈值来检查拐角是否拖动,使用 closeEnough
变量来保持此阈值,然后通过查看角点和鼠标点之间差值的绝对值是否小于阈值来检查拐角。除此之外,还有很多情况要经历。这是它的js小提琴
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();
做一个手柄系统:当鼠标移动时,获取到每个角的距离,以获得光标附近的第一个角,然后保存它并根据它调整矩形的大小。
这里有一个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;
}
这个问题很老,但对于像我这样偶然发现这个问题的人来说,我把各种想法(谢谢,@Paul Kaplan)放在一起,并打包了一个即使在响应式画布上也能运行的启动和运行解决方案。
该代码在链接的 HTML 页面源代码中可见,并在本文中进行了解释("响应式图像上的交互式选择框")。
我相信这可能会有所帮助。
相关文章:
- HTML5在浏览器大小javascript/jquery上调整字体大小
- 用纯Javascript调整HTML5画布及其内容的大小
- HTML5从嵌套iframe内部调整顶级文档iframe的大小
- HTML5画布中的可拖动和可调整大小元素
- HTML5画布如何使图像可以通过Kinetic.js调整大小
- 调整图像大小,同时在Windows 8 Metro HTML5应用程序中保持其质量
- 如何在自定义Polymer元素上调整绘图html5画布的大小
- 添加文本工具,在Html5画布上拖放并调整其大小
- 调整大小时 HTML5 画布内存泄漏
- HTML5画布正在调整我的图像大小
- 使用 JavaScript 绘制到 HTML5 画布时调整.png图像的大小
- 想要使用 html5 的画布优化捕获的图像调整大小和旋转的代码,现在在移动设备上发出内存不足警告
- Windows 8 HTML5-调整拆分应用程序的布局
- HTML5画布drawImage大小调整问题
- 窗口调整时暂停/停止或删除HTML5视频
- HTML5-调整图像大小,并在调整大小的图像中保持EXIF
- html5画布图像调整大小
- 独立的javascript应用程序,html5画布游戏..理想情况下使用V8或基于浏览器调整游戏
- HTML5:调整画布大小
- 在上传之前使用HTML5调整图像的大小