我要评论
原生javascript canvas：创建可拖拽、可缩放矩形
本教程演示如何利用原生javascript和canvas api构建一个可拖动和调整大小的矩形。
一、可拖拽矩形
以下代码实现了可拖拽矩形的绘制：
// 获取画布元素和上下文
const canvas = document.getelementbyid('canvas');
const ctx = canvas.getcontext('2d');
// 矩形对象
let rect = {
x: 100,
y: 100,
width: 50,
height: 50,
isdragging: false
};
// 绘制矩形
function drawrect() {
ctx.fillstyle = 'red';
ctx.fillrect(rect.x, rect.y, rect.width, rect.height);
}
// 鼠标按下事件
canvas.addeventlistener('mousedown', (e) => {
const mousex = e.clientx - canvas.offsetleft;
const mousey = e.clienty - canvas.offsettop;
// 检查鼠标是否在矩形内
if (mousex >= rect.x && mousex <= rect.x + rect.width &&
mousey >= rect.y && mousey <= rect.y + rect.height) {
rect.isdragging = true;
}
});
// 鼠标移动事件
canvas.addeventlistener('mousemove', (e) => {
if (rect.isdragging) {
const mousex = e.clientx - canvas.offsetleft;
const mousey = e.clienty - canvas.offsettop;
rect.x = mousex - rect.width / 2;
rect.y = mousey - rect.height / 2;
ctx.clearrect(0, 0, canvas.width, canvas.height);
drawrect();
}
});
// 鼠标松开事件
canvas.addeventlistener('mouseup', () => {
rect.isdragging = false;
});
drawrect();登录后复制
二、调整矩形大小
扩展上述代码，实现点击矩形边缘调整大小的功能：
// ... (previous code) ...
// 鼠标点击事件
canvas.addeventlistener('click', (e) => {
const mousex = e.clientx - canvas.offsetleft;
const mousey = e.clienty - canvas.offsettop;
// 检查鼠标是否在矩形边缘附近 (简化版，仅处理右下角缩放)
if (mousex >= rect.x + rect.width - 5 && mousex <= rect.x + rect.width + 5 &&
mousey >= rect.y + rect.height - 5 && mousey <= rect.y + rect.height + 5) {
rect.isresizing = true;
}
});
canvas.addeventlistener('mousemove', (e) => {
if (rect.isresizing) {
const mousex = e.clientx - canvas.offsetleft;
const mousey = e.clienty - canvas.offsettop;
rect.width = mousex - rect.x;
rect.height = mousey - rect.y;
ctx.clearrect(0, 0, canvas.width, canvas.height);
drawrect();
}
});
canvas.addeventlistener('mouseup', () => {
rect.isresizing = false;
});
// ... (rest of the code) ...登录后复制
高级库推荐
fabric.js是一个功能强大的canvas库，提供更便捷的图形操作和事件处理。 它能简化很多复杂操作，例如更精确的缩放和旋转控制。 如果您需要更高级的功能，fabric.js是一个值得考虑的选择。
请注意，以上代码是一个简化版本，仅演示基本原理。 实际应用中，可能需要更精细的碰撞检测和边界处理。 完整的可调整大小的矩形实现需要处理所有八个边角的缩放，以及防止矩形尺寸小于0的情况。
以上就是如何用原生js和canvas实现可拖动并可调整大小的矩形？的详细内容，更多请关注代码网其它相关文章！
发表评论