用canvas绘制一个可拖拽的多边形
时间: 2024-06-11 09:05:14 浏览: 11
抱歉,我作为AI语言模型无法提供图形化界面,但我可以给你提供绘制多边形的代码,您可以在您的项目中使用它:
```html
<canvas id="myCanvas" width="500" height="500"></canvas>
```
```javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDragging = false;
let dragIndex = -1;
let mouseX = 0;
let mouseY = 0;
const polygon = {
points: [
{ x: 100, y: 100 },
{ x: 200, y: 100 },
{ x: 200, y: 200 },
{ x: 100, y: 200 }
],
strokeColor: '#000',
fillColor: '#f00'
};
function drawPolygon() {
ctx.beginPath();
ctx.moveTo(polygon.points[0].x, polygon.points[0].y);
for (let i = 1; i < polygon.points.length; i++) {
ctx.lineTo(polygon.points[i].x, polygon.points[i].y);
}
ctx.closePath();
ctx.strokeStyle = polygon.strokeColor;
ctx.stroke();
ctx.fillStyle = polygon.fillColor;
ctx.fill();
}
function isInsidePolygon() {
let inside = false;
for (let i = 0, j = polygon.points.length - 1; i < polygon.points.length; j = i++) {
const xi = polygon.points[i].x;
const yi = polygon.points[i].y;
const xj = polygon.points[j].x;
const yj = polygon.points[j].y;
const intersect = ((yi > mouseY) !== (yj > mouseY)) &&
(mouseX < (xj - xi) * (mouseY - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
}
function onMouseDown(event) {
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
for (let i = 0; i < polygon.points.length; i++) {
const point = polygon.points[i];
const distance = Math.sqrt((point.x - mouseX) ** 2 + (point.y - mouseY) ** 2);
if (distance < 10) {
isDragging = true;
dragIndex = i;
break;
}
}
}
function onMouseMove(event) {
if (isDragging) {
mouseX = event.clientX - canvas.offsetLeft;
mouseY = event.clientY - canvas.offsetTop;
polygon.points[dragIndex].x = mouseX;
polygon.points[dragIndex].y = mouseY;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPolygon();
}
}
function onMouseUp(event) {
isDragging = false;
dragIndex = -1;
}
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
drawPolygon();
```
这是一个绘制一个四边形的多边形的代码,并且可以拖动顶点。您可以通过修改 `polygon.points` 数组来绘制不同形状的多边形。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)