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

问题描述

我正在寻找一种从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,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>

解决方法

如果查看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,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>

double-click konva konvajs