Konva.js - 如何设置拖动限制以避免看到空白

Question

我有一个代码，显示一张可以缩放和拖动的图片，但是拖动或缩放时，会看到白色背景。我想让它作为一个没有这种不需要的背景的交互式地图。

const stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
const imageObj = new Image();
imageObj.src = 'images/map.svg'; // Podmień na ścieżkę do swojego zdjęcia
imageObj.onload = function () {
    const konvaImage = new Konva.Image({
        x: stage.width(),
        y: stage.height(),
        image: imageObj,
        draggable: true,
    });
    konvaImage.offsetX(imageObj.width);
    konvaImage.offsetY(imageObj.height);
    layer.add(konvaImage);
    layer.draw();
    const minZoom = 1;
    const maxZoom = 2;
    stage.on('wheel', (e) => {
        e.evt.preventDefault();
        const scaleBy = 1.05;
        const oldScale = stage.scaleX();
        const mousePos = stage.getPointerPosition();
        let newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy;
        newScale = Math.max(minZoom, Math.min(maxZoom, newScale));
        stage.scale({x: newScale, y: newScale});
        const newPos = {
            x: mousePos.x - (mousePos.x - stage.x()) * (newScale / oldScale),
            y: mousePos.y - (mousePos.y - stage.y()) * (newScale / oldScale),
        };
        stage.position(newPos);
        stage.batchDraw();
    });
};
window.addEventListener('resize', () => {
    stage.width(window.innerWidth);
    stage.height(window.innerHeight);
    layer.draw();
});

https://codepen.io/kokor-masterski/pen/MWNaVJN
我检查了 konva js 文档，但没有找到我需要的内容。

Answer 1

您需要添加一项检查以确定所应用的位置和/或缩放是否会在图像周围留下间隙。 您可以编写一个函数来执行这两项操作，然后从您的缩放函数内部和 image.on('dragmove', ...) 侦听器中调用该函数。

假设您有一个矩形作为图像的框架。您的函数应该调用框架矩形的 getClientRect()，然后对您的图像执行相同的操作。现在您可以进行简单的检查以确定图像的位置是否至少与框架的边界匹配。如果没有，则重置图像的位置/缩放。如果是这样，请允许。

这里有一篇带有示例代码的博客文章 - 这个答案太多了，无法重复。