Как пересчитать ширину и высоту сцены Konvajs?

Question

Написал обработчик колесика мыши, который позволяет зумить элементы к курсору на сцене konvajs (красный - какой-то элемент, зеленый - фон). После зума сцены мне нужно чтобы фон всегда был размером ровно со всю сцену, но не понятно как это можно сделать.
Сделал так, чтобы при каждом прокручивании колесика мыши, фон ставился в координаты (0, 0), осталось понять как ширину и высоту сцены пересчитывать.

const stage = new Konva.Stage({
    container: 'canvas',
    width: 512,
    height: 512,
});

const layer = new Konva.Layer();
stage.add(layer);

const background = new Konva.Rect({
    width: 512,
    height: 512,
    fill: 'green',
    stroke: true,
    strokeWidth: 20,
    listening: false
});
layer.add(background);

const element = new Konva.Rect({
    width: 100,
    height: 100,
    fill: 'red',
    draggable: true
});
layer.add(element);

stage.on('wheel', e => {
    e.evt.preventDefault();

    const oldScale = stage.scaleX();
    const pointer = stage.getPointerPosition();
    let mousePointTo = {
        x: (pointer.x - stage.x()) / oldScale,
        y: (pointer.y - stage.y()) / oldScale,
    };

    let direction = e.evt.deltaY < 0 ? -1 : 1;

    const newScale = direction < 0 ? oldScale * 1.1 : oldScale / 1.1;
    stage.scale({ x: newScale, y: newScale });
    stage.position({
        x: pointer.x - mousePointTo.x * newScale,
        y: pointer.y - mousePointTo.y * newScale,
    });

    background.absolutePosition({ x: 0, y: 0 });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>

<div id="canvas"></div>

<script src="https://unpkg.com/konva@8/konva.min.js"></script>

</body>
</html>

Answer 1

Я не понял как именно получать ширину и высоту сцены, но понял как это сделать с фоновым прямоугольником, теперь его размеры всегда равны размеру сцены.

const stage = new Konva.Stage({
    container: 'canvas',
    width: 512,
    height: 512,
});

const layer = new Konva.Layer();
stage.add(layer);

const background = new Konva.Rect({
    width: 512,
    height: 512,
    fill: 'green',
    stroke: true,
    strokeWidth: 20,
    listening: false
});
layer.add(background);

const element = new Konva.Rect({
    width: 100,
    height: 100,
    fill: 'red',
    draggable: true
});
layer.add(element);

stage.on('wheel', e => {
    e.evt.preventDefault();

    const oldScale = stage.scaleX();
    const pointer = stage.getPointerPosition();
    let mousePointTo = {
        x: (pointer.x - stage.x()) / oldScale,
        y: (pointer.y - stage.y()) / oldScale,
    };

    let direction = e.evt.deltaY < 0 ? -1 : 1;

    const newScale = direction < 0 ? oldScale * 1.1 : oldScale / 1.1;
    stage.scale({ x: newScale, y: newScale });
    stage.position({
        x: pointer.x - mousePointTo.x * newScale,
        y: pointer.y - mousePointTo.y * newScale,
    });

    resizeBackground(direction);
});

function resizeBackground(direction) {
    background.absolutePosition({ x: 0, y: 0 });
    background.setAttrs({
        width: calcScaledSize(direction, background.width()),
        height: calcScaledSize(direction, background.height()),
    });
}

function calcScaledSize(direction, axis) {
    return direction > 0 ? axis * 1.1 : axis / 1.1
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>

<div id="canvas"></div>

<script src="https://unpkg.com/konva@8/konva.min.js"></script>

</body>
</html>

БЛОГ НА HUSL

Как пересчитать ширину и высоту сцены Konvajs?

Ответы (1 шт):