Question

我需要在KonvaJS图层的不同位置放置文本输入。我在https://konvajs.github.io/docs/sandbox/Editable_Text.html找到了以下代码，我试图理解 textPosition ， stageBox 和 areaPosition 变量这段代码。我希望我的舞台在浏览器窗口中居中，但是当我这样做时，textarea（在dblclick上激活）会弹出左侧。我无法获得x / y坐标的控制台读数，因此我无法看到定位的工作原理，因此，如何更改它。任何人都可以解释，或指出我正确的方向吗？

public int solution(int[] A) {
        int A1 = 0;
        int pair = 0;
        for(int i = A.length-1 ; i>=0; i--){
            if(A[i]==1){
                A1++;
            }else{
                pair += A1;
            }
            if(pair > 1000000000){
                return -1;
            }
        }
        return pair;
}

更新：我解决了部分问题 - textarea显示出不合适的位置。您需要在HTML文件中使用2个div而不是一个，如下所示：

var text_overlay = new Konva.Layer();
stage.add(text_overlay);

var textNode = new Konva.Text({
    text: 'Some text here',
    x: 20,
    y: 50,
    fontSize: 20
});

text_overlay.add(textNode);
text_overlay.draw();

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

    // first we need to find its position
    var textPosition = textNode.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 = textNode.text();
    textarea.style.position = 'absolute';
    textarea.style.top = areaPosition.y + 'px';
    textarea.style.left = areaPosition.x + 'px';
    textarea.style.width = textNode.width();

    textarea.focus();

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

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

感谢Frens＆＃39;在Draw border edges of the Konvajs container Stage in html上回答那个问题！

KonvaJS，定位可编辑的文本输入

0 个答案: