计算机图形学几何交互

Mintopia
0 阅读3分钟

一、引言

在计算机图形学领域，几何交互是让用户能够与屏幕上的图形对象进行动态互动的关键技术。从简单的点击选中图形，到复杂的拖拽、缩放、旋转等操作，几何交互极大地提升了用户与图形界面的交互体验。接下来，我们将基于 JavaScript 语言，深入探讨几何交互的实现方法。

二、基础准备：HTML5 Canvas

HTML5 Canvas 是在网页上绘制图形的基础工具，它提供了一个基于 JavaScript 的绘图上下文。首先，在 HTML 文件中创建一个 Canvas 元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>几何交互示例</title>
</head>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
  <script src="script.js"></script>
</body>
</html>

然后在 JavaScript 文件（script.js）中获取绘图上下文：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

这样，我们就可以使用 ctx 对象进行图形绘制了。

三、基本图形绘制

1. 绘制矩形

在 Canvas 中绘制矩形可以使用 fillRect 或 strokeRect 方法。fillRect 用于绘制填充的矩形，strokeRect 用于绘制矩形边框。

// 绘制填充矩形
ctx.fillStyle ='red';
ctx.fillRect(100, 100, 200, 150);
// 绘制矩形边框
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.strokeRect(350, 100, 200, 150);

2. 绘制圆形

绘制圆形需要使用 arc 方法，该方法需要指定圆心坐标、半径以及起始和结束角度。

ctx.beginPath();
ctx.arc(500, 300, 100, 0, 2 * Math.PI);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = 'black';
ctx.stroke();

四、几何交互实现

1. 鼠标点击交互

为了实现鼠标点击图形的交互，我们需要监听 Canvas 的 click 事件，并判断点击位置是否在图形内部。以矩形为例，判断点击位置是否在矩形内，需要比较点击的坐标是否在矩形的 x、y 坐标范围以及宽度和高度范围内。

canvas.addEventListener('click', function (event) {
  const rectX = 100;
  const rectY = 100;
  const rectWidth = 200;
  const rectHeight = 150;
  const rectXClicked = event.offsetX >= rectX && event.offsetX <= rectX + rectWidth;
  const rectYClicked = event.offsetY >= rectY && event.offsetY <= rectY + rectHeight;
  if (rectXClicked && rectYClicked) {
    ctx.fillStyle = 'yellow';
    ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
  }
});

2. 图形拖拽交互

实现图形拖拽交互，需要监听 mousedown、mousemove 和 mouseup 事件。在 mousedown 事件中记录鼠标按下时的初始位置，在 mousemove 事件中根据鼠标移动的距离更新图形的位置，在 mouseup 事件中停止拖拽。

let isDragging = false;
let startX, startY;
let rectX = 100;
let rectY = 100;
canvas.addEventListener('mousedown', function (event) {
  if (event.offsetX >= rectX && event.offsetX <= rectX + 200 && event.offsetY >= rectY && event.offsetY <= rectY + 150) {
    isDragging = true;
    startX = event.offsetX - rectX;
    startY = event.offsetY - rectY;
  }
});
canvas.addEventListener('mousemove', function (event) {
  if (isDragging) {
    rectX = event.offsetX - startX;
    rectY = event.offsetY - startY;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle ='red';
    ctx.fillRect(rectX, rectY, 200, 150);
  }
});
canvas.addEventListener('mouseup', function () {
  isDragging = false;
});

五、更复杂的几何交互：图形缩放与旋转

1. 图形缩放

图形缩放可以通过改变图形的绘制尺寸来实现。我们可以在鼠标滚轮事件中获取滚轮的滚动距离，根据滚动距离调整图形的缩放比例。

let scale = 1;
canvas.addEventListener('wheel', function (event) {
  event.preventDefault();
  const delta = event.deltaY < 0? 0.1 : -0.1;
  scale += delta;
  if (scale < 0.1) {
    scale = 0.1;
  }
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.scale(scale, scale);
  ctx.fillStyle = 'blue';
  ctx.fillRect(100, 100, 200, 150);
  ctx.setTransform(1, 0, 0, 1, 0, 0);
});

2. 图形旋转

图形旋转可以使用 rotate 方法，通过改变旋转角度来实现。我们可以在鼠标右键点击事件中，让图形按照一定角度进行旋转。

let rotation = 0;
canvas.addEventListener('contextmenu', function (event) {
  event.preventDefault();
  rotation += Math.PI / 8;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.translate(200, 200);
  ctx.rotate(rotation);
  ctx.fillStyle = 'green';
  ctx.fillRect(-100, -75, 200, 150);
  ctx.setTransform(1, 0, 0, 1, 0, 0);
});

六、总结

通过以上内容，我们学习了如何使用 JavaScript 在 HTML5 Canvas 上进行基础图形绘制，并实现了多种几何交互功能，包括鼠标点击、图形拖拽、缩放和旋转等。这些技术是计算机图形学中几何交互的基础，在此基础上，还可以进一步探索更复杂的交互效果和算法，如碰撞检测、物理模拟等，以创造出更加丰富和有趣的图形交互应用。

以上文章涵盖了计算机图形学几何交互的基础与实践。你若觉得某些部分需要更深入讲解，或想增加其他功能，欢迎随时和我说。

avatar
文章
阅读
粉丝