1

我正在寻找一种方法来从 Konva 的 'dblclick' 事件中获取 Konva 标签（以下代码中的“Hello World！”）的 ID（以下代码中的 123）。

我可以从 Konva 的 'dblclick' 和 'dragmove' 事件中获取 Konva 图像的 ID（下面的代码中的 321）（下面的代码中的 Konva 的 LOGO “K”）。我还可以从“dragmove”事件中获取 Konva 标签（“Hello World！”）的 ID（下面代码中的 123）；但是我无法从 Konva 的 'dblclick' 事件中获取 Konva 标签（“Hello World！”）的 ID（以下代码中的 123）。

在此处输入图像描述

我的代码：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/konva@5.0.2/konva.min.js"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <span id="container"></span>
    </body>
    <script>
        //Konva Stage
        var stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight,
        });
        //Konva Layer
        var layer = new Konva.Layer();
        stage.add(layer);
        //Konva Image
        var imageObj = new Image();
        imageObj.src = 'https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png';
        imageObj.addEventListener('load', function() {
            var kImage = new Konva.Image({
                x: window.innerWidth*2.5/10,
                y: window.innerHeight*1/10,
                image: imageObj,
                id: 321,
                draggable: true,
            });
            layer.add(kImage);
            layer.draw();
        });
        //Konva Label
        WordLabel = new Konva.Label({
            x: window.innerWidth*3/10,
            y: window.innerHeight*4/10,
            opacity: 0.75,
            draggable: true,
            fill: 'green',
            id: 123,
        });
        //Konva Tag
        WordLabel.add(
            new Konva.Tag({
                fill: 'green',
            })
        );
        //Konva Text
        WordLabel.add(
            new Konva.Text({
                text: 'Hello World!',
                fontFamily: 'Calibri',
                fontSize: 18,
                padding: 5,
                fill: 'white',
                strokeWidth: 0,
            })
        );
        layer.add(WordLabel);
        layer.draw();
        //Konva dragstart event
        stage.on('dragstart', function(e) {
            console.log('ID (dragstart) = ' + parseInt(e.target.id()));
        });
        //Konva dblclick event
        stage.on('dblclick dbltap', function (e) {
            console.log('ID (dblclick) = ' +parseInt(e.target.id()));
        });
    </script>
</html>
4

1 回答 1

2

如果您查看 e.target 对象，您可以看到接收点击的是文本节点而不是标签节点。

使用 e.target.findAncestors （请参阅shape API）获取并迭代形状层次结构，以查找具有您所寻找的 ID 属性的祖先形状。

下面的工作片段。

        //Konva Stage
        var stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight,
        });
        //Konva Layer
        var layer = new Konva.Layer();
        stage.add(layer);
        //Konva Image
        var imageObj = new Image();
        imageObj.src = 'https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png';
        imageObj.addEventListener('load', function() {
            var kImage = new Konva.Image({
                x: window.innerWidth*2.5/10,
                y: window.innerHeight*1/10,
                image: imageObj,
                id: 321,
                draggable: true,
            });
            layer.add(kImage);
            layer.draw();
        });
        //Konva Label
        WordLabel = new Konva.Label({
            x: 10,
            y: 20,
            opacity: 0.75,
            draggable: true,
            fill: 'green',
            id: 123,
        });
        //Konva Tag
        WordLabel.add(
            new Konva.Tag({
                fill: 'green'
            })
        );
        //Konva Text
        WordLabel.add(
            new Konva.Text({
                text: 'Hello World!',
                fontFamily: 'Calibri',
                fontSize: 18,
                padding: 5,
                fill: 'white',
                strokeWidth: 0
            })
        );
        layer.add(WordLabel);
        layer.draw();
        //Konva dragstart event
        stage.on('dragstart', function(e) {
            console.log('ID (dragstart) = ' + parseInt(e.target.id()));
        });
        //Konva dblclick event
        stage.on('dblclick dbltap', function (e) {
            
            // Looking for a specif attr on a parent shape. In this 
            // case we know the parent is a Label so search for ancestors of that type
            var nodes = e.target.findAncestors('Label', true);
            if (nodes.length > 0) {
            
                for (var i = 0; i < nodes.length; i++){
                  var id = nodes[i].getAttr("id")              
                  console.log('shape ' + i + ' ID (dblclick)', id )
                }
              }
            else {
                  console.log('ID (dblclick) = ' + parseInt(e.target.id()));
            }
            
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/konva@5.0.2/konva.min.js"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <span id="container"></span>
    </body>
    <script>

    </script>
</html>

于 2020-10-22T10:33:53.707 回答