Не влияет на положение элемента на этапе масштабирования в konva.js

#javascript #canvas #konvajs #konva

#javascript #холст #конвайс #konva

Вопрос:

Я создаю программное обеспечение для создания страниц онлайн, используя amazing konva.js итак, проблема в том, что когда я масштабировал этап, целые элементы меняли там положение. Перед масштабированием всего этапа

После масштабирования этапа текст строки не находится по центру.

задний фон — это просто прямоугольник, имеющий ту же ширину, что и высота сцены, и имеющий фоновое изображение.
Это мой код масштабирования.

 function scaleboth(_x,_y){
stageBackgroundRect.scale({x:_x,y:_y});
stage.scale({x:_x,y:_y});

layer.batchDraw();
}

если вы хотите посмотреть демонстрацию, вот она,
https://mypagemaker.s3.amazonaws.com/index.html
Спасибо, я обещаю, что дам вознаграждение за правильный ответ.

Поскольку я должен его компенсировать, я сделал это, но без изменений

 function minusStage(){
    stage.offsetX(stage.width() / 2);
    stage.offsetY(stage.height() / 2);

    scaleboth(stage.scaleX() - 0.01,stage.scaleY() - 0.01);
}

1. Здесь есть хорошая демонстрация масштабирования относительно точки konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html

2. Масштабирование применяется из верхнего левого угла этапа. Если вы хотите масштабировать от центра, вам нужно сместить этап как часть вашего кода масштабирования перед рисованием.

3. @VanquishedWombat есть изменения, но, как вы можете видеть, stage.width() / 2 не задается надлежащий центр. Я также добавил к нему дополнение

Ответ №1:

Ваш прямоугольник фона находится внутри сцены. Таким образом, масштабирование этапа повлияет на абсолютное масштабирование всех его дочерних элементов, включая фоновый прямоугольник.

Вам просто нужно один раз применить масштаб к одному из родительских элементов (это может быть этап).

1. 100% верно, я уже выяснил это раньше, путем рандомизации моего кода означает просто прокомментировать некоторый код и попытаться запустить другой (вы прекрасно знаете), но я забыл опубликовать его здесь