Question

我有一个画布，我可以在其上添加图层，这些图层可以移动，选择，旋转，调整大小等。在画布下方，我显示图层的属性（x，y，宽度，高度）。 / p>

我要做的是当我更改包含x和ycoördinates的文本框中的值时，应该将图层重新定位到我输入的coördinates。

我尝试了几件事，但是一切似乎搞乱了画布，我现在用它来移动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但是当我这样做时画布会消失。

如果有人知道怎么做，那就太好了！

修改

我找到了一种方法来改变使用文本框更改的更改，但现在我可以将它们更改为设定的数字而不是取我填写的文本框中的值：

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

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

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

Answer 1

我尝试在代码笔上编辑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);
}

显然，您可能需要添加验证或更改它以适合您的代码，但它应该让对象随处移动。

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

1 个答案: