Question

我最近问过this问题，当用户在文本框中更改X和Y标记时，是否有办法在画布上移动图层。我找到了一种方法来做到这一点，但确实有一些错误。

为了让事情更容易理解，我在问题的底部添加了2个我画布的工作代码！

我尝试过的事情：

document.getElementById('x').onchange=function(){selectedLayer.offsetX = 100;
drawMarker(selectedLayer);
};

document.getElementById('y').onchange=function(){selectedLayer.offsetY = 100;
drawMarker(selectedLayer);
};

当用户更改文本框的值时，图层将自动转到100.100coördinates。同样在使用它时，该层将在重新定位后保持正常。（仍能移动它）

我试过的另一件事：

document.getElementById('x').onchange=function(){selectedLayer.offsetX = document.getElementById('x').value;
drawMarker(selectedLayer);
};

document.getElementById('y').onchange=function(){selectedLayer.offsetY = document.getElementById('y').value;
drawMarker(selectedLayer);
};

使用它会得到文本框的值，但是使用它有一些问题：
- 在文本框中键入值时，图层将转到coördinate，它比给定值大100倍。（当输入x = 1时，它将转到x = 100）
- 重新定位图层后，我无法再选择/移动图层。

这里要明确的是工作中的两个例子：

The first thing I've tried (offsetX = 100;)

The second thing I've tried (offsetX = document.getElementById('x').value)

要在codepens中试一试，请制作一个文本层并在画布上稍微移动一下。当您看到底部文本框中填写的X和Y时，尝试更改值，您将看到它发生。（使用第二个codepen使用低于5的值）

如果有人知道如何解决这个问题，那么它将获得正确的价值，因此在它变得很棒之后它将保持可选择状态！

Answer 1

通过一些奇怪的解决方法解决了这个问题，但这就是我现在正在使用的：

document.getElementById('x').onchange=function(){
    selectedLayer.offsetX = document.getElementById('x').value - canvasOffsetX + 360;
    drawMarker(selectedLayer);
};

document.getElementById('y').onchange=function(){
    selectedLayer.offsetY = document.getElementById('y').value - canvasOffsetY + 101.91;
    drawMarker(selectedLayer);
};

在文本框中更改X和Y时，重新定位HTML5 Canvas上的元素

1 个答案: