单击按钮时如何触发事件侦听图层上的形状？答案

【问题标题】：How trigger event listening for shapes on a layer when button clicked?单击按钮时如何触发事件侦听图层上的形状？
【发布时间】：2018-04-06 16:30:45
【问题描述】：

在 KonvaJS 中，是否可以在单击按钮时使图层处于非活动状态（但不是不可见），然后在单击另一个按钮时处于活动状态？我试过“text_overlay.listening(false);”但它不起作用。我可以使用“textNode0.listening(false);”停用单个文本节点，这确实会阻止用户编辑该文本，但这些文本节点位于多边形上，其中一些非常小（例如，欧洲地图上的卢森堡）并且 textarea 阻止用户单击下面的多边形（例如，更改其填充颜色）。此外，将有超过 40 个 textNode 需要处理，因此最好停用 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);

【问题讨论】：

标签： javascript textarea layer konvajs

【解决方案1】：

从实验中，layer.listening() 设置监听层而不是其内容。它不直观，但很有意义，因为图层实际上是 HTML5 画布。例如，您可能希望在图层背景上切换鼠标移动跟踪，但图层子形状仍在连续监听，那么您需要这样做。

您可以使用getchildren function 设置监听孩子

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

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

作为旁注，不要将此视为批评，您的编码风格似乎不是DRY。我的意思是，你对 textNode0、textNode15 和 textNode16 的点击事件是重复的——我想每次你意识到你需要对一个进行更改时，你必须手动对所有人进行更改。这会让你通过剪切和粘贴或遗漏对错误敞开心扉。最好制作一个标准的 myTextNode 对象并让它包含您在 textNode 中所需的所有功能，然后在创建每个对象时传入唯一参数。这样，对 myTextNode“类”的更改会立即影响所有这些。这个标签是“JS Objects”，但如果你用谷歌搜索，你会被信息超载。阅读this at W3 Schools 以了解主题。如果您知道所有这些，请原谅我，但是您的 textNode 有很多国家/地区。

【讨论】：

非常感谢！想象一下我像海绵一样吸收信息——我对此很陌生，我从未听说过 DRY vs WET 参考（太有趣了，顺便说一句）。我会直接采纳你的 getChildren 建议，然后跑去正确学习对象。我也有近 40 种形状可供使用——同一主题的变体——我试图找到一种使用数组来避免重复的方法，但它不起作用（再说一次，我很新）。感谢您的指导！
关于对象的东西，主要你需要知道的是如何使用'new'和一个函数来创建一个对象，然后如何在对象内部使用'this'。我建议您也找到如何将对象作为参数传递 - 这样您就可以将文本对象创建为 var textDef1={x: 10, y: 20, width: 100, height: 80, text: 'x'....)，这会生成一个没有任何方法的“哑”对象，然后通过 var TextObject1 = new myTextObjectClass(textDef1) 将其传递给您的 myTextObject 函数，这会给出您有可能添加方法等。方法是 myTextObject 中的一个函数。