Question

我正在用HTML画布制作图形系统，大多数情况下已经完成，但是我在一部分上遇到了麻烦。我已经想出了如何使图形节点出现在用户想要的位置，但是当我在HTML元素上使用相同的方法时，我已经使用JavaScript将其添加到DOM中了，但是它将无法正常工作。我非常确定问题出在newCoordsX.value和newCoordsY.value上，因为系统在屏幕的左下角绘制了该节点的图形，但是原点在右上角，所以不应左下角没有任何说明。它不会响应任何输入，只会绘制左下角的节点。我希望根据用户输入的数字对其进行绘制。以下是有关您将在程序中看到的变量的一些信息。 addN是一个按钮，它将在单击时执行事件。 nodeAr是一个对象，用于跟踪按钮上已有的点击次数，因此可以阻止8次点击后显示新输入。 chunk等于75。这是每个图形点之间的像素数。 node是一个数组，每个节点都存储在其中。update在图上绘制节点。如果您需要更多信息，我很乐意显示更多代码，请告诉我。

<div id="adda">
    <div id="add">Add another node</div>
</div>

addN.addEventListener("click", () => {
    let radius = 3;
    newCoordsX = document.createElement('input');
    newCoordsY = document.createElement('input');
    newCoordsX.placeholder = "X value";
    newCoordsY.placeholder = "Y value";
    newCoordsX.style.marginTop = margin + "px";
    newCoordsX.style.display = "block";
    newCoordsY.style.display = 'block';
    document.body.appendChild(newCoordsX);
    document.body.appendChild(newCoordsY);
    document.body.appendChild(document.createElement('br'));
    margin = 10;
    nodeAr.clicks +=1;

    let xPos = newCoordsX.value * chunk + 7;
    let yPos = 750 - newCoordsY.value * chunk - 4;

    if (nodeAr.clicks == 8){
        newCoordsX.style.display = 'none';
        newCoordsY.style.display = 'none';
        nodeAr.clicks--;
    };

    newCoordsX && newCoordsY.addEventListener("keydown", (ev) => {
        if (ev.keyCode == 13){
            node.push(new Node(xPos, yPos, radius));
            for (let i=0; i < node.length; i++){
                node[i].update(node);
            };
        };
    });
});

画布无法正确绘制/更新

0 个答案: