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

las794

在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函数设置对孩子的收听

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

单击按钮时如何添加不同的图层

单击时未触发angularjs按钮事件

单击按钮时触发角度管道事件

当SearchView可见时,如何侦听ActionBar导航按钮的单击事件?

单击并按住按钮时如何触发单击事件/重复调用函数

AngularJS:侦听指令外部按钮上的单击事件

即使未单击按钮,也会触发按钮上的 onClick 事件

防止在单击其他框中的Enter时触发按钮上的onclick事件

单击按钮时触发事件-在TI CC2541 Keyfob设备上

Javascript/React:是否可以在单击按钮时在 Input 上触发键盘 *ENTER* 事件?

如何触发ListView行单击上的事件?

单击时如何触发微调器事件?

单击矩形时如何触发事件

如何模拟按钮单击,不仅触发事件,还模拟单击动画?

如何在swift4中单击按钮时触发文本框的editchanged事件

javafx:如何将Enter键绑定到按钮并单击事件时将其触发?

按钮单击事件在页面重新加载时触发

Android按钮-单击时触发定时事件

事件处理程序未在动态按钮单击时触发

按钮单击事件未触发

在单击子元素时,如何避免在父元素上触发事件?

单击父div时如何在锚点上触发click事件

如何通过单击按钮触发搜索输入事件

onbeforeunload事件不会在单击浏览器按钮时触发,而是在CMD + R / F5上运行

单击按钮文本时未触发“客户端按钮单击”事件

单击bingmap上的图钉时触发的拖动事件

单击事件触发而无需单击按钮

当目标元素上的实际鼠标单击未开始时,如何防止触发单击事件?

单击标签元素内的文本时,Javascript事件侦听器将触发两次