在文本框中更改X和Y时，重新定位HTML5 Canvas上的元素 [英] Reposition element on HTML5 Canvas when changing X and Y in textbox
问题描述
我最近问过这个问题，询问是否有办法当用户在文本框中更改X和Ycoördinates时，在画布上移动图层。我找到了一种方法来做到这一点，但它确实有一些错误。
I recently asked this question asking if there was a way to move a layer on the canvas when the user changes the X and Y coördinates in a textbox. I have found a way to do this but it does have some errors in it.
为了让事情更容易理解，我已经添加了2个我的画布的工作代码。问题的底部！
To make things easier to understand I've added 2 working codepens of my canvas at the bottom of the question!
我尝试过的事情：
document.getElementById('x').onchange=function(){selectedLayer.offsetX = 100;
drawMarker(selectedLayer);
};
document.getElementById('y').onchange=function(){selectedLayer.offsetY = 100;
drawMarker(selectedLayer);
};
当用户更改文本框的值时，图层将自动转到100.100coördinates，就像它一样应该。同样在使用它时，该层在重新定位后将保持正常。 （仍然可以移动它）
When the user changes the values of the textboxes now the layer will automatically go to the 100.100 coördinates like it should. Also while using this the layer will keep acting normal after repositioning itself. (Still being able to move it)
我试过的另一件事：
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）
- 重新定位图层后，我无法再选择/移动图层。
Using this it will get the value of the textbox but there are some problems using this:
- When typing in a value in the textbox the layer will go to the coördinate which is 100 times bigger then the given value. (When typing x=1 it will go to x=100)
- After the layer is repositioned I am not able to select/move the layer anymore.
为了清楚起见，这里有2个工作代码示例：
To make things clear here are the 2 examples in working codepens:
我尝试过的第二件事（offsetX = document.getElementById（'x'）。value）
要在codepens中试一试，请创建一个textlayer并在画布上稍微移动一下。当您看到底部文本框中填写的X和Y时，尝试更改值，您将看到它发生。 （使用第二个codepen使用低于5的值）
To try it out in the codepens make a textlayer and move it a bit on the canvas. When you see the X and Y filled in at the textboxes at the bottom try changing the values and you will see it happen. (With the second codepen use values below 5)
如果有人知道如何解决这个问题，那么它将获得正确的值，因此它会保持可选性！
If anyone knows how to fix this so it will get the right value and so it will stay selectable after it would be great!
推荐答案
通过一些奇怪的解决方法解决了这个问题，但这就是我现在正在使用的：
Fixed this with a bit of a weird workaround but this is what I'm using now:
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上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
