Как перетащить элементы между 2 столбцами с помощью «Konva. JS»? - PullRequest
Новая
       42

Как перетащить элементы между 2 столбцами с помощью «Konva. JS»?

1 голос
/ 02 мая 2020

Я ищу способ перетаскивать элементы между двумя столбцами с помощью Konva. JS. Поскольку я нашел пример кода с использованием Sortable. JS, я перенес его и написал следующий код. С этим кодом, я ожидал, что есть две вертикальные независимые полосы прокрутки, такие как в этом примере изображения:

one scrollbar for each column

Однако, как показано на этом изображении, это не так. мой код:

no scrollbars.

мой код: 

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/konva@5.0.2/konva.min.js"></script>
        <meta charset="utf-8" />
        <style>
            body {
                margin: 0;
                padding: 0;
                background-color: #f0f0f0;
                height:100%;
                overflow: hidden;
            }
            #Leftcontainer {
                overflow: auto;
            }
            #Rightcontainer {
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="Leftcontainer"></div> <!-- Left Column -->
            <div id="Rightcontainer"></div> <!-- Right Column -->
        </div>
        <script>
            var width = window.innerWidth;
            var height = window.innerHeight;
            var stage = new Konva.Stage({
                container: 'container',
                width: width,
                height: 60*1090,
            });
            //Layer 1
            var layer = new Konva.Layer();
            stage.add(layer);

            //Layer 2
            var tempLayer = new Konva.Layer();
            stage.add(tempLayer);

            //Load Image (Group of Left Column)
            var leftGroup = new Konva.Group({
                id: 'Leftcontainer',
            });
            layer.add(leftGroup);
            for (let i = 0; i < 100; i++) {
                var imageObj = new Image();
                imageObj.src = './assets/apple.jpg';
                imageObj.addEventListener('load', function() {
                    var dragImage = new Konva.Image({
                        x: 5,
                        y: 20+(5+100)*i,
                        image: imageObj,
                        width: 100,
                        height: 100,
                        draggable: false,
                    });
                    leftGroup.add(dragImage);
                    layer.draw();
                });
            };

            //Load Text (Group of Right Column)
            var rightGroup = new Konva.Group({
                id: 'Rightcontainer',
            });
            layer.add(rightGroup);
            for (var i = 0; i < 100; i++) {
                var WordLabel = new Konva.Label({
                    x: 300,
                    y: 18+60*i,
                    opacity: 0.75,
                    draggable: true,
                    fill: 'green',
                });
                WordLabel.add(
                    new Konva.Tag({
                        fill: 'green',
                        lineJoin: 'round'
                    })
                );
                WordLabel.add(
                    new Konva.Text({
                        text: "Apple",
                        fontFamily: 'Calibri',
                        fontSize: 18,
                        padding: 5,
                        fill: 'white',
                    })
                );
                rightGroup.add(WordLabel);
            };
            layer.draw();

        </script>
    </body>
</html>

1 Ответ

2 голосов
/ 03 мая 2020

Может показаться, что на вашей странице будет два столбца, поскольку у вас есть HTML для контейнера, Leftcontainer и Rightcontainer. Затем вы, кажется, устанавливаете стадию Konva в div 'container', но позже создаете группы Konva для совместной работы с левыми + правыми контейнерами. Затем вы делаете эти группы длинными и ожидаете, что будут вертикальные полосы прокрутки.

Вы делаете ложное предположение относительно связи между HTML5 canvas (для которой Konva является оболочкой) и его взаимодействием с HTML элементы. Основой c принципа является то, что HTML5 холст «живет» внутри одного HTML элемента. Вы не можете «разделить» его биты между HTML элементами так, как вы пытаетесь.

[Внизу: под крышками Konva ДЕЛАЕТ создание сцены для каждого слоя, но это по-прежнему не позволяет размещать эти элементы. слои в другие хост-контейнеры, кроме основного этапа.]

Опции:

1 - вам не требуется специально решение на основе холста для предоставления перетаскивания на основе изображения. Вы бы уже нашли это с сортируемым. js. Но если вы просто используете это как учебную деятельность, чтобы понять холст, то вы молодец!

2 - продолжая этот подход холста, ваша базовая c архитектура сцены и группы на столбец является разумной , Но вы должны позаботиться о создании полос прокрутки, поскольку в мире canvas нет таких удобных ярлыков пользовательского интерфейса.

3 - снова, следуя холст-решению, проигнорируйте основной элемент контейнера и создайте в КАЖДОЙ левой и правой частях контейнера сцену для представления левого и правого столбцов. Нарисуйте содержимое, а затем подойдите к проблеме как к перетаскиванию элемента с одного холста на другой.

...