HTML5畫布文本編輯

我使用fillText(); 填補HTML5畫布文本如何使它可編輯和讀取的值到一個變量？文字必須在畫布內，因爲它會寫入一些複雜的多邊形形狀。HTML5畫布文本編輯

2011-07-25 Srini

您可以使用像[fabric.js]（http://kangax.github.com/fabric.js/demos/kitchensink/index.html）這樣的庫，它可以讓您創建文本對象，然後編輯它們實時，刪除，克隆，移動，旋轉，縮放它們等等...... 點擊演示頁面上的「添加文本」，然後選擇它並在textarea下面的畫布中進行編輯。還有各種用於文本呈現的選項，例如用下劃線，筆劃或陰影。 – kangax

@kangax任何使用Fabric.js實時編輯文本對象的例子？ kitchensink演示可以添加文本，之後可以隨意縮放和旋轉 - 但是有沒有簡單的方法來編輯文本內容？ –

@MathiasBynens在kitchensink中，您可以在獨立的textarea中編輯文本，並立即反映在畫布上（它位於畫布下）。我們在[printi.ru]上使用了相同的方法（http://printio.ru/tees/new），並且我在其他地方看到了這個想法的一些變化（例如[easel.ly]（http：///www.easel.ly/），它們將textarea放置在您正在編輯的文本旁邊）。 – kangax

您無法從畫布中獲取文本。您需要做的是在使用fillText();並呈現畫布之前將文本保留在變量中。如果要編輯畫布中的文本，則必須再次繪製畫布，並在要使用fillText();呈現編輯後的文本時再次從變量中讀取文本。

來源

2011-07-25 11:10:36 Jonas

一旦文本被繪製到畫布上，它就變成了像素。原始文本（和多邊形輪廓）將不會被存儲。您無法從畫布中取回，因爲您無法從jpg或png文件中獲取它。

如果畫布是由你的JavaScript的繪製，你可以存儲在其他地方的文本。如果沒有，你必須OCR它。

來源

2011-07-26 10:10:28

看看斑馬。它是一組呈現在HTML畫布上的小部件，其中一個小部件是文本編輯器。看起來它是免費的，開源的，除了提供到他們的js文件的鏈接之外，他們在GitHub上還有一個Git存檔。 http://www.zebkit.org/

來源

2013-10-05 21:04:04 froggythefrog

HTML5畫布文本編輯

回答

相關問題