2017-02-17 7 views
0

これをfabric.jsでどのように達成できますか?ファブリックjsのテキスト制限

テキストの制限: 1) - ユーザーがテキストボックスにテキストを多すぎると入力できないようにし、異なるメッセージを選択するか、別のフォントを探すようにメッセージを表示する必要があります。 はこのために答えを見つけ..

PLSは2

2)remaningために私を助けて - ユーザーが両側にあるテキストボックスに残された空間がたくさんあるメッセージの場合、テキストボックスをテキストの1mm以内になるようにサイズを変更する必要があります。これは、テキストボックスに点線の枠がある場合です。また、背景パターンがテキストボックスの下にはならないことに注意してください。これは、テキストが幅を埋めることがないため、テキストボックスを短くする必要があるもう一つの理由です。

3) - クライアントは常に、テキストボックスの高さを最大にして、文字の上端が常に上端に接触し、下端が常に下端に接触するようにします大文字と小文字の区別がありません。ここで
(適切に理解するために、リストの最後までお読みください)が起こる必要があるかを説明するためのいくつかの例です:
言葉は「HELLO」 - すべての文字が「こんにちは」
上部と下部の言葉に触れます - 「H」と「ll」が上下に表示されます。
単語「aaaa」 - 小文字は上と下をタッチします。
単語「aaah」 - 「h」が上下に表示され、 "aaa"は底部にしか触れません
"big"という単語 - "g"が下がるため、 "g"が底に接触しますが、
"bi"は語れません。 "b"は上には触れるが下にはなく、 "g"は下には触れるが上には触れないので、単語は実際には非常に小さくなり、 "i"も触れない。

+0

他の彼のstackoverflow [ここ](http://stackoverflow.com/questions/26123584/frabricjs-limit-text-input-area) –

+0

ありがとうございます。私は編集しました..第2、第3ポイントはどうですか? 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(); 
} 

} 
ような何かする必要があります
関連する問題