使用文本框输入在画布上移动对象 [英] Move object on Canvas using textbox input
问题描述
我有一个画布，我可以在其上添加图层，这些图层可以移动，选择，旋转，调整大小等。在画布下，我显示图层的属性（x，y，宽度，高度）。
I've got a canvas on which I can add layers, these layers I can move, select, rotate, resize etc. Below the canvas I display the properties of the layer (x, y, width, height).
我想要做的是当我更改包含x和ycoördinates的文本框中的值时，应该重新定位到我输入的coördinates。
What I am trying to do is when I change the values in the textboxes containing the x and y coördinates the layer should be repositioned to the coördinates I typed in.
我试过几个东西，但一切似乎都搞乱了画布，我使用这个移动 mousemove c> now：
I've tried several things but everything seems to mess up the canvas, I am using this to move the layer on mousemove now:
else if (layerState == MOVING && mouseDown) {
selectedLayer.offsetX += e.pageX - canvasOffsetX - mousePrevX;
selectedLayer.offsetY += e.pageY - canvasOffsetY - mousePrevY;
drawMarker(selectedLayer);
}
我使用这个来获取图层的x和y： p>
And I use this to get the x and y of the layer:
document.getElementById('x').value = Math.round(layer.offsetX*100)/100;
document.getElementById('y').value = Math.round(layer.offsetY*100)/100;
我的画布和代码的工作示例可以在这里找到：
A working example of my canvas and the code can be found here:
我也尝试使用这些示例，但无法使任何工作：
I've also tried to work with these examples but couldn't get any of them to work:
http://chimera.labs.oreilly.com/books/1234000001654/ch03.html#text_arranger_version_2。 0
http://fabricjs.com/controls/
我已经尝试在texboxes上设置一个eventListener，但是当我这样做时，画布将消失。
I have tried setting an eventListener on the texboxes but when I do this the canvas will dissapear.
如果有人知道如何做这将是巨大的！
If anyone knows how to do this it would be great!
编辑：
更改与文本框的coördinates更改，但现在我可以将它们更改为一个设置的数字，而不是取我填写的文本框中的值：
I found out a way to change the coördinates onchange with the textbox but now I can just change them to a set number instead of taking the value I filled in the textbox:
document.getElementById('x').onchange=function(){selectedLayer.offsetX = 100;
drawMarker(selectedLayer);
};
document.getElementById('y').onchange=function(){selectedLayer.offsetY = 100;
drawMarker(selectedLayer);
};
任何人都知道如何让它移动到填充的coördinate？
Anyone knows how to get it to move to the filled in coördinate?
推荐答案
我试着在代码笔上编辑HTML，我认为这应该可以工作。
I tried editing the HTML on the code pen and I think this should work.
document.getElementById('x').addEventListener('onchange',updatePos,false);
canvas.addEventListener('mousemove', mouseMoveEvent, false);
....
然后创建一个类似于 mouseMoveEvent（e）更改所选图层值
Then create a similar function to your mouseMoveEvent(e) to change the selected layer values
function updatePos(e) {
var temp = document.getElementById('x').value;
selectedLayer.offsetX = canvas.offsetX + temp;
drawMarker(selectedLayer);
}
显然，您可能需要添加验证或更改以符合您的代码，但它应该让对象四处移动。
Obviously you may need to add in validation or change this to suit your code, but it should get the object moving around.
这篇关于使用文本框输入在画布上移动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
