如何使用 "Konva.JS" 在 2 列之间拖放项目？

Question

我正在寻找一种使用 Konva.JS 在 2 列之间拖放项目的方法。由于找到了a sample code using Sortable.JS，所以移植过来，写了下面的代码。使用这段代码，我希望有两个垂直独立的滚动条，例如在这个示例图像中：

然而，没有，如图所示运行我的代码：

.

我的代码：

<!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>

Answer 1

看起来您打算在您的页面上有两列，因为您有 HTML 容器 Leftcontainer 和 Rightcontainer。然后，您似乎在 'container' div 中设置了一个 Konva 阶段，但随后创建了 Konva 组以与左 + 右容器相关联。然后，您将这些组变长并期望有垂直滚动条。

关于 HTML5 canvas（Konva 是其包装器）之间的关系及其与 HTML 元素的交互，您做出了错误的假设。基本原则是 HTML5 canvas 'lives' 位于单个 HTML 元素内。您不能按照您尝试的方式在 HTML 元素之间 'share' 位。

[旁白：在幕后，Konva 确实为每一层创建了一个舞台，但这仍然不允许将这些层放置到主舞台以外的其他主机容器中。]

选项：

1 - 您并不特别需要基于 canvas 的解决方案来提供基于图像的拖放。您可能已经通过 sortable.js 找到了它。但是，如果您只是将此作为学习 activity 来理解 canvas 那么您做得很好！

2 - 继续这种 canvas 方法，您的阶段和每列一个组的基本架构是合理的。但是你必须注意产生滚动条，因为在 canvas 的世界里没有这样方便的 UI 快捷方式。

3 - 再次遵循 canvas 解决方案，忽略主 'container' 元素，并在左右容器元素的每个中创建一个阶段来表示您的左右列。绘制内容，然后将问题视为将一个元素从一个 canvas 拖到另一个

如何使用 "Konva.JS" 在 2 列之间拖放项目？

How to drag and drop items between 2 columns with "Konva.JS"?

javascript

konvajs