如何从 Konva 的 'dblclick' 事件中获取 Konva 标签的 ID答案

【问题标题】：How to obtain ID of Konva Label from Konva's 'dblclick' event如何从 Konva 的 'dblclick' 事件中获取 Konva 标签的 ID
【发布时间】：2021-02-04 22:56:56
【问题描述】：

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

我可以从 Konva 的 'dblclick' 和 'dragmove' 事件中获取 Konva 图像的 ID（以下代码中的 321）（以下代码中的 Konva 徽标“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>

【问题讨论】：

标签： double-click konvajs konva

【解决方案1】：

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

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

在下面工作sn-p。

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

【讨论】：

亲爱的@VanquiishedWombat，你是我的上帝。非常感谢您的超级有用和最友善的回答！赞，赞，赞！！它完全帮助了我，我也从答案中学到了很多东西。这很可能是我 JavaScript 生活中划时代的问答。你多好啊！！太感谢了！！！（最后，请允许我报告在我的测试环境中不需要 jquery.min.js，即 Google Chrome 版本 85.0.4183.121）。
谢谢 - 虽然我认为你可能反应过度。 jq min 是我的错 - 一个反射动作！
从不为我夸大，因为我记得你以前给过我准确而详细的答案。我无法通过网络搜索解决这个问题。你降临并救了我。我觉得你是上帝。你总是帮了我很多忙！！！非常感谢你的好意。