玩转Canvas：变形、旋转自由掌控

2023-12-01 09:50:47

Canvas图形变形、旋转和命中检测的终极指南

前言

在当今互动式网络应用盛行的时代，掌握Canvas图形技术的方方面面对于提升用户体验至关重要。在上一篇文章中，我们探讨了Canvas中文字和图片的命中检测和拖拽功能。在这篇续集中，我们将更深入地探究图形变形和旋转的奥秘，并结合命中检测，为您带来更加丰富的交互体验。此外，我们将引入isPointInPath方法，它将帮助我们实现更加精细的命中检测。

图形变形

Canvas强大的图形变形功能允许您对图形进行各种操作，包括拉伸、压缩和倾斜。这些变形是通过setTransform()方法实现的。setTransform()接收一个变换矩阵作为参数，该矩阵定义了图形的变形方式。

// 获取Canvas上下文
const ctx = document.getElementById("canvas").getContext("2d");

// 定义变换矩阵
const transformMatrix = [
  2, 0, 0, 1, // 水平拉伸2倍
  0, 2, 0, 1, // 垂直拉伸2倍
  0, 0, 1, 0, // 不进行倾斜
  0, 0, 0, 1, // 不进行位移
];

// 设置变换矩阵
ctx.setTransform(...transformMatrix);

// 绘制一个矩形
ctx.fillRect(10, 10, 100, 100);

上面的代码展示了如何将一个矩形水平和垂直方向上拉伸2倍。您可以通过调整变换矩阵中的值来创建各种变形效果。

图形旋转

Canvas还提供图形旋转功能，允许您将图形绕原点旋转一定角度。这是通过rotate()方法实现的。rotate()接收一个角度值作为参数，该角度值以弧度表示。

// 获取Canvas上下文
const ctx = document.getElementById("canvas").getContext("2d");

// 将图形旋转45度
ctx.rotate(Math.PI / 4);

// 绘制一个矩形
ctx.fillRect(10, 10, 100, 100);

这段代码将矩形旋转了45度。您可以通过调整rotate()方法中的角度值来实现任意角度的旋转。

命中检测

在进行图形变形和旋转后，需要重新考虑传统的命中检测方法，如getBoundingClientRect()和elementFromPoint()，因为它们对于变形和旋转后的图形不再适用。

为了解决这个问题，我们将引入isPointInPath()方法。isPointInPath()接收一个路径对象和一个点对象作为参数，并返回一个布尔值，指示该点是否在路径内。

// 获取Canvas上下文
const ctx = document.getElementById("canvas").getContext("2d");

// 绘制一个矩形
ctx.fillRect(10, 10, 100, 100);

// 获取鼠标点击坐标
const mouseX = event.clientX;
const mouseY = event.clientY;

// 将鼠标点击坐标转换为Canvas坐标系下的坐标
const canvasX = mouseX - canvas.offsetLeft;
const canvasY = mouseY - canvas.offsetTop;

// 创建一个点对象
const point = {
  x: canvasX,
  y: canvasY
};

// 创建一个路径对象
const path = new Path2D();
path.rect(10, 10, 100, 100);

// 检查鼠标点击的点是否在矩形路径内
const isHit = ctx.isPointInPath(path, point);

// 如果鼠标点击的点在矩形路径内，则执行相应操作
if (isHit) {
  // ...
}