2017-02-17 38 views
0

我如何在fabric.js中實現此目的?面料js文字限制

文本限制: 1) - 如果用戶在可用的文本框中鍵入了太多文本,則不應允許它們顯示,並且應該顯示一條消息,告訴他們選擇不同的消息或查找不同的字體。 找到了答案對這個..

請幫助我remaning 2

2) - 如果用戶鍵入的消息那裏是留在雙方的文本框中輸入一個很大的空間,在文本框中應該調整到文本的1mm以內。我想這是爲了防止文本框帶有虛線邊框。另請注意,背景圖案不會放在文本框下,這是另一個原因,如果文本不能填充寬度(以便可以顯示更多背景),則需要縮短文本框。

3) - 客戶端總是希望文本框的最大高度被最大化,這樣字母的頂部總是接觸頂部,字母的底部總是接觸底部,無論它是混合大寫和小寫,不管字母是否有尾。
這裏有幾個例子來說明需要採取什麼措施(請閱讀直到列表的末尾正確理解):
單詞「hello」 - 所有的信件將觸及頂部和底部
單詞「你好」 - 「H」和「ll」將觸及頂部和底部
單詞「aaaa」 - 即使小寫字母會觸摸頂部和底部
單詞「aaah」 - 「h」將觸摸頂部和底部, 「aaa」只會觸底
單詞「big」 - 由於「g」下降,「g」會觸及底部,但「bi」不會。這個詞實際上會非常小,因爲「b」會觸摸頂部而不是底部,「g」會觸摸底部而不是頂部,「i」也不會觸摸。

+0

有一些類似於他的其他stackoverflow [here](http://stackoverflow.com/questions/26123584/frabricjs-limit-text-input-area) –

+0

謝謝。我編輯過..第二點和第三點呢?這些可能在fabric.js中嗎? – Naveen

回答

0

對於問題2,你需要捕捉的事件,

,然後在函數內部,你應該得到的文本框和實際文本的寬度的寬度並相應地調整文本框的寬度,像

canvas.on('text:editing:exited', onTextExited) 
onTextExited = function(event) 
{ 
var onemm = 10; //Need to calculate what one mm is in pixels 
var canvasObj=event.target; 
if(canvasObj.width > canvasObj._getTextWidth()) 
{ 
//Adjust the width of object 
canvasObj.width = canvasObj._getTextWidth() + onemm; 
canvasObj.setCoords(); 
} 

}