鸿蒙Canvas中如何实现图像的缩放和旋转？

Question

我在鸿蒙应用中需要展示一些图片，并且需要对这些图片进行缩放和旋转操作。Canvas API中提供了哪些方法可以实现这些功能？能否给出一个完整的代码示例，包括如何加载图像、缩放和旋转它？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在鸿蒙Canvas中，你可以通过ctx.transform方法来对图像进行缩放和旋转。这个方法可以接受六个参数，分别代表水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平移动和垂直移动。

下面是一个示例代码：

let ctx = canvas.getContext('2d');
let img = new Image();
img.src = 'path/to/your/image.jpg';

img.onload = function() {
    // 缩放图像到原始大小的2倍，并旋转45度
    ctx.transform(2, 0, 0, 2, 0, 0); // 缩放
    ctx.rotate(45 * Math.PI / 180); // 旋转45度

    // 绘制图像
    ctx.drawImage(img, 0, 0);
};

在这个例子中，我们先通过ctx.transform方法对Canvas进行了缩放（2倍），然后通过ctx.rotate方法旋转了45度。最后，我们绘制了图像，它就会按照我们设置的缩放和旋转效果来显示。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。