写js代码,在canvas中鼠标画点,鼠标双击连线形成闭合图形,结束画点功能,鼠标点击选中点拖拽
时间: 2024-05-05 07:19:08 浏览: 168
可以使用以下代码实现你的需求:
```html
<canvas id="myCanvas"></canvas>
```
```javascript
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let points = [];
let selectedPoint = null;
canvas.addEventListener("mousedown", function(event) {
if (selectedPoint) {
// 拖拽选中的点
selectedPoint.x = event.clientX;
selectedPoint.y = event.clientY;
draw();
} else {
// 添加新点
let point = { x: event.clientX, y: event.clientY };
points.push(point);
draw();
}
});
canvas.addEventListener("dblclick", function(event) {
// 连线形成闭合图形
if (points.length > 2) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i <= points.length; i++) {
let point = points[i % points.length];
ctx.lineTo(point.x, point.y);
}
ctx.closePath();
ctx.stroke();
// 清空点数组
points = [];
}
});
function draw() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制所有点
for (let i = 0; i < points.length; i++) {
let point = points[i];
ctx.beginPath();
ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
ctx.fill();
// 如果是选中状态,绘制外圆
if (point === selectedPoint) {
ctx.beginPath();
ctx.arc(point.x, point.y, 10, 0, 2 * Math.PI);
ctx.stroke();
}
}
}
canvas.addEventListener("mousemove", function(event) {
// 判断是否选中某个点
for (let i = 0; i < points.length; i++) {
let point = points[i];
let dx = event.clientX - point.x;
let dy = event.clientY - point.y;
if (dx * dx + dy * dy < 25) {
selectedPoint = point;
canvas.style.cursor = "move";
return;
}
}
selectedPoint = null;
canvas.style.cursor = "auto";
draw();
});
canvas.addEventListener("mouseup", function(event) {
// 取消选中状态
selectedPoint = null;
canvas.style.cursor = "auto";
draw();
});
```
代码解释:
1. 创建 canvas 元素,并为其添加 id 属性为 "myCanvas"。
2. 获取 canvas 的 2D 上下文对象 ctx。
3. 定义一个数组 points,用于存储鼠标画的所有点。
4. 定义一个变量 selectedPoint,用于存储当前选中的点。
5. 在 canvas 上添加 mousedown 事件监听器,在鼠标单击时执行相应操作:
- 如果当前有点被选中,拖拽选中的点;
- 否则,添加新的点到 points 数组中。
6. 在 canvas 上添加 dblclick 事件监听器,当鼠标双击时执行相应操作:
- 如果已经有超过两个的点,将这些点连成一条线段形成闭合图形,并清空 points 数组。
7. 定义一个 draw 函数,用于绘制所有的点和线段。
- 首先清空画布;
- 然后绘制所有点;
- 最后,如果某个点处于选中状态,绘制一个外圆。
8. 在 canvas 上添加 mousemove 事件监听器,用于判断当前鼠标位置是否在某个点附近:
- 遍历所有的点,如果鼠标位置距离某个点小于 5 像素,将该点设置为 selectedPoint;
- 如果没有任何点被选中,将 selectedPoint 设置为 null。
9. 在 canvas 上添加 mouseup 事件监听器,当鼠标抬起时取消选中状态,并重新绘制画布。
注意:以上代码仅为示例,实际项目中应该根据需求进行修改和优化。
阅读全文