我要评论
使用原生javascript和canvas绘制可交互矩形
本文介绍如何利用原生javascript和canvas元素绘制一个可拖动和调整大小的矩形。
一、绘制矩形：
首先，我们需要使用javascript获取canvas元素和其2d渲染上下文：
const canvas = document.getelementbyid('my-canvas');
const ctx = canvas.getcontext('2d');
ctx.fillstyle = 'blue'; // 设置填充颜色
ctx.fillrect(10, 10, 100, 50); // 绘制矩形 (x, y, width, height)登录后复制
这段代码绘制了一个蓝色矩形，其左上角坐标为(10, 10)，宽为100像素，高为50像素。
二、拖动矩形：
实现拖动功能需要监听鼠标事件：mousedown、mousemove和mouseup。
let isdragging = false;
let startx, starty;
canvas.addeventlistener('mousedown', (e) => {
// 检查鼠标是否在矩形内
if (ispointinrect(e.offsetx, e.offsety, 10, 10, 100, 50)) {
isdragging = true;
startx = e.offsetx;
starty = e.offsety;
}
});
canvas.addeventlistener('mousemove', (e) => {
if (isdragging) {
const dx = e.offsetx - startx;
const dy = e.offsety - starty;
// 清除画布并重新绘制矩形
ctx.clearrect(0, 0, canvas.width, canvas.height);
ctx.fillrect(10 + dx, 10 + dy, 100, 50);
startx = e.offsetx;
starty = e.offsety;
}
});
canvas.addeventlistener('mouseup', () => {
isdragging = false;
});
//辅助函数，判断点是否在矩形内
function ispointinrect(x, y, rectx, recty, rectwidth, rectheight) {
return x >= rectx && x <= rectx + rectwidth && y >= recty && y <= recty + rectheight;
}登录后复制
这段代码添加了鼠标事件监听器。mousedown事件检测鼠标是否点击在矩形内，如果是则开始拖动；mousemove事件计算矩形位移并重新绘制；mouseup事件结束拖动。
三、调整矩形大小：
为了调整矩形大小，我们可以监听dblclick事件，并根据点击位置调整矩形的宽高。 这部分实现较为复杂，需要判断点击位置是哪个边或角，然后进行相应的调整。为了简化，这里省略了这部分代码，但可以参考文中提到的fabric.js库来实现更高级的功能。
四、总结：
以上代码展示了使用原生javascript和canvas绘制可拖动矩形的核心步骤。 对于更复杂的交互和功能，例如调整大小、旋转等，建议使用fabric.js等canvas库，它们提供了更便捷的api和更丰富的功能。
以上就是原生js canvas如何绘制并拖动可调整大小的矩形？的详细内容，更多请关注代码网其它相关文章！
发表评论