Как получить неограниченную высоту для сцены в Konva и проблему совместимости с IE / Firefox - PullRequest
Новая
       11

Как получить неограниченную высоту для сцены в Konva и проблему совместимости с IE / Firefox

0 голосов
/ 03 мая 2018

Для моего проекта мне нужно создать страницу конва с большим количеством узлов. Пользователь должен иметь возможность добавить новый узел и удалить его. Пока наши производительные данные имеют около 8000 узлов. Я работаю с angularJS и Konva. Страницы должны работать в Chrome, IE и Firefox. Коды выглядят так (изменено в соответствии с политикой компании): 

angular.module('testModule').controller('compabilityTestCtrl', [
function () {
    var compabilityTestCtrl = this;
    compabilityTestCtrl.stage = new Konva.Stage({
        container: angular.element('<div>')[0],
        width: 800,
        height: 0
    });

    var layer = new Konva.Layer({});

    var rect = new Konva.Rect({
        x: 50,
        y: 25,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
    });

    layer.add(rect);
    compabilityTestCtrl.stage.height(rect.attrs.y + 50);

    for (var i = 1; i < 436; i++) {
        var newRect = rect.clone({
            y: rect.attrs.y + (i * 75)
        });

        layer.add(newRect);
        compabilityTestCtrl.stage.height(newRect.attrs.y + 75);

        if (i == 435) {
            console.log("Stage height is: " + compabilityTestCtrl.stage.getHeight());
        }
    }

    compabilityTestCtrl.stage.add(layer);
    angular.element('#compabilityTestKonva').append(compabilityTestCtrl.stage.content);
}]);

Проблема заключается в следующем: 1. Как вы можете видеть, он может генерировать узел до высоты этапа 32725 пикселей. Если я добавлю еще один узел (for-Loop для 437), страница исчезнет (в Chrome). Он может генерировать только до 436 узлов. 2. В Firefox для 436 узлов страница генерируется не полностью. Это просто показывает 3/4 часть из них. Если я переключился в безопасный режим, он показал все из них. Более 436 узлов также исчезли, как в Chrome. 3. В IE он просто показал 1/4 всех узлов.

Вопросы: Почему я не могу отобразить все страницы в Firefox и IE? Почему страницы исчезают, если сцена становится больше (во всех браузерах), в этом случае ... больше 32725 пикселей? У Konva ограниченная высота сцены?

Буду очень рад вашим предложениям.

Я только что написал скрипку, чтобы вы знали, в чем на самом деле моя проблема. JSFiddle

В скрипте он может генерировать до 430 узлов (в Chrome), более того, я вижу только пустую страницу. В Firefox он завершился на 353 узлах, а в IE - на 108.

1 Ответ

0 голосов
/ 03 мая 2018

Элемент canvas похож на изображение.

32725 пикселей высочайшего размера. Он будет использовать много ресурсов.

Попробуйте сделать сцену как можно меньше. Лучше сделать так, чтобы он не превышал размер экрана. Вы можете добавить некоторый тип прокрутки на сцену, чтобы пользователи могли видеть все объекты.

...