鸿蒙Canvas中如何实现图像的滚动与拖拽效果？

Question

我在鸿蒙Canvas中展示图像时，需要实现图像的滚动与拖拽效果。请问有没有一种方法可以实现图像的平滑滚动和拖拽操作？最好能够提供一个包含图像滚动与拖拽功能的代码示例。

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

Answer 1

在鸿蒙Canvas中实现图像的滚动与拖拽效果，你需要监听Canvas的鼠标事件（或触摸事件），并根据事件的位置来更新图像的位置。你可能还需要使用translate方法来移动Canvas的坐标系。

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

// 设置canvas大小
canvas.width = 400;
canvas.height = 400;

// 要拖拽的图像
let image = new Image();
image.src = 'path/to/your/image.jpg';
image.onload = function() {
    // 初始图像位置
    let imageX = 0;
    let imageY = 0;
    
    // 拖拽状态
    let isDragging = false;
    let startX, startY;
    
    // 鼠标按下事件
    canvas.addEventListener('mousedown', function(e) {
        isDragging = true;
        startX = e.clientX - imageX;
        startY = e.clientY - imageY;
    });
    
    // 鼠标移动事件
    canvas.addEventListener('mousemove', function(e) {
        if (isDragging) {
            imageX = e.clientX - startX;
            imageY = e.clientY - startY;
            draw();
        }
    });
    
    // 鼠标松开事件
    canvas.addEventListener('mouseup', function() {
        isDragging = false;
    });
    
    // 绘制函数
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(image, imageX, imageY);
    }
    
    // 初始绘制
    draw();
};

// 将canvas添加到页面中
document.body.appendChild(canvas);

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