鸿蒙Canvas中如何实现图像的平滑缩放与自适应布局？

Question

我在鸿蒙Canvas中展示图像时，需要实现图像的平滑缩放与自适应布局。请问有没有一种方法可以根据Canvas的大小自动调整图像的大小，同时保持图像的清晰度？最好能够提供一个包含图像平滑缩放与自适应布局的代码示例。

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

Answer 1

在鸿蒙Canvas中实现图像的平滑缩放与自适应布局，你可以使用drawImage方法的九参数版本，它允许你指定源图像的裁剪区域和目标绘制区域的大小。这样，你可以根据Canvas的大小动态调整图像的大小，同时保持图像的清晰度。

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

// 假设你有一个ImageBitmap对象：image
let imageWidth = image.width;
let imageHeight = image.height;

// 设置canvas大小，这里假设是窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 计算缩放比例
let scaleWidth = canvas.width / imageWidth;
let scaleHeight = canvas.height / imageHeight;
let scale = Math.min(scaleWidth, scaleHeight); // 取较小的缩放比例以保持图像比例

// 计算目标绘制区域的大小
let targetWidth = imageWidth * scale;
let targetHeight = imageHeight * scale;

// 绘制图像，使用九参数版本
ctx.drawImage(image, 0, 0, imageWidth, imageHeight, 0, 0, targetWidth, targetHeight);

// 监听窗口大小变化，以自适应布局
window.addEventListener('resize', function() {
    // 重新计算canvas大小、缩放比例和目标绘制区域大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    scale = Math.min(canvas.width / imageWidth, canvas.height / imageHeight);
    targetWidth = imageWidth * scale;
    targetHeight = imageHeight * scale;
    
    // 重新绘制图像
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.drawImage(image, 0, 0, imageWidth, imageHeight, 0, 0, targetWidth, targetHeight);
});

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