javascript - 单击按钮时如何触发事件监听图层上的形状？

在KonvaJS中，是否可以在单击按钮时使图层不活动（但不可见），然后在单击另一个按钮时使图层活动？我已经尝试过“ text_overlay.listening（false）;”但这不起作用。我可以使用“ textNode0.listening（false）;”停用单个textNode，这确实会阻止用户编辑该文本，但是这些textNode定位在多边形上，其中一些很小（例如，卢森堡在欧洲地图上）而textarea阻止用户单击下面的多边形（例如，更改其填充颜色）。此外，将有40多个textNodes要处理，因此最好禁用1层！

这是HTML文件的按钮部分：

<script src="js/text-input21.js"></script>
<!-- button events -->
<script>
    // button states on load
    var btnLabelClicked = true;
    var btnColorClicked = false;
    var btnDrawLinesClicked = false;
    //color chip buttons
    var btnViolet = document.getElementById("fillViolet");
    var btnOrange = document.getElementById("fillOrange");
    var btnYellow = document.getElementById("fillYellow");
    //color chip buttons' fill when btnLabelClicked = true
    btnViolet.style.background = disableBtnFill;
    btnOrange.style.background = disableBtnFill;
    btnYellow.style.background = disableBtnFill;

    var buttonID = 'btnLabel';

    function replyClick(clickedID) {
        buttonID = (clickedID);
        if (buttonID === 'btnColor') {
            textNode0.listening(false);
            textNode15.listening(false);
            textNode16.listening(false);
            btnViolet.disabled = false;
            btnViolet.style.background = '#842dce';
            btnOrange.disabled = false;
            btnOrange.style.background = '#ffa500';
            btnYellow.disabled = false;
            btnYellow.style.background = '#ffff00';

            btnLabelClicked = false;
            btnColorClicked = true;
            btnDrawLinesClicked = false;

        } else if (btnColorClicked && (buttonID === 'fillViolet' || buttonID === 'fillOrange' || buttonID === 'fillYellow')) {
            //text_overlay.listening(false);
            textNode0.listening(false);
            textNode15.listening(false);
            textNode16.listening(false);
            newFill = document.getElementById(buttonID).style.background;
        } else if (buttonID === 'btnLabel' || buttonID === 'btnDrawLines' || buttonID === 'btnEraseLines' || buttonID === 'btnExport') {
            //disable color buttons
            btnColorClicked = false;
            btnViolet.disabled = true;
            btnViolet.style.background = disableBtnFill;
            btnOrange.disabled = true;
            btnOrange.style.background = disableBtnFill;
            btnYellow.disabled = true;
            btnYellow.style.background = disableBtnFill;
            if (buttonID === 'btnLabel') {
                textNode0.listening(true);
                textNode15.listening(true);
                textNode16.listening(true);
                btnLabelClicked = true;
                btnDrawLinesClicked = false;
            } else { //buttonID is not btnLabel or any of the color buttons
                textNode0.listening(false);
                textNode15.listening(false);
                textNode16.listening(false);
                btnLabelClicked = false;
                btnDrawLinesClicked = true;
            }
        }
    }
</script>

这是包含text_overlay层的text-input21.js文件：

var text_overlay = new Konva.Layer({
    listening: true
});

stage.add(text_overlay);

var textNode0 = new Konva.Text({
    text: 'X',
    x: 80, // centered between Ireland & Great Britain
    y: 125,
    width: 150,
    height: 15,
    fontFamily: 'Arial, Helvetica, "sans-serif"',
    fontSize: 14,
    align: 'center',
    listening: true
});

var textNode15 = new Konva.Text({
    text: 'X',
    x: 230, // Luxembourg
    y: 225,
    width: 100,
    height: 15,
    fontFamily: 'Arial, Helvetica, "sans-serif"',
    fontSize: 14,
    align: 'center',
    listening: true
});

var textNode16 = new Konva.Text({
    text: 'X',
    x: 175, // France
    y: 290,
    width: 100,
    height: 15,
    fontFamily: 'Arial, Helvetica, "sans-serif"',
    fontSize: 14,
    align: 'center',
    listening: true
});

text_overlay.add(textNode0);
text_overlay.add(textNode15);
text_overlay.add(textNode16);
text_overlay.draw();

console.log(text_overlay.getZIndex());

textNode0.on('click', () => {
    // create textarea over canvas with absolute position

    // first we need to find its position
    var textPosition = textNode0.getAbsolutePosition();
    var stageBox = stage.getContainer().getBoundingClientRect();

    var areaPosition = {
        x: textPosition.x + stageBox.left,
        y: textPosition.y + stageBox.top
    };

    // create textarea and style it
    var textarea = document.createElement('textarea');
    document.body.appendChild(textarea);

    textarea.value = textNode0.text();
    textarea.style.textAlign = 'center';
    textarea.style.resize = 'none';
    textarea.style.position = 'absolute';
    textarea.style.left = areaPosition.x + 'px'; //positioning needs work
    textarea.style.top = areaPosition.y + 'px';
    textarea.style.width = textNode0.width();
    textarea.style.background = 'transparent';
    textarea.style.border = 1; // final border = 0
    textarea.style.outline = 'none';
    textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
    textarea.style.fontSize = 14;

    textarea.focus();

    textarea.addEventListener('keydown', function (e) {
        // hide on enter
        if (e.keyCode === 13) {
            textNode0.text(textarea.value);
            text_overlay.draw();
            document.body.removeChild(textarea);
        }
    });
})

textNode15.on('click', () => {
    // create textarea over canvas with absolute position

    // first we need to find its position
    var textPosition = textNode15.getAbsolutePosition();
    var stageBox = stage.getContainer().getBoundingClientRect();

    var areaPosition = {
        x: textPosition.x + stageBox.left,
        y: textPosition.y + stageBox.top
    };

    // create textarea and style it
    var textarea = document.createElement('textarea');
    document.body.appendChild(textarea);

    textarea.value = textNode15.text();
    textarea.style.textAlign = 'center';
    textarea.style.resize = 'none';
    textarea.style.position = 'absolute';
    textarea.style.left = areaPosition.x - 20 + 'px'; //positioning needs work
    textarea.style.top = areaPosition.y - 20 + 'px';
    textarea.style.width = textNode15.width();
    textarea.style.background = 'transparent';
    textarea.style.border = 1; // final border = 0
    textarea.style.outline = 'none';
    textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
    textarea.style.fontSize = 14;

    textarea.focus();

    textarea.addEventListener('keydown', function (e) {
        // hide on enter
        if (e.keyCode === 13) {
            textNode15.text(textarea.value);
            text_overlay.draw();
            document.body.removeChild(textarea);
        }
    });
})

textNode16.on('click', () => {
    // create textarea over canvas with absolute position

    // first we need to find its position
    var textPosition = textNode16.getAbsolutePosition();
    var stageBox = stage.getContainer().getBoundingClientRect();

    var areaPosition = {
        x: textPosition.x + stageBox.left,
        y: textPosition.y + stageBox.top
    };

    // create textarea and style it
    var textarea = document.createElement('textarea');
    document.body.appendChild(textarea);

    textarea.value = textNode16.text();
    textarea.style.textAlign = 'center';
    textarea.style.resize = 'none';
    textarea.style.position = 'absolute';
    textarea.style.left = areaPosition.x - 45 + 'px'; //positioning needs work
    textarea.style.top = areaPosition.y - 20 + 'px';
    textarea.style.width = textNode16.width();
    textarea.style.background = 'transparent';
    textarea.style.border = 1; // final border = 0
    textarea.style.outline = 'none';
    textarea.style.fontFamily = 'Arial, Helvetica, "sans-serif"';
    textarea.style.fontSize = 14;

    textarea.focus();

    textarea.addEventListener('keydown', function (e) {
        // hide on enter
        if (e.keyCode === 13) {
            textNode16.text(textarea.value);
            text_overlay.draw();
            document.body.removeChild(textarea);
        }
    });
})

// add the layer to the stage
stage.add(text_overlay);

最佳答案

根据实验，layer.listening（）设置侦听层，但不侦听其内容。它不是很直观，但是很有意义，因为图层实际上是HTML5画布。例如，您可能希望在层背景上切换鼠标移动的跟踪，但让层子形状仍在不断监听，因此您需要这样做。

您可以使用getchildren function设置对孩子的聆听

// get all children
var children = layer.getChildren();

然后迭代该列表，并在每个成员上使用setListening（）。 getChildren（）函数可以与className过滤器组合以创建子对象的子集，因此您可以切换所有文本元素，所有多边形，所有圆等。这非常时髦。

附带说明一下，不要把它当作批评，您的编码风格似乎不是DRY。我的意思是，您对textNode0，textNode15和textNode16的点击事件是重复的-我想每当您意识到需要进行更改时，都必须手动进行更改。这样，您就可以通过剪切，粘贴或遗漏来发现错误。最好制作一个标准的myTextNode对象，并使其包含textNode所需的所有功能，然后在创建每个对象时传递唯一的参数。这样，对myTextNode'class'进行更改会立即影响所有这些。它的标签是“ JS对象”，但是如果您使用Google，则信息会过多。阅读this at W3 Schools可以“进入”主题。如果您知道所有这些，请原谅我，但是您的textNode有很多国家。