使用文本框输入在画布上移动对象

我有一个画布，我可以添加图层，这些图层可以移动，选择，旋转，调整大小等。在画布下方，我显示图层的属性（x，y ，宽度，高度）。使用文本框输入在画布上移动对象

我所试图做的，当我改变文本框，它包含x的值是和Y坐标层应该重新定位，以我在输入的坐标。

我已经试过几件事情，但一切似乎把事情弄糟的画布，我用这对现在mousemove移动层：

else if (layerState == MOVING && mouseDown) { 
    selectedLayer.offsetX += e.pageX - canvasOffsetX - mousePrevX; 
    selectedLayer.offsetY += e.pageY - canvasOffsetY - mousePrevY; 

    drawMarker(selectedLayer); 
}

而且我用这个来获得层的x和y：

document.getElementById('x').value = Math.round(layer.offsetX*100)/100; 
document.getElementById('y').value = Math.round(layer.offsetY*100)/100;

我的画布和代码的工作示例可以在这里找到：

http://cdpn.io/fjzcv

我也试着用这些例子来工作，但无法得到其中的任何工作：

http://chimera.labs.oreilly.com/books/1234000001654/ch03.html#text_arranger_version_2.0 http://fabricjs.com/controls/

我已经尝试在texbox上设置eventListener，但是当我这样做时，画布将消失。

如果有人知道如何做到这一点，那就太棒了！

编辑：

我发现了一种方法来改变坐标的onchange与文本框，但现在我可以将其更改为一组号码，而不是采取我填写在文本框中的值：

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

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

任何人都知道如何让它移动到填充coördinate？

来源

2014-05-13 Daanvn

我试着在代码笔上编辑HTML，我认为这应该可以工作。

首先添加一个事件监听器到你的文本框中，在那里你有画布。

document.getElementById('x').addEventListener('onchange',updatePos,false); 
canvas.addEventListener('mousemove', mouseMoveEvent, false); 
....

然后创建一个类似的功能，以您的mouseMoveEvent(e)更改所选层值

function updatePos(e) { 
    var temp = document.getElementById('x').value; 
    selectedLayer.offsetX = canvas.offsetX + temp; 
    drawMarker(selectedLayer); 
}

显然，你可能需要在验证添加或更改为适合您的代码，但它应该得到的对象到处走。

来源

2014-05-13 10:59:59 DaveOrrock

Thnx的响应，但添加一个事件监听器的文本框会导致画布失败（消失/转黑？）。如果你确实得到这个工作，你介意编辑codepen并显示它吗？ – Daanvn

你是否能够在codepen中使用它？ – Daanvn

对不起，我没有机会。放入事件处理程序不应该影响画布。这将是值得检查是什么错误被抛出。在Chrome中使用开发人员工具，或者在FireFox中使用Firebug。害怕我没有机会在接下来的几天里看看，但我会尽我所能。 – DaveOrrock

使用文本框输入在画布上移动对象

回答

相关问题