使用文本框輸入在畫布上移動對象

我有一個畫布，我可以添加圖層，這些圖層可以移動，選擇，旋轉，調整大小等。在畫布下方，我顯示圖層的屬性（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

使用文本框輸入在畫布上移動對象

回答

相關問題